![Page 1: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/1.jpg)
gulpThe streaming build system
Appsterdam Milan 23/10/2014
![Page 2: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/2.jpg)
whoamiMaurizio Mangione
@granze
Lead FrontendDeveloper
Founder
![Page 3: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/3.jpg)
Why gulpcodeoverconfiguration
speed
easy to read and write
NPM packages
flexibility
![Page 4: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/4.jpg)
. . .and Grunt?we owe a big thanks to Grunt, but...
![Page 5: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/5.jpg)
Bui ld wars? Who cares!
gulp is coolVS
gulp is cool compared to Grunt
![Page 6: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/6.jpg)
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.“
![Page 7: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/7.jpg)
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
![Page 9: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/9.jpg)
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')); });
![Page 10: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/10.jpg)
gulp APIs
gulp.task(name[, deps], fn)
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.watch(glob[, opts, cb])
![Page 11: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/11.jpg)
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']);
![Page 12: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/12.jpg)
Error handl ing
I’ll be completely honest with you: error management ingulp sucks currently.
Eric Schoffstall“
![Page 13: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/13.jpg)
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')); });
![Page 14: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/14.jpg)
The futuregulp 4
better error handling
task ordering (parallel/series)
better APIs
![Page 15: gulp - the streaming build system - Appsterdam Milan](https://reader034.vdocument.in/reader034/viewer/2022042816/5594197c1a28ab730d8b462d/html5/thumbnails/15.jpg)
Quest ions?