gulpjs.com

 

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

Merci

Pour approfondir

cheatsheet

Gulp

By Sylvain Gougouzian

Gulp

Présentation de Gulp à Web En Vert

  • 2,153