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
   

   View Slide

2. Build System
   

   View Slide

3. Task Runner
   

   View Slide

4. GNU Make
   Ant
   Phing
   Rake
   Grunt
   

   View Slide

5. Gulp is different
   

   View Slide

6. Code instead of Configuration
   Node.js Streams
   

   View Slide

7. Node.js Streams
   

   View Slide

8. CoffeeScript Files
   Compile to JavaScript
   Concatenate
   Minify
   Copy to dist/ directory
   

   View Slide

9. Traditional Task
   Runner
   

   View Slide

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
    

    View Slide

11. Gulp.js
    

    View Slide

12. Start reading src/*.coffee
    Pipe through CoffeScript compiler
    Pipe through Concat
    Pipe through Minify
    Save as dist/all.min.js
    

    View Slide

13. gulp.task('default', function () {
    gulp.src('src/*.coffee')
    .pipe(coffee())
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
    });
    

    View Slide

14. Gulp has like 4
    public methods
    (Are these programmers lazy or what?)
    

    View Slide

15. But it uses a lot of
    libraries
    And we will too
    

    View Slide

16. Orchestrator
    Vinyl
    

    View Slide

17. Vinyl
    A virtual file format
    

    View Slide

18. Object that encapsulates the filesystem
    gulp.src() wrapper for vinyl.src()
    Also .dest()
    

    View Slide

19. CODE!
    

    View Slide

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);
    };
    

    View Slide

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'));
    });
    

    View Slide

22. View Slide

23. github.com/substack/stream-handbook
    medium.com/@contrahacks/gulp-3828e8126466
    speakerdeck.com/florianeckerstorfer
    

    View Slide

24. Questions?
    

    View Slide