gulpThe streaming build system

Appsterdam Milan 23/10/2014

whoamiMaurizio Mangione

@granze

Lead FrontendDeveloper

Founder

Why gulpcode­over­configuration

speed

easy to read and write

NPM packages

flexibility

. . .and Grunt?we owe a big thanks to Grunt, but...

Bui ld wars? Who cares!

gulp is coolVS

gulp is cool compared to Grunt

Streams

bower search jquery | grep carousel

Streams enable you to pass some data througha number of usually small functions, which willmodify the data and then pass the modifieddata to the next function.“

How gulp works

Vinyla metadata object that describes a file

Vinyl adapters (Vinyl­fs)A way to access these files

OrchestratorA module for sequencing and executing tasks anddependencies in maximum concurrency

A common task

Credits: Smashing Magazine http://go.shr.lc/SAJ3My

A common gulp task var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat');

gulp.task('scripts', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });

gulp APIs

gulp.task(name[, deps], fn)

gulp.src(globs[, options])

gulp.dest(path[, options])

gulp.watch(glob[, opts, cb])

A more "complex" example gulp.task('scripts', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });

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

gulp.task('default', ['scripts', 'styles']);

Error handl ing

I’ll be completely honest with you: error management ingulp sucks currently.

­ Eric Schoffstall“

Plumber to the rescue! var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber');

gulp.task('styles', function () { return gulp.src('scss/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(gulp.dest('css')); });

The futuregulp 4

better error handling

task ordering (parallel/series)

better APIs

Quest ions?

Keep in touch

Twitter ­ Github

@granze

Slides made with Applause