25 mars 2015

http://slides.com/gouz/gulp

Qui suis-je ?

#irl : Sylvain Gougouzian
- Developer @axome
  - Back-end
  - modules Prestashop

@web : gouz
- petit éleveur de GNU
  - moodular, dylay, ... masis, flubjs

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

Demonstration

Conclusion

Gulp c'est cool, mais les autres aussi.

Utilisez celui qui vous est le plus familier