Un task-runner ?

• Automatiser
  • compiler les sass, coffee, jade, ...
  • minifier
  • fusionner
  • tester
  • remplacer
  • ...
• Watcher
  • si on modifie, on ne relance pas la commande

Il en existe pas mal

et bien plus encore !

Pourquoi Gulp ?

Gulp : des chiffres

• Juillet 2013
• Github stars : > 12000
• v 3.8.11

npm i -g gulp

gulpfile.js

var gulp   = require('gulp'),
  sass     = require('gulp-sass'),
  concat   = require('gulp-concat'),
  pleeease = require('gulp-pleeease');

gulp.task('styles', function() {
    return gulp.src(['scss/**/*.scss'])
        .pipe(sass())
        .pipe(pleeease())
        .pipe(concat('app.css'))
        .pipe(gulp.dest('css'));
});

gulp.task('default', function() {
  gulp.start('styles');
});

Avantages

gulp.task('style', function() {
  return gulp.src(['scss/*.scss'])
      .pipe(plumber({errorHandler: onError}))
      .pipe(sass())
      .pipe(pleeease())
      .pipe(header([
        '/*',
        '* ' + p.name,
        '*',
        '*  @author    Axome <***@axome.com>',
        '*  @copyright ' + (new Date()).getFullYear() + ' Axome',
        '*  @license   axome license',
        '*/',
        ''
      ].join('\n')))
      .pipe(gulp.dest('views/css'));
});

API

• src
• dest
• task
• watch
• start

et c'est tout

Plugins

• Plus de 1400 plugins
• types de plugins
  • pre-processor
  • post-processor
  • minifier
  • tester
  • optimisation
  • ...
• utilisation simple : avec require()

  • var concat = require('gulp-concat');

Les streams

Qu'est-ce qu'un stream ?

Un stream est une représentation objet avec les actions :
 

• lire
• transformer
• écrire

 
Et on peut les "piper"

Gulp

http://markgoodyear.com/2014/01/getting-started-with-gulp/

Grunt

http://markgoodyear.com/2014/01/getting-started-with-gulp/

Gulp : pour le dev ?

• Pas que :
  • gulp-connect => webserver
  • avec des fichiers md => sites

Glou.js

plus performant en utilisant gulp

youtube.com/watch?v=xtQfpEX9k-M

Conclusion

Gulp c'est cool, mais les autres aussi.

Utilisez celui qui vous est le plus familier

Merci

Pour approfondir

• http://slides.com/contra/gulp
• http://www.sitepoint.com/basics-node-js-streams/
• http://putaindecode.fr/posts/js/introduction-gulp/
• http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/
• http://www.cantierecreativo.net/blog/2015/01/09/nodejs-grunt-gulp/
• http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
• http://insertafter.com/fr/blog/retour_experience_gulp.html
• https://gist.github.com/aaronwaldon/8657432
• http://markgoodyear.com/2014/01/getting-started-with-gulp/
• http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903
• http://davidwalsh.name/techy

cheatsheet

github.com/osscafe/gulp-cheatsheet