automatisez vos tâches répétitives avec grunt (blend 2013)
DESCRIPTION
Cette présentation vous propose de découvrir les possibilités offertes par Grunt, et de voir comment automatiser certaines tâches telles que la compilation des feuilles de styles, la concaténation et minification des fichiers JavaScript ou encore l'optimisation des images.TRANSCRIPT
![Page 1: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/1.jpg)
Automatisez vos tâches répétitives avec
Corinne Schillinger BLEND WEB MIX 2013
![Page 2: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/2.jpg)
Corinne Schillinger@schillinger
![Page 3: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/3.jpg)
Pré-requis
v0.8.0 min
grunt-cli
$ npm install -g grunt-cli
en mode admin
![Page 4: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/4.jpg)
Démarrer un nouveau projet
Pour fonctionner Grunt a besoin de 2 fichiers
• package.json : liste les dépendances nécessaires à l’exécution des différentes tâches.
• gruntfile.js (ou gruntfile.coffee) : charge les plugins et configure les tâches à exécuter.
![Page 5: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/5.jpg)
Il se place à la racine du projet.
Créer package.json
Il doit obligatoirement renseigner le nom et le numéro de version du projet.
{ "name": "Blend", "version": "0.0.1"}
![Page 6: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/6.jpg)
Installer Grunt et ses plugins
$ npm install <plugin> --save-dev
• <plugin> est le nom du plugin à installer.
• --save-dev actualise automatiquement la liste des dépendances.
Les plugins disponibles sont recensés sur : http://gruntjs.com/plugins
exécuté à la racine du projet
![Page 7: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/7.jpg)
Installer Grunt et ses plugins
// Grunt$ npm install grunt --save-dev// Valide la syntaxe CSS avec CSSLint$ npm install grunt-contrib-csslint --save-dev// Concatène et minifie les fichiers CSS$ npm install grunt-contrib-cssmin --save-dev// Valide la syntaxe JS avec JSHint$ npm install grunt-contrib-jshint --save-dev// Concatène les fichiers JS$ npm install grunt-contrib-concat --save-dev// Minifie les fichiers JS avec UglifyJS$ npm install grunt-contrib-uglify --save-dev// Optimise les images (.gif, .jpg, .png)$ npm install grunt-contrib-imagemin --save-dev
![Page 8: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/8.jpg)
Installer Grunt et ses plugins
Tous les plugins sont téléchargés et installés dans le dossier node_modules.
![Page 9: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/9.jpg)
Installer Grunt et ses plugins
{ "name": "Blend", "version": "0.0.1", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-csslint": "~0.1.2", "grunt-contrib-cssmin": "~0.6.1", "grunt-contrib-jshint": "~0.6.4", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.4", "grunt-contrib-imagemin": "~0.3.0" }}
Et la liste des dépendances est mise à jour.
![Page 10: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/10.jpg)
Créer gruntfile.js
Il est composé de 4 parties distinctes :
1. La configuration du projet ;
2. La configuration des tâches ;
3. Le chargement des plugins ;
4. Et l'exécution des tâches.
Il se place à la racine du projet.
![Page 11: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/11.jpg)
La fonction globale
module.exports = function(grunt) { // Code Grunt};
![Page 12: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/12.jpg)
La configuration du projet
module.exports = function(grunt) { grunt.initConfig({ // Configuration du projet et des tâches });};
La méthode d'initialisation grunt.initConfig() abrite les paramètres de configuration.
![Page 13: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/13.jpg)
La configuration du projet
module.exports = function(grunt) { grunt.initConfig({ // Import des données du projet pkg: grunt.file.readJSON('package.json') });};
Les données projet et la liste des dépendances sont importées dans la configuration de grunt.
![Page 14: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/14.jpg)
La configuration des tâches
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), csslint: { // Configuration de la tâche csslint }, cssmin: { // Configuration de la tâche cssmin }});
Les données de configuration d'une tâche sont contenues dans une propriété du même nom.
![Page 15: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/15.jpg)
La configuration des tâches
csslint: { options: { // Options de la tâche qui écrasent celles par défaut. },},cssmin: { options: { // Options de la tâche qui écrasent celles par défaut. },}
Chaque tâche est dotée d’une propriété options
qui permet de surcharger les options par défaut.
![Page 16: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/16.jpg)
csslint
Les options du plugin correspondent aux règles de CSSLint (il faut donc s'y reporter pour en connaître la signification).
Par défaut, toutes les règles retournent des avertissements. Pour chaque option, il est possible d'utiliser la valeur false pour ignorer la règle ou 2 pour renvoyer une erreur.
![Page 17: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/17.jpg)
csslinthttps://github.com/gruntjs/grunt-contrib-csslint
csslint: { // Surcharge des options par défaut options: { 'adjoining-classes': false, 'empty-rules': 2, // Génération automatique d’un rapport XML formatters: [{ id: 'csslint-xml', dest: 'report/csslint.xml' }] }, // Fichiers à vérifier src: ['www/css/*.css']}
![Page 18: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/18.jpg)
cssminhttps://github.com/gruntjs/grunt-contrib-mincss
cssmin: { combine: { files: { // Fichier de destination 'www/css/style.css': // Fichiers à concaténer ['www/css/normalize.css', 'www/css/typography.css', 'www/css/layout.css', 'www/css/element.css', 'www/css/js.css', 'www/css/ie.css' ] } }}
![Page 19: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/19.jpg)
jshint
Les options du plugin correspondent aux règles de JSHint (il faut donc s'y reporter pour en connaître la signification).
Par défaut, toutes les règles retournent des avertissements. Pour chaque option, il est possible d'utiliser la valeur false pour ignorer la règle ou 2 pour renvoyer une erreur.
![Page 20: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/20.jpg)
jshinthttps://github.com/gruntjs/grunt-contrib-jshint
jshint: { // Fichiers à vérifier files: ['gruntfile.js', 'www/js/*.js'], // Surcharge des options par défaut options: { eqeqeq: true, es3: true, indent: 2, undef: true, globals: { jQuery: true }, // Génération automatique d’un rapport XML reporter: 'jslint', reporterOutput: 'report/jshint.xml' }}
![Page 21: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/21.jpg)
concathttps://github.com/gruntjs/grunt-contrib-concat
concat: { options: { // Caractère à utiliser pour séparer les fichiers concaténés separator: ';' }, dist: { // Fichiers à concaténer src: ['www/js/library.js', 'www/js/behaviour.js'], // Fichier de destination dest: 'www/js/script.js' }}
![Page 22: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/22.jpg)
uglifyhttps://github.com/gruntjs/grunt-contrib-uglify
uglify: { options: { // La date et le nom des fichiers minifiés sont insérés en commentaire en début de fichier banner: '/* <%= grunt.template.today("dd-mm-yyyy, HH:MM") %> \n <%= concat.dist.src %> */\n' }, dist: { files: { // Fichier de destination 'www/js/script.min.js': // Fichier minifié ['<%= concat.dist.dest %>'] } }}
![Page 23: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/23.jpg)
imageminhttps://github.com/gruntjs/grunt-contrib-imagemin
imagemin: { dynamic: { files: [{ // Mode de ciblage dynamique expand: true, // Dossier contenant les sources cwd: 'www/img/', // Fichiers à prendre en compte src: ['*.{png,jpg,gif}'], // Dossier de destination dest: 'www/img' }] }}
![Page 24: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/24.jpg)
Le chargement des plugins
grunt.initConfig({ …});
grunt.loadNpmTasks('grunt-contrib-csslint');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-imagemin');
![Page 25: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/25.jpg)
L’exécution des tâches
// Tâche par défautgrunt.registerTask('default', ['csslint', 'cssmin', 'jshint', 'concat', 'uglify', 'imagemin']);
$ grunt
Elles sont exécutées grâce à la commande :
exécuté à la racine du projet
![Page 26: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/26.jpg)
L’exécution des tâches
// Tâche personnalisée pour le développementgrunt.registerTask('dev', ['csslint', 'cssmin', 'jshint', 'concat', 'uglify']);
// Tâche personnalisée pour la mise en productiongrunt.registerTask('prod', ['imagemin']);
$ grunt dev$ grunt prod
Elles sont exécutées grâce aux commandes :
![Page 27: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/27.jpg)
Forcer l’exécution des tâches
$ grunt dev --force
Lorsque des avertissements sont renvoyés par csslint ou jshint, l’exécution du processus global s’arrête. Pour passer outre et forcer l’exécution de toutes les tâches sans tenir compte des avertissements, il faut passer l’option --force.
![Page 28: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/28.jpg)
Surveiller les fichiershttps://github.com/gruntjs/grunt-contrib-watch
// Permet d’exécuter des tâches prédéfinies si les fichiers surveillés sont ajoutés, modifiés ou supprimés.$ npm install grunt-contrib-watch --save-dev
Installation du plugin
![Page 29: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/29.jpg)
Surveiller les fichiershttps://github.com/gruntjs/grunt-contrib-watch
watch: { // Fichiers à surveiller files: ['www/js/library.js', 'www/js/behaviour.js', 'www/css/normalize.css', 'www/css/typography.css', 'www/css/layout.css', 'www/css/element.css', 'www/css/js.css', 'www/css/ie.css'], // Tâche à exécuter tasks: ['csslint', 'cssmin', 'jshint', 'concat']}
Définition de la tâche
![Page 30: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/30.jpg)
Surveiller les fichiershttps://github.com/gruntjs/grunt-contrib-watch
grunt.loadNpmTasks('grunt-contrib-watch');
Chargement du plugin
grunt.registerTask('dev', ['csslint', 'cssmin', 'jshint', 'concat', 'watch']);
Exécution de la tâche
![Page 31: Automatisez vos tâches répétitives avec Grunt (Blend 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052411/55702d23d8b42aa8558b536f/html5/thumbnails/31.jpg)
Merci !des questions ?
Corinne Schillinger @schillinger
BLEND WEB MIX 2013