02. Initiation à gulp pour ameliorer son processus de développement

Dans cette leçon vous vous initierez au rudiment de Gulp, un outil simple mais qui peut faire gagner énormément de temps en réalisant automatiquement les tâches redondantes liées à la réalisation d’un projet front.

Préambule

Il existe plusieurs outils pour automatiser les tâches répétitives du développeur front. Tâches qui peuvent être variées en fonction du projet. On peut citer comme exemple la minification des JavaScript et CSS, l’exécution automatique des tests unitaires, la compilation du SASS, etc.

J’en citerai 3, actuellement très en vogue. Gulp et Grunt qui s’ils fonctionnent différemment dans le fond, sont dans la forme, exactement le même type d’outil, à savoir des exécuteurs de tâches ordonnées. Et Webpack qui est un outil de packaging puissant qui, associé à NPM peut réaliser la plupart des tâches que peuvent faire Gulp et Grunt. Nous en reparlerons dans une autre leçon.

Installation de Gulp

Gulp est un outil qui fonctionne avec NPM, pour ceux qui ne connaissent pas, je vous conseille donc de regarder la leçon sur les bases de NPM. Nous repartirons d’ailleurs de ce projet pour travailler avec Gulp.

Gulp est un outil NPM en ligne de commande qui peut s’installer de manière globale ou locale. Afin de simplifier le travail en équipe et d’éviter toute incompatibilité entre les projets, j’ai pris l’habitude de l’utiliser en local.

Reprenons donc notre projet initié avec NPM qui contient seulement un fichier index.html et 2 dépendances pour y installer gulp :

$> npm install gulp –save-dev

Comme nous travaillons en mode local, nous allons l’ajouter dans la section script du package.json. Ce qui donne :

{
  "name": "mon-nouveau-projet",
  "version": "1.0.0",
  "description": "Un nouveau projet pour tester NPM",
  "main": "index.html",
  "scripts": {
    "server": "lite-server",
    "gulp": "gulp",
    "start": "npm run server"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "lite-server": "^2.2.2",
    "gulp": "^3.9.1"
  }
}

Ensuite, pour fonctionner, Gulp à besoin d’un fichier de configuration qui sera utilisé pour décrire les tâches à réaliser. Ce fichier s’appelle gulpfile.js et est placé à la racine du projet. Dans ce fichier javascript, nous pouvons écrire du javascript (interprété par NodeJS) et accéder à l’API Gulp qui fournit plusieurs méthodes :

Ci-dessous vous trouverez l’exemple le plus basique. A la première ligne, nous importons gulp, puis une tâche qui s’appelle default qui écrit juste un message dans la console.

var gulp = require('gulp');

gulp.task('default', function () {
    return console.log('mon premier script');
});

Ensuite, pour appeler une tâche, il suffit d’utiliser la commande gulp avec le nom de la tâche:

$> npm run gulp default

Vous devriez alors voir dans la console s'afficher le texte "mon premier script".

La tâche nommée default est appellée par gulp si aucun nom est passé en paramètre. On peut donc aussi lancer notre tâche avec:

$> npm run gulp

Hiérarchies des tâches

Il est bien évidemment possible de définir plusieurs tâches dépendantes les unes des autres qui s’exécuteront dans un ordre précis. Pour qu’une tâche s’exécute avant une autre, il faut passer en deuxième paramètre de la fonction task un tableau contenant le ou les noms des tâches à exécuter avant. Les tâches de ce tableau seront, par contre, réalisées en même temps. Prenons l’exemple suivant :

var gulp = require('gulp');

gulp.task('un:formater', function () {
    return console.log('1er:formater');
});

gulp.task('un:concatener', function () {
    return console.log('1er:concatener');
});

gulp.task('deux', ['un:formater', 'un:concatener'], function () {
    return console.log('2e:tester');
});

gulp.task('default', ['deux'], function () {
    return console.log('terminé');
});

Nous donnera comme résultat dans la console:

$> 1er:formater
$> 1er:concatener
$> 2e:tester
$> terminé

Plugins

Maintenant que nous avons compris le fonctionnement, il va falloir réaliser quelque chose de plus concret. Pour cela, il faut aller piocher dans la multitude de plugins qui se greffent à gulp pour réaliser ce que l’on souhaite. La plupart de ces plugins commencent par gulp- puis le nom des plugins.

Concaténation de CSS

Pour ce premier test, nous allons concaténer des fichiers CSS en un seul. Pour cela, nous allons dans un premier temps, créer un répertoire CSS et y placer au moins deux fichiers CSS. Puis, nous installerons le plugin permettant de concaténer des CSS gulp-concat-css

$> npm install --save-dev gulp-concat-css

Nous allons placer le résultat dans un répertoire build grâce à la tâche css:concat ci-après:

var gulp = require('gulp'), // import du moteur gulp
    concat = require('gulp-concat-css'); // import du plugin de concatéation

gulp.task('css:concat', function () {
    return gulp.src('css/*.css') // sélection des fichier source
           .pipe(concat('app.css')) // utilisation du plugin 'gulp-concat-css' pour concaténer
           .pipe(gulp.dest('build')); // dépôt du résultat dans le répertoire build
});

gulp.task('default', ['css:concat'], function () {
    return console.log('terminé');
});

La description est présente dans les commentaires. Ce qu'il faut retenir, c’est qu’il convient de commencer par importer le plugin, puis en général on sélectionne des fichiers sur lesquels travailler avec src(). On appelle un ou plusieurs plugins avec pipe() puis on place le résultat dans un répertoire avec dest().

Minification de CSS

Nous allons insérer dans notre flux une deuxième action qui après la concaténation, minimifira le CSS par l’intermédiaire du plugin gulp-clean-css.

$> npm install --save-dev gulp-clean-css

Ce qui donne dans notre fichier de configuration:

var gulp = require('gulp'), // import du moteur gulp
    concat = require('gulp-concat-css'), // import du plugin de concaténation
    clean = require('gulp-clean-css'); // import du plugin de minification

gulp.task('css:concat', function () {
    return gulp.src('css/*.css') // sélection des fichiers source
           .pipe(concat('app.min.css')) // utilisation du plugin 'gulp-concat-css' pour concaténer
           .pipe(clean()) // utilisation du plugin 'gulp-clean-css' pour minimifier
           .pipe(gulp.dest('build')); // dépôt du résultat dans le répertoire build
});

gulp.task('default', ['css:concat'], function () {
    return console.log('terminé');
});

Après exécution de gulp, vous devriez avoir dans votre répertoire build un fichier app.min.css contenant tous vos CSS minimifiés.

Conclusion

Comme nous venons de le voir, l’utilisation de gulp est assez simple. Nous sommes ici, restés sur un exemple basique mais sur un projet plus concret, on utilise en général une dizaine voire plus de plugin qui permettent de vraiment faire toutes les tâches répétitives qui n'ont pas de valeur ajoutée à être réalisé à la main.

Sachant, qu’en plus, notre fichier gulpfile.js est un fichier JavaScript des plus classiques, il est aussi possible de coder des fonctionnalités supplémentaires permettant de répondre à notre besoin, en gardant à l’esprit que nous avons en dessous toute la puissance de NodeJS.