automatisez vos tâches répétitives avec grunt (blend 2013)

Automatisez vos tâches répétitives avec

Corinne Schillinger BLEND WEB MIX 2013

Corinne Schillinger@schillinger

Pré-requis

v0.8.0 min

grunt-cli

$ npm install -g grunt-cli

en mode admin

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.

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"}

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

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

Installer Grunt et ses plugins

Tous les plugins sont téléchargés et installés dans le dossier node_modules.

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.

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.

La fonction globale

module.exports = function(grunt) { // Code Grunt};

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.

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.

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.

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.

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.

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']}

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' ] } }}

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.

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' }}

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' }}

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 %>'] } }}

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' }] }}

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

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

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 :

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.

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

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

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

Merci !des questions ?

Corinne Schillinger @schillinger

BLEND WEB MIX 2013