Commencer avec Gulp

C'est quoi Gulp?

Si vous connaissez Grunt vous allez apprécier Gulp. Là où Grunt vous demande des configurations à rallonge qui peuvent être complexe à mettre en place. Gulp se focalise sur les tasks et les processus. Gulp est facile à utiliser et à configurer, il est basé sur une architecture de plugins qui ont par convention un input/output similaire.

Bref, on va commencer!

Installation

Pour débuter il vous faut quelques prérequis:
- NodeJS / NPM

On commence par installer Gulp en mode global avec -g:

npm install -g gulp

Pour vérifier si tout est bien installé et que Gulp est actif:

gulp -v

Pour les besoins de l'exemple on crée un dossier de test et on init npm:

mkdir gulpTest && cd $_ && npm init

On install gulp dans ce dossier:

npm install --save-dev gulp

--save-dev permet de sauveguarder le package dans le fichier package.json

Maintenant que gulp est installé on va pouvoir définir des tasks:

  • Linting du JS
  • Compil less
  • Minify CSS
  • Minify JS et Concat
  • MV dans public folder

On va donc ajouter tous les packages nécessaires, que vous pourrez trouver facilement sur github ou sur npm.

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

Configuration

Gulp, comme Grunt, utilise un fichier de bootstrap pour s'exécuter.

On va donc créer un fichier gulpfile.js:

var gulp = require('gulp');

// Import dependencies
var jshint = require('gulp-jshint'),  
    less   = require('gulp-less'),
    recess = require('gulp-recess'),
 minifyCSS = require('gulp-minify-css'),
    path   = require('path');

Dans un processus de développement nous allons créer un dossier dev.

Ainsi qu'un dossier js avec un fichier javascript.

mkdir -p dev/js && echo "var x = ''; if (x==''){}" >> dev/js/index.js

(il y a une erreur dans ce code c'est normal)

On définit ensuite une task pour JSHint:

var source = 'dev/';  
// Define tasks

// Lint Task
gulp.task('lint', function () {  
    gulp.src(source + 'js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Maintenant lancer un gulp lint. Success!
Vous voyez bien que gulp nous renvoie bien une erreur dans notre fichier.

Nous allons ensuite créer une task pour less.

// Lint notre Less le compile et le place dans le dossier public
gulp.task('less', function () {  
    gulp.src(source + 'less/style.less')
        .pipe(recess()) // Linting CSS
        .pipe(less()) // Compile LESS
        .pipe(gulp.dest(dist + 'css'));
});

Et notre minify CSS? Ah oui c'est vrai... modifions notre task less pour ajouter cette fonctionnalité.

gulp.task('less', function () {  
    gulp.src(source + 'less/style.less')
        .pipe(recess()) // Linting CSS
        .pipe(less()) // Compile LESS
        .pipe(minifyCSS()) // Minify CSS
        .pipe(gulp.dest(dist + 'css'));
});

Vous l'avez compris c'est très facile!

Conclusion

Grunt a été une révolution mais notre expérience fait que nous pouvons développer des outils encore meilleurs pour nous simplifier la vie. Gulp en est un, je vous conseille de le suivre de près dans les mois à venir!

comments powered by Disqus