Gulp, l’outil qui devient indispensable

Vous connaissez GruntJS ? Vous ne connaissez peut-être pas Gulp. Ces deux outils permettent d’effectuer des tâches (souvent répétitives) en ligne de commande et très utiles aux développeurs front-end.

Gulp est plus simple à utiliser et plus performant. Par contre il est plus jeune, moins fourni.

Quelques tâches que l’on retrouve souvent :

  • Compiler son code préprocesseur en CSS (LESS et ses copains).
  • Valider, minifier ses fichiers Javascript.
  • Optimiser ses images.
  • Exécuter des tests unitaires.


Toutes ces tâches peuvent être faites automatiquement ! Voici comment s’y prendre avec Gulp.

Commencer par installer NodeJS.

NodeJS installé, il faut installer « globalement » Gulp.

npm install -g gulp

Se placer à la racine du projet et créer le fichier package.json s’il n’existe pas avec :

npm init

Puis installer Gulp et les composants souhaités.

npm install gulp gulp-rename gulp-minify-css gulp-uglify gulp-jshint --save

Ensuite il faut créer le fichier gulpfile.js et y mettre son code.

Voici un exemple que j’utilise :

Mise à jour du 26/03/2014

// Gulp
// ----------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------
var gulp = require('gulp');

// Importing Gulp dependencies
// ------------------------------------------------------------------------------------------------------
var
    uglify      = require('gulp-uglify'),
    minifyCSS   = require('gulp-minify-css'),
    rename      = require('gulp-rename'),
    jshint      = require('gulp-jshint');

// Source path
// ------------------------------------------------------------------------------------------------------
var source = 'dist/';

// Tasks configuration
// ------------------------------------------------------------------------------------------------------
var tasks = {
    'js': {
        source: source +'js/jquery.desoslide.js',
        dest:   source +'js'
    },
    'css': {
        source: source +'css/jquery.desoslide.css',
        dest:   source +'css'
    }
};

// Javascript
// ------------------------------------------------------------------------------------------------------
gulp.task('js', function() {

    return gulp
        .src(tasks.js.source)
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify({
            preserveComments: 'some'
        }))
        .pipe(rename({
            suffix: '.min',
        }))
        .pipe(gulp.dest(tasks.js.dest));

});

// CSS
// ------------------------------------------------------------------------------------------------------
gulp.task('css', function() {

    return gulp
        .src(tasks.css.source)
        .pipe(minifyCSS({
            keepSpecialComments: 1
        }))
        .pipe(rename({
            suffix: '.min',
        }))
        .pipe(gulp.dest(tasks.css.dest));

});


// Watching files
// ------------------------------------------------------------------------------------------------------
gulp.task('watch', function() {

    gulp.watch(tasks.js.source, ['js']);
    gulp.watch(tasks.css.source, ['css']);

});

// Default tasks (called when running `gulp` from cli)
// ------------------------------------------------------------------------------------------------------
gulp.task('default', [
    'js',
    'css',
    'watch'
]);

On exécute ce fichier en tapant gulp dans le terminal. La commande ne s’arrêtera pas car le fichier écoute les futurs changements.

Explications :

  1. On instancie Gulp et ses composants.
  2. On définit une variable de path qui sera utilisée tout au long du fichier.
  3. On crée un objet tasks qui contient la configuration de nos tâches.
  4. On écrit les tâches souhaitées.
  5. La tâche watch permet d’écouter les modifications faites en live sur les fichiers et exécute les tâches à l’enregistrement.

En comprenant ce fichier vous avez tout compris. Il existe d’ailleurs moult plugins.

Vous pouvez voir l’exemple sur desoSlide où j’utilise gulp-rename.

gulpfile

Vous aimerez aussi...