• Flux de travail SCSS + JS + HTML
• Automatisation via Grunt
  • linting/hinting/validation
    • HTML validation : grunt-html-angular-validate
    • CSS
    • JS
  • process/compression
  • SASS (SCSS) → CSS (style.uncompressed.css)→ CSS compressé (style.css)
  • JS → JS compilé (Google Closure) et compressé
  • HTML → HTML Compressé ()
• Éditeur ATOM avec JSCS (le profil est a déterminer, le profil airbnb est ES6 même s'il existe une version du styleguide pour ES5.

/site // version de production compressée
  .jscsrc (JSCS config file)
  .gitignore (GIT ignore config file)
  package.json
  *.html
  /a (assets)
    j.js // fichier js concaténé + compressé
    c.css // css compressé
  /i (img)
/src
  /scss
  /js
  /html
  /build // fichiers CSS générés depuis SCSS et les js concatenés + HTML
    *.html
    /a (assets)
      j.js
      c.css

Déja installé.

apt-get install ruby

sudo gem install sass

→ .dmg

→ .deb ?

Dans le terminal :

apm install linter-jscs

.pkg ?

?

npm init

npm install -g grunt-cli

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev 

• grunt-contrib-concat
• grunt-contrib-sass
• grunt-contrib-watch

{
    "preset": "airbnb",
    "requireCamelCaseOrUpperCaseIdentifiers": null
}

.DS_Store
node_modules
.tmp
site
.sass-cache

+ https://github.com/gruntjs/grunt/blob/master/.gitignore ?

+ https://github.com/github/gitignore/blob/master/Sass.gitignore

+ https://github.com/github/gitignore/blob/master/Node.gitignore

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      dist: {
        src: ['src/js/*/*.js', 'src/js/*.js'],
        dest: 'site/a/j.js',
      },
    },
    sass: {
      dist: {
        options: {
          style: 'expanded',
        },
        files: {
          'site/a/c.css': 'src/scss/style.scss',
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-sass');

  grunt.registerTask('default', ['concat:dist', 'sass:dist']);
};