Découvrons Gulp

Gulp est ce qu’on appelle un automatiseur de tâches (ou « task runner »). Il se base sur un fichier gulpfile.js situé à la racine du projet et exécute les tâches qui y sont définies.

Les tâches courantes automatisables auxquelles on pense sont les suivantes :

  • fusion de CSS/JS
  • minification de CSS/JS
  • compilation de fichier SCSS
  • optimisation d’image

mais Gulp en propose beaucoup d’autres. Pour automatiser des tâches, Gulp utilise des plugins. À l’heure où j’écris cet article, 2746 plugins sont répertoriés, soit presque autant de tâches différentes réalisables avec Gulp !

Installation

Gulp est basé sur nodeJS. Il faut donc au préalable avoir installer nodeJS sur sa machine. Une fois nodeJS installé, on peut initialiser un projet :

Cette ligne de commande va créer un fichier package.json qui sera nécessaire à l’installation de plugins. Gulp est un plugin de Node. Pour l’installer, il faudra taper la ligne de commande suivante :

Cette commande va ajouter une ligne dans le fichier package.json :

Chaque plugin présenté dans l’article est installable de cette façon. Un autre moyen d’installer des plugins est de récupérer un fichier package.json existant et de copier-coller son contenu au sein du notre, et de lancer l’instruction suivante :

Utilisation de Gulp

L’installation de Gulp va générer un fichier gulpfile.js dans lequel nous allons définir nos tâches.

Pour commencer nous pouvons ajouter les lignes suivantes dans notre gulpfile.js :

Pour utiliser un plugin, il faut l’inclure avec la directive require. Ici, le plugin gulp est inclus (il faudra toujours l’inclure).

On définit une tâche avec la fonction gulp.task. Ici, la tâche « default » est définie.

On peut définir autant de tâches que nécessaire et les exécuter indépendamment les unes des autres. Pour exécuter une tâche en ligne de commande, il faudra taper :

On peut par exemple définir une tâche « build » qui va générer les fichiers CSS à partir de fichiers SCSS et une tâche « prod » qui va en plus le minifier. Pour cela, on peut écrire :

Ici, cinq tâches sont définies. La tâche « build » appelle la tâche « css« , la tâche « prod » appelle la tâche « build » et la tâche « minify« .

La tâche « watch » est une tâche particulière qui surveille automatiquement les modifications des fichiers qu’on lui indique et exécute les tâches nécessaires dès qu’on enregistre nos fichiers. Pour cela, il suffit de lancer la tâche watch :

Si on veut créer une tâche qui transforme un fichier SCSS en CSS, on écrira :

Ici, on prend un fichier (ou plusieurs avec un sélecteur *) auquel on va appliquer d’abord la méthode compass() (qu’on a importé au dessus) puis la fonction dest() de gulp. compass() va convertir le fichier source en fichier CSS, dest() définit la destination du résultat. On peut appliquer autant de fonctions qu’on le souhaite à un fichier en utilisant pipe.

Pour surveiller les fichiers SCSS et appliquer la tâche css dès qu’un fichier est modifié, on peut déclarer la tâche watch suivante :

Plugins intéressants

On trouve tout un tas de plugins sur gulpjs.com/plugins. Voici une liste non exhaustives de plugins intéressants :

  • gulp-compass (compilation SCSS vers CSS)
  • gulp-minify-css (minification CSS)
  • gulp-uglify (minification JS)
  • gulp-concat (concaténation de fichiers)
  • gulp-rename (renommage de fichier)
  • gulp-uncss (suppression de CSS non utilisés)
  • gulp-imagemin (optimisation d’images)
  • gulp-cssbomb (réordonne les propriétés CSS)
  • gulp-cssbeautify (ré-indente les propriétés CSS)

Pour ne pas avoir à importer tous les plugins, ce qui peut être assez fastidieux, on peut importer le plugin gulp-load-plugins :

Puis utiliser les plugins de la façon suivante :

Sources :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.