User Tools

Site Tools


flux:web-basic00

Description

  • 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é
    • HTMLHTML 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.

structure

/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

installations

Ruby

OSX

Déja installé.

Linux (debian-based)

apt-get install ruby

SASS

sudo gem install sass

ATOM

OS X

→ .dmg

Linux (debian-based)

→ .deb ?

JSCS

Dans le terminal :

apm install linter-jscs

Nodejs

OSX

.pkg ?

Linux (Debian-base)

?



initialisation NPM

npm init

Grunt

installation globale de Grunt (Commande-Line Interface)

npm install -g grunt-cli

dev : installation des plugins

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

dev : documentation des plugins

fichiers de configuration

.jscrc

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

.gitignore

package.json



gruntfile.js

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']);
};
flux/web-basic00.txt · Last modified: 2016/04/03 23:38 by leo