Prendre en main Gulp.js

À l’instar de Grunt, Gulp est un automatiseur de tâches fonctionnant sous Node.js. Le choix de l’un ou de l’autre, est une question de préférences ou de modules nécessaires qui sont ou pas à disposition, mais cela est nullement une question qualitative, les deux permettent de réaliser plus ou moins les mêmes opérations en terme de gestion de flux de travail. Le plus simple reste de se rapprocher d’articles dédiés comme Gulp vs Grunt – Comparing Both Automation Tools ou Grunt vs Gulp: Battle of the Build Tools et faites vous votre propre opinion. En ce qui me concerne, j’utilise aussi bien l’un que l’autre.

Avant d’aller plus loin, assurons nous que Node.js soit bien installé. Dorénavant tout va se passer en ligne de commande, donc si vous êtes sous Mac lancez le Terminal (Applications > Utilities > Terminal), et si vous êtes sous Windows ouvrez soit l’invite de commande (Windows + R > cmd) soit PowerShell (Windows + R > PowerShell). Si vous n’avez jamais utilisé Node, je vous invite à vous rapprocher de l’article Prendre en main Node.js.

Installer Gulp

Nous pourrions presque suivre le mode opératoire d’installation de Grunt tant les deux sont similaires, voir Prendre en main Grunt, nous allons donc réduire à l’essentiel cette étape.

Première vérification, assurons nous que Gulp ne soit pas déjà installé sur la machine, rapprochons nous de l’invite de commande et saisissons l’instruction gulp -v. Si rien n’est retourné parfait Gulp n’est pas présent, sinon et si à plus forte raison si la version installée est trop vielle, il vaut mieux la désinstaller npm rm --global gulp et opter pour une version CLI (Command Line Interface) de Gulp. En optant pour une version CLI, cela nous assurera de toujours installer une version plus récente pour chacun de nos projets.

npm install --global gulp-cli

Un rapide contrôle depuis la console, nous permet de vérifier la version installée, et comme on peut le constater, seul CLI est installé et pas Gulp. Quoique c’est un peu normal car cela est ce qui a été demandé. Cela veut donc dire que pour chaque projet il faudra installer Gulp, en local. Donc créons rapidement un pseudo projet et installons Gulp, puis vérifions alors la version de Gulp installée. (Attention, pour des raisons de lisibilité, les informations inutiles ont été retirées de la console).

Lors de l’écriture de cet article, on constate que la version en cours de Gulp était la version 3.9.1. Si vous le souhaitez vous pouvez trouver une version plus récente, la version 4.0, en vous rendant sur le github de Gulp: https://github.com/gulpjs/gulp ou plus précisément sur https://github.com/gulpjs/gulp/tree/4.0.

Prendre en main Gulp

Voilà Gulp est prêt et pour l’utiliser il ne reste qu’à mettre en place un projet Node.js avec son classique package.json et y déployer Gulp.

Retirer le dossier précédemment créer et mettons en place un dossier projet en partant d’une base vide, nommons le, Projet-Gulp, puis plaçons le pointer de l’invite de commande sur ce dossier, et initialisons le depuis NPM avec npm init -y. Cette opération aura permis de créer le fameux fichier package.json, qui va nous être en partie utile afin d’y sauver les dépendances et notamment celle de Gulp. D’ailleurs procédons à l’installation de Gulp pour ce projet.

npm install gulp --save-dev

Une fois Gulp disponible, nous allons l’invoquer au travers d’un fichier gulpfile.js qui va nous permettre de définir et assembler les diverses tâches.

Créons à la racine du projet, un fichier gulpfile.js et ouvrons dans un éditeur de code. La première information a porter est la référence au module gulp et ensuite nous pouvons commencer à définir les taches à réaliser. Nous pouvons utiliser n’importe quel nom pour assigner notre tâche, et il peut y avoir autant de tâches que nécessaire pour notre projet. Le nom de tâche default sera invoquée par défaut si aucune tâche n’est précisée dans la ligne de commande.

var gulp = require('gulp');

gulp.task('default', function() {
  console.log("Tâche par défaut");
});
gulp.task('un', function() {
  console.log("Tâche Un");
});

Starting, Finished ?

Si vous regardez la capture de la console ci-dessus, vous constaterez qu’autour de chaque exécution de tâche, Gulp renvoie respectivement une instruction Starting 'tache'... et Finished 'tache' after. Ces deux informations sont très utiles lors du travail de débogage pour voir où commencent et où finissent les tâches lorsque celles ci sont multiples. Alors comment exécuter plusieurs tâches?

Avant de voir comment, essayons de voir pourquoi et dans quel but? Et bien, bien souvent, les tâches sont réduites à une simple action, comme nettoyer une série de fichier, ou minifier une série de fichier, ou encore concaténer cette série de fichiers. Il peut donc être intéressant de coupler plusieurs de ces tâches au sein d’une tâche unique qui consisterait donc à nettoyer, puis minifier et enfin concaténer une série de fichiers.

Certaines tâches, comme les exemples cités précédemment, se doivent d’être exécutées obligatoirement les unes après les autres, mais on peut facilement envisager que parfois certaines tâches puissent être exécutées en simultané. Actuellement avec une version 3.9.1 de Gulp seules des tâches successives peuvent être mises en place, en les passant sous forme de tableau (array), avec la version 4.0, deux nouvelles propriétés sont apparues, series() et parallel() :

3.9.1
gulp.task('complet', ['default','autre-tache']);
et en 4.0
gulp.task('complet-parrallele', gulp.series('default', 'autre-tache'));
gulp.task('complet-parrallele', gulp.parallel('default', 'autre-tache'));

Sinon, en attendant la version 4.0, il faut passer par le plugin run-sequence qui permet de définir aussi bien des tâches exécutées en série qu’en parallèle. Pour le suivre mettons en place le plugin en l’installant depuis NPM. Ajoutons ensuite quelques tâches à notre fichier gulpfile.js, ainsi que les deux tâches, serie et sequence, qui utiliseront respectivement le cumul de tâches en série (opération native à Gulp) et l’usage d’une séquence (propre au plugin run-sequence).

Dernier détail, vous pouvez cependant omettre les informations de traitements renvoyées par Gulp en le spécifiant par le paramètre –silence.

Un autre paramètre intéressant va

Trouver et utiliser des plugins

En vous rendant soit sur le site gulp.js dans la rubrique plugins, ou sur le site npmjs.com, vous pouvez rechercher l’ensemble des plugins disponibles pour Gulp. Attention les deux catalogues ne sont pas forcement identiques. Faites l’expérience en recherchant par exemple php-minify, sur le site gulpjs vous obtiendrez trois résultats, alors que npmjs n’en renvoie qu’un.