Streams in Gulp.js

Slides from my presentation at ViennaJS meetup on 24 June 2015 on Streams in Gulp.js

You can also read an article based on this talk I have written: https://florian.ec/articles/gulp-js-streams/

Transcript

1. Streams in Gulp.js FLORIAN ECKERSTORFER https://florian.ec
2. Build System
3. Task Runner
4. GNU Make Ant Phing Rake Grunt
5. Gulp is different
6. Code instead of Configuration Node.js Streams
7. Node.js Streams
8. CoffeeScript Files Compile to JavaScript Concatenate Minify Copy to dist/ directory
9. Traditional Task Runner
10. 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
11. Gulp.js
12. Start reading src/*.coffee Pipe through CoffeScript compiler Pipe through Concat Pipe through Minify Save as dist/all.min.js
13. gulp.task('default', function () { gulp.src('src/*.coffee') .pipe(coffee()) .pipe(concat('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); });
14. Gulp has like 4 public methods (Are these programmers lazy or what?)
15. But it uses a lot of libraries And we will too
16. Orchestrator Vinyl
17. Vinyl A virtual file format
18. Object that encapsulates the filesystem gulp.src() wrapper for vinyl.src() Also .dest()
19. CODE!
20. 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); };
21. 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')); });
23. github.com/substack/stream-handbook medium.com/@contrahacks/gulp-3828e8126466 speakerdeck.com/florianeckerstorfer
24. Questions?