Merge pull request #105 from ryuran/feature/node-sass

Add node-sass builder
cleverage · Mar 24, 2017 · 1db6d7f · 1db6d7f
2 parents 532edad + 1b2bfdc
commit 1db6d7f
Show file tree

Hide file tree

Showing 22 changed files with 481 additions and 654 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,7 @@
 
 # SASS
 # -----------------------------------------------------------------------------
-# Ignorer le cache de Sass
+# Ignorer le cache de Sass/Compass
 .sass-cache
 
 # Ignorer la configuration interne de Bunler

diff --git a/.gsk/conf/.editorconfig b/.gsk/conf/.editorconfig
@@ -0,0 +1,15 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,scss,css,html,hbs,twig,json}]
+indent_style = space
+indent_size  = 2
diff --git a/.gsk/conf/.sass-lint.yml b/.gsk/conf/.sass-lint.yml
@@ -0,0 +1,104 @@
+# sass-lint config generated by make-sass-lint-config v0.1.2
+#
+# The following scss-lint Linters are not yet supported by sass-lint:
+# Compass::PropertyWithMixin, ElsePlacement, PropertyCount, SelectorDepth
+# UnnecessaryParentReference, VendorPrefixes
+#
+# The following settings/values are unsupported by sass-lint:
+# Linter Indentation, option "allow_non_nested_indentation"
+# Linter Indentation, option "character"
+# Linter SpaceAfterPropertyColon, option "style" with value "at_least_one_space"
+# Linter SpaceBeforeBrace, option "allow_single_line_padding"
+
+files:
+  include: '**/*.scss'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  border-zero: 0
+  brace-style:
+    - 1
+    - allow-single-line: true
+  class-name-format: 0
+  clean-import-paths:
+    - 1
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 1
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 1
+  extends-before-mixins: 1
+  final-newline:
+    - 1
+    - include: true
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+  function-name-format:
+    - 1
+    - allow-leading-underscore: false
+      convention: hyphenatedlowercase
+  hex-length: 0
+  hex-notation: 0
+  id-name-format: 0
+  indentation:
+    - 1
+    - size: 2
+  leading-zero: 0
+  mixin-name-format:
+    - 1
+    - allow-leading-underscore: false
+      convention: hyphenatedlowercase
+  mixins-before-declarations: 1
+  nesting-depth:
+    - 1
+    - max-depth: 5
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties: 0
+  no-empty-rulesets: 1
+  no-ids: 0
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 0
+  no-qualifying-elements:
+    - 1
+    - allow-element-with-attribute: true
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 1
+  no-url-protocols: 0
+  placeholder-in-extend: 0
+  placeholder-name-format: 0
+  property-sort-order: 0
+  quotes: 0
+  shorthand-values: 1
+  single-line-per-selector: 1
+  space-after-bang:
+    - 1
+    - include: false
+  space-after-colon: 1
+  space-after-comma: 1
+  space-before-bang:
+    - 1
+    - include: true
+  space-before-brace:
+    - 1
+    - include: true
+  space-before-colon: 1
+  space-between-parens:
+    - 1
+    - include: false
+  trailing-semicolon: 1
+  url-quotes: 1
+  variable-for-property: 0
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: false
+      convention: hyphenatedlowercase
+  zero-unit: 1
diff --git a/.gsk/conf/config.rb b/.gsk/conf/config.rb
@@ -2,11 +2,11 @@
 Sass::Script::Number.precision = 8
 
 # Configuration des chemins des ressources:
-sass_dir        = 'src/css'
-images_dir      = 'src/assets/img'
-javascripts_dir = 'src/js'
-fonts_dir       = 'src/assets/fonts'
-css_dir         = 'build/css'
+sass_dir        = './src/css'
+images_dir      = './src/assets/img'
+javascripts_dir = './src/js'
+fonts_dir       = './src/assets/fonts'
+css_dir         = './build/css'
 
 # Configuration des chemins HTTP
 http_path             = ''

