Grunt : introduction Qu'est-ce que Grunt ? Un phacochère automatiseur de tâches Qu'est-ce qu'on peut faire avec ? Tout. En gros. Et plus vite qu'à la main.
Grunt : exemples Compiler (CSS, JS, HTML) Copier des fichiers Générer des sprites Appliquer des modifications sur des fichiers Valider du CSS, du JS Et ceci, soit à la demande, soit à la volée
Grunt : installation Via npm (donc il faut installer NodeJS avant) curl --silent --location https://deb.nodesource.com/setup_4.x | sudo bash - sudo apt-get install --yes nodejs sudo npm install -g grunt-cli Puis les plugins s'installent de la même manière sudo npm install <package> --save-dev
Grunt : configuration Gruntfile.js : c'est du JavaScript ! La fonction englobante (n'oubliez pas 'use strict';) Configuration du projet et des tâches Chargement des plugins et des tâches
Gruntfile.js : fonction englobante (function () { 'use strict'; module.exports = function (grunt) { // all your code } }());
Gruntfile.js : configuration du projet et des tâches Exemple du plugin grunt-sass require('load-grunt-tasks')(grunt); grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'assets/css/style.css': 'assets/scss/style.scss' } });
Gruntfile.js : chargement des plugins et des tâches grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-scss-lint'); grunt.registerTask('default', ['watch:compile']); grunt.registerTask('validate', ['watch:validate']);
Cas du plugin « watch » Plugin contrib, essentiel si on compile souvent. // https://github.com/gruntjs/grunt-contrib-watch watch: { compile: { files: ['assets/**/*.scss'], // watch *.scss files in assets and sub-folders... tasks: ['sass', 'postcss'] // ... and launch tasks "sass" and "postcss" if one is modified }, validate: { tasks: ['scsslint'] }
Exemple Une page avec du html simple du CSS compilé via SCSS SCSS validé avec scss-lint CSS augmenté par PostCSS (fallbacks de rem, préfixes, minification) des sprites SVG et PNG