Le blog Sodifrance Netapsys

Pendant la phase de développement d'un projet, il est parfois nécessaire d'utiliser des petites librairies  d' outils qui permettent d'optimiser / alléger / accélérer sa réalisation. Ce sont des petites tâches qu'on exécute de temps en temps ou plusieurs fois  durant cette phase, et à la longue, cela devient de plus en plus lassant.

Je vais vous présenter dans cet article Gulp , qui est un outil développé à partir de la plateforme Node JS. Le principe est de regrouper ces petites tâches afin de les automatiser. Un autre outil fonctionnant de la même manière est Grunt. Pour voir les différences, merci de lire l'article "Gulp remplacera-t-il Grunt ?" de Nicolas Froidure.

Installation

Il existe 2 types d'installation :

1 - Installation globale, c'est à dire une bonne fois pour toute sur une machine hôte :

$ npm install --global gulp

2 - Installation pour un projet spécifique :

$ cd project_path
$ project_path > npm install --save-dev gulp

Principe de fonctionnement

Comme nous  l'avons indiqué au début, le but est de regrouper les tâches à effectuer. Pour cela, il faut d'abord créer un fichier nommé gulpfile.js à la racine du projet, dont le contenu doit ressembler à ceci :

// Déclaration des packages gulp à utiliser
var gulp = require('gulp'); // 

// création d' une tâche
gulp.task('default', function() {
  return gutil.log('Hello World');
});

En gros, il faut déclarer au début du fichier les packages ( modules ou plugins ) Gulp qui sont nécessaires pour les différentes tâches à exécuter. Ensuite, on utilise la méthode "task" pour les enregistrer. Dans notre exemple, le nom de la tâche est "default" et tout ce qui est dans function () sont les commandes à exécuter pour cette tâche.

Enfin, pour exécuter une tâche, il suffit de faire la commande suivante dans la console :

$ gulp <nom_de_la_tache>

Il faut aussi noter que si l'argument "nom_de_la_tache" est omis, c 'est la tâche nommée "default" qui sera exécutée.

Cas pratique

Mais alors dans quels cas faut il l'utiliser ?

Durant la phase de développement, les développeurs front-end utilisent par exemple la librairie SASS ou LESS pour "développer" leurs feuilles de styles. Il est parfois nécessaire de les minifier quand on passe en production, mais nous savons tous que débugger un fichier minifié n'est pas une mince affaire, alors il est nécessaire de posséder les 2 fichiers non-minifiés et minifiés. Pour cela, on doit créer une copie du fichier non-minifé, le minifier, le placer ailleurs ou le renommer. Si le site utilise beaucoup de fichiers javascript ( une dizaine par exemple  ), en production, il est parfois recommandé de les combiner dans un seul fichier pour minimiser les requêtes sur le serveur, puis les minifier aussi si possible. Et bien, avec Gulp, nous pouvons effectuer toutes ces opérations en exécutant qu'une seule tâche ou une seule commande.

Mais pour la démonstration qui va suivre, nous allons effectuer les opérations suivantes :

• Compiler les fichiers SASS/SCSS.
• Rafraîchir automatiquement le navigateur après la génération du fichier CSS. C'est très utile quand on a 2 écrans : on voit le résultat de notre modification sans quitter son éditeur de code :).

Pour cela voici la marche à suivre :

1 - D'abord, il faut installer les modules à utiliser pour les différentes opérations que nous allons faire, il faut exécuter ces lignes de commande dans le répertoire racine de votre projet :

•  Le module gulp-compass dont la documentation est disponible en suivant ce lien :

$ npm install gulp-compass --save-dev

• Le module Browsersync dont la documentation est disponible en suivant ce lien :

$ npm install browser-sync --save-dev

2 - Déclarez au début du fichier gulpfile.js ces modules :

// Déclaration des modules à utiliser
var gulp = require('gulp'), // module principal
    compass =  require('gulp-compass'), // module compass
    browserSync = require('browser-sync').create(); // module de synchronisation de navigateur

3 - Créez la tâche qui fait la transformation des fichiers sass en feuille de style :

// tâche pour compass
gulp.task('compass', function() {
  gulp.src('sass/*.scss') // chemin indiquant l' emplacement des fichiers sources scss
    // Configuration du module compass : chemin du fichier config.rb 
    // et les répertoires contenant les fichiers sources .scss et destination .css
    .pipe(compass({
      config_file: 'config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest('stylesheets')) // chemin de destination des fichiers compilés
    
    // Rafraîchissement de navigateur quand l'écriture du fichier css est fini
    .pipe(browserSync.reload({
      stream: true
    }));
});

Il faut remarquer qu'à la fin de cette tâche, on trouve la commande qui fait le rafraîchissement automatique du navigateur après la génération de la feuille de style.

4 - Créez une tâche qui initialise le module qui rafraîchit automatiquement le navigateur :

// tâche pour la synchronisation du navigateur
gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "http://localhost/chemin_de_mon_projet"
    });
});

5 - Enfin, créez la tâche qui surveille les changements ou modifications effectués au niveau des fichiers sass :

// tâche qui surveille le changement / modifications effectuées au niveau des fichiers scss
gulp.task('watch', ['browserSync', 'compass'], function() {
  gulp.watch('sass/*.scss', ['compass']);
});

C'est cette dernière tâche qu 'il faut exécuter pour effectuer automatiquement toutes les opérations citées au début. La commande qu'il faut faire est donc :

$ gulp watch

Après le lancement, voici le résultat :

Petite explication : au lancement de cette commande, il exécute d'abord les tâches browserSync et compass, et c'est après qu'il exécute le code dans la fonction callback. Pour cette dernière, la ligne de code a pour rôle de surveiller les changements effectués au niveau des fichiers scss et après exécuter la tâche "compass".

A partir de cet instant donc, à chaque fois que nous enregistrons les modifications effectuées dans un de nos fichier scss, la compilation se fait et le navigateur se rafraîchit automatiquement sans aucune intervention.

Conclusion

Cette petite démonstration n'est qu'une infime partie de ce que l'outil peut faire. Je vous recommande de l'utiliser car il pourrait vous faciliter la vie durant la phase de développement (ou phase de déploiement) d'un projet, que vous soyez développeur front-end ou développeur back-end.