diff --git a/.gsk/conf/readme.md b/.gsk/conf/readme.md
@@ -11,9 +11,12 @@ de votre projet. Cependant, si vous modifiez systématiquement les
 configurations par défaut, n'hésitez pas à proposer une merge request au
 starter kit pour que l'on en discute.
 
+* `.editorconfig`  Configuration commune pour le [format des fichier pour les IDE](http://editorconfig.org/)
 * `.jsbeautifyrc`  Configuration pour le [formatage automatique du code HTML](https://github.com/beautify-web/js-beautify)
 * `.eslint.json`   Configuration pour [le linting et la vérification de syntaxe des fichiers JS](http://eslint.org)
 * `.lesshintrc`    Configuration pour le [linting des fichiers LESS](https://github.com/lesshint/lesshint)
-* `.scss-lint.yml` Configuration pour le [linting des fichiers SCSS](https://github.com/brigade/scss-lint/)
+* `.scss-lint.yml` Configuration pour le [linting des fichiers SCSS (pour compass)](https://github.com/brigade/scss-lint/)
+* `.sass-lint.yml` Configuration pour le [linting des fichiers SCSS (pour eyeglass)](https://github.com/sasstools/sass-lint)
 * `.stylintrc`     Configuration pour le [linting des fichiers Stylus](https://rosspatton.github.io/stylint/)
 * `config.rb`      Configuration pour la [compilation Compass](http://compass-style.org/)
+* `Gemfile` [Config pour dependances ruby (si on utilise Compass)](http://bundler.io/gemfile.html)
diff --git a/.gsk/docs/css/compass.md b/.gsk/docs/css/compass.md
@@ -0,0 +1,104 @@
+
+Sass & Compass
+===============================================================================
+
+Nous utilisions [Sass](http://sass-lang.com) et [Compass](http://compass-style.org) dans de nombreux projets historiques.
+
+Configuration:
+```json
+{
+  "css": {
+    "engine": "compass",
+  }
+}
+```
+
+Vérifiez votre environnement
+-------------------------------------------------------------------------------
+
+Sass et compass reposent sur [Ruby](https://www.ruby-lang.org/fr/), assurez-vous que vous l'avez bien installé sur votre environnement.
+
+Il est également nécessaire d'installer l'utilitaire
+[Bundler](http://bundler.io/) dans votre environnement global (cela permet
+d'avoir plusieurs versions de Sass en fonction de chaque projet).
+
+Puis exécutez simplement la commande suivante :
+
+```bash
+$ sudo gem install bundler
+```
+
+Copiez à la racine du projet les fichiers `config.rb` et `Gemfile` que vous trouverez dans le dossier `.gsk/conf`.
+
+Puis, pour être sûr que vous disposez de la dernière version de Sass et Compass
+pour le projet sur lequel vous travaillez, exécutez la commande suivante :
+
+```bash
+$ bundle install --path .gems
+```
+
+En cas de problème de compilation Sass sur un projet existant commencez
+toujours par exécuter la commande suivante :
+
+```bash
+$ bundle update
+```
+
+
+Configuration standard
+-------------------------------------------------------------------------------
+
+Vous pouvez utiliser Sass/Compass de manière traditionnelle, toute la
+configuration de l’environnement est centralisé dans le ficher `config.rb`.
+Un fichier de configuration près à l’emploi est disponible dans `.gsk/conf`
+
+Pour compiler les styles du projet vers l'environnement de développement,
+exécuter simplement la commande suivante :
+
+```bash
+$ gulp css
+```
+
+Ou bien pour une compilation standalone:
+
+```bash
+$ bundle exec compass compile
+```
+
+Pour compiler les styles du projet vers l’environnement de production il suffit
+de rajouter le paramètre adéquat :
+
+```bash
+$ gulp css --optimize
+```
+
+Ou bien en standalone
+
+```bash
+$ bundle exec compass compile -e production
+```
+
+
+Configuration avancée
+-------------------------------------------------------------------------------
+
+### Installer un module via NPM (à préférer autant que possible)
+
+Exemple avec sass-mq:
+
+Installer le module NPM `npm install sass-mq --save`
+
+Puis importez le module dans vos scss `@import 'sass-mq/mq';`.
+
+### Installer un module via bundler
+
+Exemple avec Sass-globing :
+
+Ajouter cette ligne au fichier Gemfile `gem 'sass-globbing'`
+
+Lancer un `bundle install` en ligne de commande pour que ce nouveau module soit bien installé.
+
+Puis ajouter la ligne suivante `require 'sass-globbing'` dans le fichier `config.rb`.
+
+Si votre gem expose des mixins vous devez l’importer dans votre css comme dans cet exemple avec bourbon `@import 'bourbon';`.
+
diff --git a/.gsk/docs/css/sass.md b/.gsk/docs/css/sass.md
@@ -1,9 +1,8 @@
 
-Sass & Compass
+Sass (node-sass)
 ===============================================================================
 
-Pour tous nos projets, nous utilisons [Sass](http://sass-lang.com) et
-[Compass](http://compass-style.org) par défaut.
+Default css engine.
 
 Configuration:
 ```json
@@ -14,91 +13,30 @@ Configuration:
 }
 ```
 
-Vérifier votre environnement
+Add a Sass module
 -------------------------------------------------------------------------------
 
-Sass repose sur [Ruby](https://www.ruby-lang.org/fr/), assurez-vous que vous
-l'avez bien installé sur votre environnement.
-
-Il est également nécessaire d'installer l'utilitaire
-[Bundler](http://bundler.io/) dans votre environnement global (cela permet
-d'avoir plusieurs versions de Sass en fonction de chaque projets).
-
-Si ce n'est pas déjà le cas, exécutez simplement la commande suivante :
-
+Install it as dependency with npm:
 ```bash
-$ sudo gem install bundler
+npm install sass-moduleName --save
 ```
 
-Puis, pour être sûr que vous disposer de la dernière version de Sass et Compass
-pour le projet sur lequel vous travaillez, exécutez la commande suivante :
-
-```bash
-$ bundle install --path .gems
-```
-
-En cas de problème de compilation Sass sur un projet existant commencez
-toujours par exécuter la commande suivante:
-
-```bash
-$ bundle update
-```
-
-
-Configuration standard
--------------------------------------------------------------------------------
-
-Vous pouvez utiliser Sass/Compass de manière traditionnelle, toute la
-configuration de l'environnement est centralisé dans le ficher `config.rb`.
-Un fichier de configuration près à l'emploie est disponible dans `.gsk/conf`
-
-Pour compiler les styles du projet vers l'environnement de développement,
-exécuter simplement la commande suivante :
-
-```bash
-$ gulp css
+And import the module in your scss:
+```scss
+@import 'moduleName';
 ```
 
-Ou bien pour une compilation standalone:
 
-```bash
-$ bundle exec compass compile
-```
-
-Pour compiler les styles du projet vers l'environnement de production il suffit
-de rajouter le paramètre adéquat :
+### Normalize example
 
+Install it as dependency with npm:
 ```bash
-$ gulp css --optimize
+npm install normalize-scss --save
 ```
 
-Ou bien en standalone
-
-```bash
-$ bundle exec compass compile -e production
+And import the module in your scss:
+```scss
+@import 'normalize.scss/normalize';
 ```
 
 
-Configuration avancée
--------------------------------------------------------------------------------
-
-### Installer un module via NPM (à préférer autant que possible)
-
-Exemple avec sass-mq:
-
-Installer le module NPM `npm install sass-mq --save`
-
-Puis importez le modules dans vos scss `@import 'sass-mq/mq';`.
-
-### Installer un module via bundler
-
-Exemple avec Sass-globing :
-
-Ajouter cette ligne au fichier Gemfile `gem 'sass-globbing'`
-
-Lancer un `bundle install` en ligne de comande pour que ce nouveau module soit bien installé.
-
-Puis ajouter la ligne suivante `require 'sass-globbing'` dans le fichier `config.rb`.
-
-Si votre gem expose des mixins vous devez l’importer dans votre css comme dans cet exemple avec bourbon `@import 'bourbon';`.
-