Utilisateur de gruntJS depuis un bon moment, j’ai suivi avec attention l’émergence de nouveaux outils concurrents à l’approche différente.
Ainsi, dans cet article, je vais essayer de vous faire partager mes premiers pas avec GulpJS.
Je complèterai cet article au fur et à mesure, mais je voulais rapidement partager mes premiers pas, et montrer que pour un process basique, l’approche est très facile, et le fichier pour configurer tout cela me parait extrêmement lisible et concis.
L’approche :
Tout d’abord, il est important de comprendre que l’approche entre Grunt et Gulp n’est pas la même :
- Grunt est là pour vous aider à réaliser des tâches, les unes après les autres, et utilise un système de configuration via JS et de nombreux plugins, qui font leurs propres tâches de leur côté.
- Gulp, quand à lui, propose d’utiliser une technique dite de “flux” (streaming) et du code au lieu de configuration, vous laissant ainsi plus de latitude sur ce que vous voulez effectuer.
La technique de streaming permet aussi d’enchainer les actions sans avoir des systèmes d’écritures temporaires sur le disque, qui ralentissent énormément certaines tâches dans Grunt.
Installer
Tout comme Grunt, Gulp est basé sur nodeJS, vous avez donc besoin d’avoir préalablement installé nodeJS.
Ensuite, vous pouvez taper, en ligne de commande, pour installer gulp globalement sur votre système :
Sous mac OSX/Linux :
sudo npm install gulp -g
Sous windows :
npm install gulp -g
Enfin, vous devrez définir dans votre package.json les dépendances à installer (gulp-concat, gulp-sass, gulp-uglify, etc.) quand on tape ‘npm install’ localement.
Et bien entendu, tout comme vous avez besoin d’un fichier ‘grunfile.js’ à la racine de votre projet, si vous souhaitez exécuter des tâches Grunt, vous avez ici besoin d’un fichier ‘gulpfile.js’.
Un exemple de fichier gulpfile.js :
//préparer les plugins gulp qui seront utilisés
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sass = require('gulp-sass');
//définir les chemins des assets à utiliser
var paths = {
scripts: ['_src/main/**/*.js'],
sass: ['_src/main/css/*.scss'],
images: '_src/main/images/**'
};
//définir les tâches de concaténation, minification et copie pour les scripts
gulp.task('scripts', function() {
return gulp.src(paths.scripts)
//uglifier
.pipe(uglify())
//concaténer
.pipe(concat('generated.min.js'))
//copier
.pipe(gulp.dest('build/js'));
});
// Copier les images statiques et les optimiser
gulp.task('images', function() {
return gulp.src(paths.images)
// Passer les options d'optimization à la tâche
.pipe(imagemin({optimizationLevel: 5}))
//copier
.pipe(gulp.dest('build/img'));
});
//compilation SASS
gulp.task('sass', function () {
gulp.src(paths.sass)
.pipe(sass({
//objet de configuration pour le compilateur, ne pas interrompre la tâche en cas d'erreur, mais afficher l'erreur dans le terminal
errLogToConsole:true
}))
//copier la css générée
.pipe(gulp.dest('build/css/'));
});
//observer les modifications et lancer les tâches idoines
gulp.task('watch', function () {
gulp.watch(paths.scripts, ['scripts']);
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.images, ['images']);
});
// la tâche par défaut quand on tape "gulp" dans la ligne de commande
gulp.task('default', ['scripts', 'images', 'sass', 'watch']);
Conclusion :
La configuration de GulpJS s’avère très simple à prendre en main, et ce qui étonne avant tout, c’est la rapidité d’exécution des tâches, notamment de ‘watch’ pour ‘SASS’.
A suivre donc, en fonction de l’évolution des plugins GulpJS qui vont petit à petit élargir les possibilités, mais on a sans doute ici une très sérieuse alternative à GruntJS.
Pour l’anecdote :
Il est intéressant de noter que dans nos technologies front/back JS, les choses vont très vite, puisqu’on voit arriver également ‘Broccoli‘ ou encore Fez, qui seront peut être également à suivre dans cette lignée des outils d’automatisation.