Gulp - Une boîte à outils pour automatiser les tâches pénibles en développement

Gulp est une petite boîte à outils qui automatise les tâches répétitives. Ces tâches répétitives consistent généralement à compiler des fichiers CSS, JavaScript ou, en gros, lorsque vous utilisez un cadre qui traite des fichiers JavaScript/CSS non standard, vous voudrez utiliser un outil d’automatisation qui récupère ces fichiers, les empaquette ensemble et compile tout pour que votre navigateur puisse facilement le comprendre.

Gulp est utile pour automatiser les tâches suivantes :

Compilation de fichiers JS et CSS
Actualisation de la page du navigateur lors de l’enregistrement d’un fichier
Exécuter un test unitaire
Analyse du code
Copie de fichiers modifiés dans un répertoire cible

Pour garder une trace de tous les fichiers dont vous avez besoin pour créer un fichier gulp, développer votre outil d’automatisation ou automatiser des tâches, vous devez générer un fichier package.json. Le fichier contient essentiellement une explication de ce qu’il y a à l’intérieur de votre projet, des dépendances dont vous avez besoin pour faire fonctionner votre projet.

Dans ce tutoriel, vous allez apprendre à installer Gulp et à automatiser certaines tâches de base pour vos projets. Nous allons utiliser npm – qui signifie gestionnaire de paquets de nœuds. Il est installé avec Node.js, et vous pouvez vérifier si vous avez déjà installé Nodejs et npm avec :

# node --version
npm --version

Si vous ne l’avez pas déjà installé sur votre système, je vous recommande de consulter le tutoriel : Installer la dernière version de Nodejs et NPM dans les systèmes Linux.

Comment installer Gulp sous Linux

L’installation de gulp-cli peut être terminée avec npm à l’aide de la commande suivante.

# npm install --global gulp-cli

Si vous souhaitez installer le module gulp localement (pour le projet en cours uniquement), vous pouvez utiliser les instructions ci-dessous :

Créez un répertoire de projet et naviguez-y :

# mkdir myproject
cd myproject

Ensuite, utilisez la commande suivante pour initialiser votre projet :

# npm init

Après avoir exécuté la commande ci-dessus, une série de questions vous seront posées pour donner un nom à votre projet, une description de version et d’autres. Enfin, confirmez toutes les informations que vous avez fournies :

Maintenant, nous pouvons installer le paquet gulp dans notre projet avec :

# npm install --save-dev gulp

L’option --save-dev indique à npm de mettre à jour le fichier package.json avec les nouvelles devDependencies.

Notez que les devDependencies doivent être résolues pendant le développement, tandis que les dépendances pendant l’exécution. Étant donné que gulp est un outil qui nous aide dans le développement, il doit être résolu au moment du développement.

Créer un fichier Gulp

Créons maintenant un gulpfile. Les tâches que nous voulons exécuter se trouvent dans ce fichier. Il est automatiquement chargé lors de l’utilisation de la commande gulp. À l’aide d’un éditeur de texte, créez un fichier nommé gulpfile.js. Pour les besoins de ce tutoriel, nous allons créer un test simple.

Vous pouvez insérer le code suivant dans votre gulpfile.js :

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Enregistrez le fichier et essayez maintenant de l’exécuter avec :

# gulp hello

Vous devriez voir le résultat suivant :

Voici ce que fait le code ci-dessus :

var gulp=require('gulp') ; – Importe le module gulp.
gulp.task('hello', function(done) { – définit une tâche qui sera disponible à partir de la ligne de commande.
console.log('Bonjour tout le monde !') ; – imprime simplement « Hellow world ! » à l’écran.
done() ; – Nous utilisons cette fonction de rappel pour indiquer à Gulp que nos tâches sont terminées.

Bien sûr, ce qui précède n’était qu’un échantillon pour montrer comment les gulpfile.js peuvent être organisés. Si vous souhaitez voir les tâches disponibles à partir de votre gulpfile.js, vous pouvez utiliser la commande suivante :

# gulp --tasks

Plug-ins Gulp

Gulp dispose de milliers de plugins disponibles, tous offrant des fonctionnalités différentes. Vous pouvez les consulter sur la page du plugin de Gulp.

Ci-dessous, nous utiliserons le plugin minify-html dans un exemple plus pratique. Avec la fonction ci-dessous, vous pouvez minifier les fichiers HTML et les placer dans un nouveau répertoire. Mais d’abord, nous allons installer le plugin gulp-minify-html :

# npm install --save-dev gulp-minify-html

Vous pouvez faire en sorte que votre gulpfile.js ressemble à ceci :

# cat gulpfile.js

Exemple de sortie

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Ensuite, vous pouvez réduire les fichiers HTML à l’aide des commandes suivantes.

# gulp minify-html
du -sh /src dest/

Conclusion