gvsg

Dernier article pour cette série sur Node, j'ai décidé de vous faire un topo sur les Tasks runners !

Le sujet est assez vaste et les avis sont tranchés, donc plutôt que de vous faire un article sur une techno, j'ai décidé d'aborder ce sujet avec un "versus" entre les deux Tasks runners du moment, Grunt et Gulp.

 

Introduction

Un Tasks runner est par définition un outil qui permet d'automatiser les tâches répétitives. C'est une solution simple et agréable dans un certains nombres de cas (Unit Test, Build, Obfuscation). L'intérêt est de gagner du temps pour résoudre certaines tâches lors du développement. C'est le genre d'outil qui est particulièrement intéressant dans le cadre de l'industrialisation de vos applications.

Aujourd'hui vous allez découvrir deux technologies qui permettent la mise en place de tâches, Grunt et Gulp. Il en existe bien d'autre (Cake, Broccoli...) mais ces deux là sont clairement les plus en vues actuellement.

 

Installation

Grunt et Gulp fonctionnent sous Node.js. Il vous faut donc installer Node avant de pouvoir les utiliser car il se présente sous la forme d'une CLI (Command line interface). Une fois Node installé, ouvrez un terminal et tapez les deux commandes suivantes :

npm install grunt -g
npm install gulp -g

Comme je l'ai déjà expliqué dans mes articles sur Sails.js et Bower, l'utilisation de l'argument -g dans la commande permet d'installer le package globalement et donc de pouvoir l'utiliser partout.

Il est temps de mettre en place le projet d'exemple. Pour se faire, nous allons étudier un cas récurent et très simple : La minifiction de fichiers CSS. Créez vous un répertoire pour votre projet puis ajoutez les deux fichiers CSS suivant : css1, css2

Ensuite via votre terminal, mettez vous à la racine du projet et tapez les commandes suivantes :

npm init

Cette première commande va vous permettre de définir le fichier package.json de base. Installez ensuite les deux packages via :

npm install gulp --save-dev
npm install grunt --save-dev

Les deux packages sont installés localement dans le projet et les dépendances sont mises dans la partie développement (il est inutile de faire ce genre d'opération en Production ! :-)).

 

Grunt

Grunt est le plus populaire des Tasks Runners. Historiquement c'est l'un des plus anciens et il dispose d'un nombre de modules important pour résoudre les problématiques.

Commencez par ajouter un fichier Gruntfile.js à votre projet. C'est dans ce fichier que l'on va définir les tâches à réaliser. Il existe déjà un module prêt à l'emploi pour résoudre la problématique, tapez la commandes suivante pour l'ajouter aux dépendances de développement :

npm install grunt-contrib-cssmin --save-dev

Pour réaliser la tâche, ajoutez le code suivant dans le fichier Gruntfile.js :

module.exports = function(grunt) {

    //configuration des tâches
    grunt.initConfig({
        //minifiction CSS
        cssmin: {
            //combine tout les fichiers css sauf les min !
            combine: {
                files: {
                    'global.min.css': ['*.css', '!*.min.css']
                }
            }
        }
    });

    //chargement du module cssmin
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    //enregistrement de la tâche
    grunt.registerTask('default', ['cssmin']);
};

Cette tâche va à l'essentiel en effectuant la combinaison des fichiers css et leur minifiction. Tapez la commande suivante dans votre terminal pour lancer la tâche :

grunt

Vous devriez avoir un fichier global.min.css contenant :

a{color:#000;text-decoration:none}a :hover{color:#00f;text-decoration:underline}

La minifiction a mis l'ensemble du code sur une ligne, a supprimé les commentaires inutiles , a remplacé les noms de couleur par leur équivalent en hexadécimal et enfin elle a fusionné les deux fichiers en un. Job's done !

Comme vous avez pu le voir, Grunt est relativement simple à utiliser bien que l'écriture de tâche ne soit pas très directe.

Gulp

Gulp résout les problématiques de manière similaire à Grunt. Bien que ce soit une techno relativement jeune, Gulp dispose déjà de plusieurs plugins pour réaliser les tâches les plus courrantes.

La grosse différence avec Grunt c'est que Gulp utilise les Streams pour chainer les tâches plutôt que les Fichiers comme dans Grunt. Le premier point positif de cette approche c'est les performances. Ensuite cela a permis à Gulp de disposer d'un système de pipes. En gros le résultat de chaque opération effectuée dans un pipe est directement utilisable par le suivant. Ce style d'écriture donne un code fluide et compact. Personnellement je considère que la notion de pipe dans Glup c'est la philosophie du Fluent, et c'est très appréciable (Fluent : http://fr.wikipedia.org/wiki/Désignation_chaînée) !

Pour revenir à notre exemple sur la minifiction de CSS,  commencez par ajouter un fichier Gulpfile.js à votre projet. Tout comme avec Grunt, c'est dans ce fichier que l'on va définir les tâches à réaliser. Gulp étant relativement jeune il est encore difficile de trouver des plugins fiables. J'ai pris le partie d'utiliser gulp-contact et gulp-minify-css car ces deux packages sont suivis par plusieurs développeurs et reposent sur des API ayant déjà fait leurs preuves (clean-css notamment)

Dans votre terminal tapez la commande suivante pour récupérer les dépendances de développement (je vous offre le raccourci maintenant que vous connaissez un peu mieux node :-)):

npm i gulp-minify-css gulp-concat -D

Dans le fichier Gulpfile.js, ajoutez la définition de tâche suivante :

//import des packages
var gulp = require('gulp');
var concat = require('gulp-concat');
var minify = require('gulp-minify-css');

//définition de la tâche
gulp.task('minify', function () {
    //les sources que l'ont va utiliser
    gulp.src(['./*.css', '!./*.min.css'])
        //concatènation
        .pipe(concat('global.min.css'))
        //minifiction
        .pipe(minify())
        //path pour enregistrer le résultat
        .pipe(gulp.dest('./'))

});

gulp.task('default', ['minify']);

Une fois la tâche définit tapez dans le terminal :

gulp

La minifiction est similaire à ce que l'on a obtenu avec Grunt. Job's done !

Gulp est vraiment très sympa niveau code car le système de pipes évite la redondance de code et la verbosité !

 

Conclusion

Comme nous avons pu le voir dans ce billet, les Tasks runners répondent parfaitement aux problématiques d'industrialisation des ressources Front d'un projet Web.

Entre Gulp et Grunt le choix n'est pas aisé car les deux sont au final assez similaires pour du développement. D'un côté on a le système de pipes de Gulp qui fait des merveilles et de l'autre la maturité de Grunt et ses centaines de modules disponibles. Au final peu importe le choix que vous ferez le principale est d'utiliser les Tasks runners pour vous simplifier la vie !

Catégories : Javascript

1 commentaire

DCube · 5 septembre 2014 à 16 h 48 min

[…] et grunt je vous renvoi vers les articles publiés précédemment sur le blog de Dcube (bower et grunt). Lors de la création de votre application, yeoman vous créer les fichiers de configuration pour […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *