Gulp, compilation less & minification js et css

gulpjs

Dans cet article je vais détailler l’installation de Gulp et commenter un exemple de script pour compiler des fichiers CSS au format less, minifier ces fichiers et également minifier des fichiers JS.

Gulp est un programme (module) qui utilise NodeJS. Comme prérequis il est donc nécessaire que NodeJS soit installé sur votre ordinateur (voir cet article pour plus d’infos à ce sujet).

Création des dossiers de travail

Il est préférable de séparer les fichiers générés par Gulp des fichiers sources. Voici l’arborescence utilisée pour l’exemple :

  • /css  pour les fichiers css compilés et minifiés
  • /js pour les fichiers js minifiés
  • /src/css pour les fichiers sources *.less
  • /src/js pour les fichiers sources *.js
  • /gulp pour les modules gulp

Installation de Gulp (et des modules annexes)

Installation de Gulp en mode global :

npm install -g gulp

Installation de Gulp dans votre projet :

cd dev/gulp
npm install --save-dev gulp

Installation des modules annexes :

npm install --save-dev gulp-minify-css gulp-uglify gulp-rename
npm install --save-dev gulp-jshint gulp-less gulp-recess

Configuration de Gulp

Dans le dossier dev/gulp il faut créer le fichier gulpfile.js. Afin que le script soit réutilisable il utilise uniquement des chemins relatifs par rapport au dossier dev/gulp.

/dev/gulp/gulpfile.js

// init, chargement des modules

// gulp et path
var gulp = require('gulp');
var path = require('path');

// modules gulp
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var recess = require('gulp-recess');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// path absolu du dossier de l'application
var rootFolder = "/xx/xx/xx";

// dossier pour les watcher et les tasks
var sourceCSS = rootFolder + '/src/css/*.less' ;
var sourceJS = rootFolder + '/src/js/*.js';
var destJS = rootFolder + '/js';
var destCSS = rootFolder + '/css';

Ajout de task

Gulp fonctionne par ‘task’ (tache), c’est à dire que vous configurer des taches qui correspondent à une liste d’actions à exécuter sur un ou plusieurs fichiers.

Exemple de task pour des fichiers JS :

/* fichier js */

gulp.task('JS_files',function() {
  gulp.src(sourceJS)
  .pipe(uglify())
  .pipe(gulp.dest(destJS));
});

Cette tache traite tous les fichiers JS correspondants au masque sourceJS. Ces fichier sont minifiés (module uglify) et ensuite ils sont enregistrés dans ../../js.

Pour exécuter une tache il suffit de taper : gulp NOM-TACHE, dans notre exemple cela donne : gulp JS_files.

Exécution automatique (watcher)

Gulp propose un système de wachers. Ce système permet de mettre en surveillance un ou plusieurs fichiers et en cas de modification d’exécuter une liste de tache.

Exemple de watcher pour les fichiers JS qui utilise la tache  JS_files.

/* watch via une tache */
gulp.task('watch',function() {
 gulp.watch(sourceJS,['JS_files']);
});

Le watcher surveille tous les fichiers du masque sourceJS, en cas de modification il exécute la tache JS_files. Le watcher est utilisé ici comme un tache, pour le lancer il suffit donc de faire : gulp watch.

Script complet pour JS et CSS (less)

Pour terminer mon article, voici le fichier au complet avec tous les watches et les taches pour minifier du JS, compiler et minifier des fichiers LESS. Concernant les fichiers JS j’utilise également le module rename pour ajouter -min au nom du fichier.

// gulp et path
var gulp = require('gulp');
var path = require('path');

// modules gulp
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var recess = require('gulp-recess');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');

// path absolu du dossier de l'application
var rootFolder = "/xx/xx/xx";

// dossier pour les watcher et les tasks
var sourceCSS = rootFolder + '/src/css/*.less' ;
var sourceJS = rootFolder + '/src/js/*.js';
var destJS = rootFolder + '/js';
var destCSS = rootFolder + '/css';

/* default task */
gulp.task('default',function() { });

/* watchers */
gulp.task('watch',function() {
 gulp.watch(sourceCSS,['CSS_files']);
 gulp.watch(sourceJS,['JS_files']);
});

/* fichier js */
gulp.task('JS_files',function() {
  gulp.src(sourceJS)
  .pipe(uglify())
  .pipe(rename({suffix: '-min' }))
  .pipe(gulp.dest(destJS));
});

/* fichier less */
gulp.task('CSS_files', function() {
  gulp.src(sourceCSS)
  /*.pipe(recess())*/
  .pipe(less())
  .pipe(minifyCSS())
  .pipe(gulp.dest(destCSS));
});

Et après

Gulp ne se limite pas à ce genre de traitements. Il est capable de toute sorte de traitements sur des fichiers textes et même sur des images. Comme Gulp utilise un système modulaire il n’y a quasiment pas de limite sur le type de traitements. Pour plus d’informations le site officiel c’est http://gulpjs.com/

Liste de tous les modules Gulp sur le site NPM : https://www.npmjs.com/search?q=gulp

2 commentaire(s)

  1. Article très intéressant !
    Merci bien !

  2. Auguste says:

    Merci pour votre retour et content si cela vous a été utile.

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.