Grunt : introduction Qu'est-ce que Grunt ?

Présentation au sujet: "Grunt : introduction Qu'est-ce que Grunt ?"— Transcription de la présentation:

1 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.

2 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

3 Grunt : installation Via npm (donc il faut installer NodeJS avant)
curl --silent --location | 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

4 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

5 Gruntfile.js : fonction englobante
(function () { 'use strict'; module.exports = function (grunt) { // all your code } }());

6 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' } });

7 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']);

8 Cas du plugin « watch » Plugin contrib, essentiel si on compile souvent. // 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'] }

9 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