Gulp.js : Automatiser les projets web

Aujourd’hui, pour les sites web, développer la partie visible à l’internautes (front-end) en suivant les règles des designs modernes ne se limite plus à l’écriture de code HTML, CSS et Javascript. Il faut ajouter la mise en place d’un workflow efficace qui va permettre à écrire des codes et des tests bien organisé, de déployer les applications web efficacement. Gulp.js est un outil qui va permettre mettre en place ce workflow. Il permet entre autres de compresser, de minifier, de pré-traiter, etc… Et ces actions vont se faire facilement en écrivant des fichiers de configuration.

Dans cet article, nous allons essayer de vous aider à comprendre les concepts derrière gulp, et de montrer comment travailler avec la quatrième version de Gulp.

Flux de travail en continu en utilisant Gulp.js

De nos jours, construire des sites web devient de plus en plus compliquer chaque année. Nous ne créons plus que du HTML, du CSS et du Javascript. Par exemple, pour permettre la compatibilité avec les anciennes navigateurs, il faut utiliser des outils comme les « Transpilers » et les processeurs CSS.

Bien qu’il existe de nombreuses outils pour travailler avec des projets web, y compris des outils plus récents tels que Rollup et Webpack, gulp.js vous offre un langage cohérent et facile à utiliser pour créer et gérer des tâches courantes.

Dans ce qui suit, nous allons présenter étape par étape comment créer un processus typique pour travailler avec des tâches en série et/ou en parallèle et nous traiterons les scripts Javascript et les styles CSS.

Installation de Gulp.js

Nous allons voir dans cette section comment installer Gulp.js et les autres dépendances qu’il a besoin.

En premier, nous avons besoin de la dernière version de NodeJS.

Pour installer NodeJS sous Mac ou Windows, nous pouvons aller à l’URL suivante https://nodejs.org. Sous Debian 10, on execute la commande suivante pour mettre à jour les repository des paquets.

$ apt update

Une fois que c’est fait, il faut installer les repository requis pour NodeJS.

$ curl -sL https://deb.nodesource.com/setup_14.x | bash -

Le script ci-dessous va vérifier la liste des sources APT four NodeJS.

$ cat /etc/apt/sources.list.d/nodesource.list
deb https://deb.nodesource.com/node_14.x focal main
deb-src https://deb.nodesource.com/node_14.x focal main

Une fois que le repository de NodeJS ait été vérifiée, nous pouvons maintenant installé NodeJS avec la commande suivante

apt -y install nodejs

Une fois l’installation faite, vérifier qu’elle s’est bien passée en exécutant les commandes suivante :

$ node -v
v14.16.0
$ npm -v
6.14.11

Il est aussi nécessaire d’avoir Git. Il faut exécuter la commande suivante :

$ apt install git

Quand nous avons terminer d’installer les différents dépendances on peut maintenant passer à l’installation de Gulp.js dans un projet existant ou dans un nouveau projet.

Nous tenons à préciser ici que le projet est un projet simple avec des fichiers Javascript, CSS et HTML.

La première commande que nous allons exécuter va permettre de créer un package qui va sauvegarder tous les différents modules et autres propriétés concernant le projet. Ce package se présente sous la forme d’un fichier JSON. La commande qui permet de le faire est :

$ npm init -y

Une fois la commande exécuté, nous allons avoir un fichier « package.json » à l’intérieur du répertoire du projet. Ci-dessous un exemple de fichier package.json minimum.

{
  "name": "gulpjs4",
  "version": "1.0.0",
  "description": "This is the repository for the LinkedIn Learning course on Gulp.js 4. The full course is available $
  "author": "smart-tech.mg",
}

Pour installer ensuite Gulp.js, il faut exécuter trois commandes. La première commande est la suivante :

$ npm install gulp-cli -g

La seconde commande est :

$ npm install gulp -D

Enfin, la dernière commande est :

npm install --save-dev gulp

A la fin des différents installations, nous aurons un fichier package-lock.json en plus de package.json. Ce fichier contient les versions plus complète des dépendances requis pour les projets et qui se trouve dans le répertoire « node_modules ».

Création des tâches Gulp

L’avantage que nous allons avoir avec Gulp est qu’il va permettre d’utiliser du Javascript standard pour gérer les tâches. Pour ce faire, on va utiliser le fichier gulpfile.js qui se trouvera dans le même répertoire que le projet. A l’exécution de la commande gulp dans un terminal, il va rechercher ce fichier.

Les fichiers peuvent être séparés en plusieurs fichiers. Pour ce faire, il faut créer un répertoire appelé gulpfile.js au lieu de créer un fichier. A l’intérieur de ce fichier, on ajoute un fichier index.js qui va être chargé comme étant le document par défaut. Et ce sera à l’intérieur de ce fichier qu’on va importer les autres fichiers.

Les tâches peuvent être de différentes types de format comme les streams, les promises, etc… Mais la plus populaires des formats est le callback. Pour créer les tâches, nous allons définir les sources et les destinations des fichiers générés. En plus, nous allons créer des séries d’instructions. Ainsi, le résultat du traitement des source sera traité par des modules spécifiques. Et après ils seront redirigé vers les fichiers de destination.

Chaque tâche peut être aussi exporté, mais c’est optionnel. Ces tâches exportées peuvent être réutilisées par d’autres modules.

Nous pouvons aussi spécifier des globs qui permettent de se référer à des fichiers par l’intermédiaires des wildcars.

Ci-dessous, un exemple de fichier gulp.js. A l’intérieur, nous avons une référence à la source et à la destination qui a besoin des librairies gulp. Et ensuite il y a une fonction qui a un callback (cb). Ensuite, on spécifie en utilisant le source où se trouve les fichier qui sera traiter se trouve. Après on exécute une série de commande. Et à la fin, on va envoyer le résultat dans une destination qui est un répertoire dans le disque dur. Et on exécute le callback. Il faut ensuite exporter la fonction qui est la tâhce. Et en ajoutant le mot clé « default », on peut exécuter la fonction une fois que la commande gulp est exécutée.

const {src,dest} = require('gulp')
function html(cb){
    src('src/index.html').pipe(dest('build'))
    cb();
}
exports.default = html

Pour exécuter la tâche on utilise la commande suivante :

$ gulp

La tâche gulp ci-dessus copie index.html qui se trouve dans le répertoire src vers le répertoire build.