Plumbin' Pipelines with Gulp.js - 3hr Workshop

Plumbin' Pipelines with Gulp.js - 3hr Workshop

With JavaScript being no toy language anymore our demands on a high quality development environment have risen tremendously. One part of a good development environment are build tools, and Gulp.js -- being the JavaScript streaming build system -- is but one of the many choices a developer has nowadays. For many however, it's considered to be the best! In this three hour workshop, we will take a good look into Gulp and its possibilities. After our in-depth 3 hour course you will be able to do the following:

- Know how Gulp's API and the ecosystem of its plugins work
- Create parallel and sequential execution chains to be in total control of your build flow
- Know how 3rd party Node modules evolve around Gulp and how they can be integrated
- Create incremental builds to speed up your build time
- Know how streams work in Node.js
- And use stream arrays and merge streams to plumb together sophisticated pipelines doing all the work for you

Join us and become a build plumber!

More information
http://github.com/frontend-tooling
http://bit.ly/gulp-tool-book
http://fettblog.eu

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

November 10, 2015
Tweet

Transcript

  1. 5.

    Sass CoffeeScript LESS P o s t C S S

    H A M L J a d e U g l i f y E S 6 R e a c t J S B r o w s e r i f y A n g u l a r J S E m b e r C S S M i n J S L i n t ESHint ImageOptim Mocha Jasmine TypeScript
  2. 6.
  3. 7.
  4. 8.
  5. 9.
  6. 11.
  7. 22.
  8. 24.
  9. 39.

    Gulp API • gulp.task creates a new task • It

    requires to return either a Stream, a Promise or an Observable • gulp.src “globs” files and returns a stream of virtual file objects • each file can be piped through a process (jshint, uglify, less, etc.) • gulp.dest saves the file back to the file system
  10. 43.

    gulp.task('styles', function() { return gulp.src('app/styles/main.less') .pipe(less()) .pipe(minifyCSS()) .pipe(prefix()) .pipe(gulp.dest('dist/styles')); });

    we load a certain file (or files) Starting here, we have virtual files in-memory instead of real files we
  11. 46.
  12. 51.

    Gulp API • The second parameter of gulp.task is always

    a function. • gulp.series is a task function that runs tasks in sequential order. • gulp.parallel is a task function that starts every task concurrently • Both task functions accept task names and other functions as parameters. • They can be combined infinitly
  13. 59.

    Gulp API • gulp.watch creates a file watcher and listens

    to changes • changes include ‘change’, ‘add’, ‘unlink’ and others • BrowserSync is a development tool that can be fully integrated in Gulp. • Watchers trigger a browserSync.reload call
  14. 64.

    gulp.task('server', function(done) { bSync({ server: { baseDir: ['dist', 'app'] }

    }) done(); }); BrowserSync set up to start a dev server, serving dist and app statically
  15. 71.
  16. 75.

    filter files that have changed do performance heavy operations remember

    the old files and continue with the other ops
  17. 77.

    Gulp Plugins • gulp-cached and gulp-remember can be used to

    create file caches • The plugin filters non-changed files and ads them back to the stream once we are done with performance-heavy tasks • Additionally to that, we can use gulp.lastRun in Gulp 4 to filter files during globbing • gulp-newer allows us to do incremental copies/builds on a per-file basis
  18. 80.

    gulp.task('scripts', function () { return gulp.src('app/scripts/**/*.js') .pipe(cached('ugly')) .pipe(uglify()) .pipe(remember('ugly')) .pipe(concat('main.min.js'))

    .pipe(gulp.dest('dist/scripts')); }); once we are done, we remember all the other files we stored in the cache
  19. 81.
  20. 86.

    var b = browserify({ entries: ['_js/main.js'] }); var bundle =

    function() { return b.bundle() .pipe(source(‘main.js’)) .pipe(buffer()) .pipe(uglify()) .pipe(gulp.dest('js')); }
  21. 87.

    var b = browserify({ entries: ['_js/main.js'] }); var bundle =

    function() { return b.bundle() .pipe(source(‘main.js’)) .pipe(buffer()) .pipe(uglify()) .pipe(gulp.dest('js')); } b.bundle emits a stream. But no vinyl file objects
  22. 88.

    var b = browserify({ entries: ['_js/main.js'] }); var bundle =

    function() { return b.bundle() .pipe(source(‘main.js’)) .pipe(buffer()) .pipe(uglify()) .pipe(gulp.dest('js')); } vinyl-source-stream wraps the original stream into a vinyl file object
  23. 89.

    var b = browserify({ entries: ['_js/main.js'] }); var bundle =

    function() { return b.bundle() .pipe(source(‘main.js’)) .pipe(buffer()) .pipe(uglify()) .pipe(gulp.dest('js')); } vinyl-buffer converts the stream contents to a buffer for plugins who need such
  24. 92.

    What does it do? • Generates static HTML sites •

    From a templating engine • Can parse Markdown • Can parse HTML • Can create permalinks • For different types (posts, pages)
  25. 93.

    The stack • We use kramdown to convert Markdown to

    HTML • We use nujucks for our templating engine • We rename posts to feature blog permalink • We rename pages to resemble pretty URLs
  26. 102.

    gulp.task('default', function(cb) { var streams = elements.map(function(el) { return merge(

    gulp.src(el.dir + '/**.md').pipe(markdown()), gulp.src(el.dir + '/**.html') ).pipe(rename(el.renamefn)); }); return merge(streams).pipe(data(options)) .pipe(wrap(layoutStr)) .pipe(swig()) .pipe(gulp.dest('build')); });
  27. 103.

    gulp.task('default', function(cb) { var streams = elements.map(function(el) { return merge(

    gulp.src(el.dir + '/**.md').pipe(markdown()), gulp.src(el.dir + '/**.html') ).pipe(rename(el.renamefn)); }); return merge(streams).pipe(data(options)) .pipe(wrap(layoutStr)) .pipe(swig()) .pipe(gulp.dest('build')); }); we combine multiple sources to one stream
  28. 104.

    gulp.task('default', function(cb) { var streams = elements.map(function(el) { return merge(

    gulp.src(el.dir + '/**.md').pipe(markdown()), gulp.src(el.dir + '/**.html') ).pipe(rename(el.renamefn)); }); return merge(streams).pipe(data(options)) .pipe(wrap(layoutStr)) .pipe(swig()) .pipe(gulp.dest('build')); }); with Array.map and merge we can create stream arrays
  29. 105.
  30. 108.
  31. 109.