Upload
maurizio-mangione
View
104
Download
0
Embed Size (px)
DESCRIPTION
My talk about gulp @ Appsterdam Milan Original HTML slides here: http://bit.ly/appsterdam-gulp Presentation made with Applause: https://github.com/Granze/applause
Citation preview
gulpThe streaming build system
Appsterdam Milan 23/10/2014
whoamiMaurizio Mangione
@granze
Lead FrontendDeveloper
Founder
Why gulpcodeoverconfiguration
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 (Vinylfs)A way to access these files
OrchestratorA module for sequencing and executing tasks anddependencies in maximum concurrency
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?