Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Streams in Gulp.js FLORIAN ECKERSTORFER https://florian.ec
Slide 2
Slide 2 text
Build System
Slide 3
Slide 3 text
Task Runner
Slide 4
Slide 4 text
GNU Make Ant Phing Rake Grunt
Slide 5
Slide 5 text
Gulp is different
Slide 6
Slide 6 text
Code instead of Configuration Node.js Streams
Slide 7
Slide 7 text
Node.js Streams
Slide 8
Slide 8 text
CoffeeScript Files Compile to JavaScript Concatenate Minify Copy to dist/ directory
Slide 9
Slide 9 text
Traditional Task Runner
Slide 10
Slide 10 text
Read src/*.coffee ➞ Compile ➞ Save tmp/*.js Read tmp/*.js ➞ Concatenate ➞ Save tmp/all.js Read tmp/all.js ➞ Minify ➞ tmp/all.min.js Copy tmp/all.min.js to dist/all.min.js
Slide 11
Slide 11 text
Gulp.js
Slide 12
Slide 12 text
Start reading src/*.coffee Pipe through CoffeScript compiler Pipe through Concat Pipe through Minify Save as dist/all.min.js
Slide 13
Slide 13 text
gulp.task('default', function () { gulp.src('src/*.coffee') .pipe(coffee()) .pipe(concat('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); });
Slide 14
Slide 14 text
Gulp has like 4 public methods (Are these programmers lazy or what?)
Slide 15
Slide 15 text
But it uses a lot of libraries And we will too
Slide 16
Slide 16 text
Orchestrator Vinyl
Slide 17
Slide 17 text
Vinyl A virtual file format
Slide 18
Slide 18 text
Object that encapsulates the filesystem gulp.src() wrapper for vinyl.src() Also .dest()
Slide 19
Slide 19 text
CODE!
Slide 20
Slide 20 text
var through = require('through2'); module.exports = function (name) { function log (file, enc, cb) { console.log(name, ":", file.path); cb(null, file); } return through.obj(log); };
Slide 21
Slide 21 text
gulp.task('default', function () { gulp.src('src/*.coffee') .pipe(log("coffee")) .pipe(coffee()) .pipe(log("concat")) .pipe(concat('all.min.js')) .pipe(log("uglify")) .pipe(uglify()) .pipe(log("dest")) .pipe(gulp.dest('dist')); });
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
github.com/substack/stream-handbook medium.com/@contrahacks/gulp-3828e8126466 speakerdeck.com/florianeckerstorfer
Slide 24
Slide 24 text
Questions?