Gulp screencast overview

Published 2016-09-28

Depth table of contents of one of the most popular screencast about utility for managing tasks.

What is Gulp? Compare with Webpack.

What is Gulp?

  1. Gulp as a “streaming build system”, and moreover, it’s a utility for declaring tasks 0:10
  2. Example gruntfile.js0:53
  3. Comparing with Grunt. 2:50
    1. gruntfile.js vs gruntfile.js
    2. More compact config
    3. Virtual File System - Vinyl FS. No temp folders
    4. Power of streams, streams parallelism
  4. Comparing with Webpack 10:10
    1. Deps: CommonJS, AMD, ES2015
    2. Dynamic loading
    3. CommonsChungPlugin
    4. APIs
  5. Webpack + Gulp = 💕 16:45
    1. Tasks: Gulp
    2. JS Build: Webpack

Install and task running

  1. Installing strategies: local vs global 0:22
  2. Installing v4 npm i -D gulpjs/gulp.git#4.0
  3. First task 3:49
    1. Callback for finish async operation
    2. Task name as function name
    3. Separate tasks with namespace deploy:production
    4. Strategies for finish async operations
    5. gulp.series and gulp.parallel

Streams Vinyl-FS

  1. Example streams with coping files 0:45
  2. gulp.src and gulp.dest output as readable/writable streams of instance Vinyl-FS 1:05
  3. Log working files .on('data', (file) => file) 1:48
  4. File getter properties 3:10
  5. Control gulp.dest output 4:45
  6. Module minimatch and popular pattens 6:48
  7. Performance issue with globs 9:13
  8. Summary 11:50

Basic build for styles

  1. App structure 0:25
  2. Declaring task for stylus 1:13
  3. Change destination directory 5.40
  4. Concat files 7:10
  5. Log info with gulp-debug 7:50
  6. Create main.styl 10:31
  7. Add source maps 11:30
  8. Generate source maps only in dev mode 15:05
  9. Using gulp-if 17:05
  10. Create clean task with del 19:05
  11. Create copy task with gulp.parallel 20:24
  12. Result in browser with node-static 21:55
  13. Summary 23:18

Incremental build, watch

  1. Create gulp.watch for styles 0:30
  2. What does “incremental build” actually mean? Caching 1:55
  3. Create gulp.watch for assets with caching with { since: gulp.lastRun('taskName') } 3:55
  4. Module chokidar and deleting files with watch 6:49
  5. Decoupling watch-es into separate task 8:32
  6. Summary 9:32

Incremental and performance

  1. Filter new files for first task run with gulp-newer 0:36
  2. Problem with gulp-remember on example with gulp-autoprefixer 3:57
  3. Problem with returning deleted files from IDE, using gulp-cached as alternative of since 10:10
  4. Summary 15:20

Browser auto-reloading, browser-sync

  1. We don’t want to every time hit F5! Flow overview 0:14
  2. Create sync task with browser-sync 1:34

Error handling

  1. Make an error 0:20
  2. Was error couched? 1:25
  3. Notification for an error with gulp-notify 2:51
  4. Catch all errors on task with gulp-plumber 6:30
  5. Solution with multipipe 9:50

Creating plugins with “through2”

  1. What we need to start 0:29
  2. A real example 3:41

More complex stream with “eslint”, “gulp-if”, “stream-combiner2”

  1. Example with pre-commit 1:55
  2. Optimize repeatable checks 4:08
  3. Performance summary 14:50

How we know Node.JS streams?

  1. A small test 0:20
  2. Why it isn’t work? 1:05
  3. Fix the “pause” problem 4:00

Structure of “gulpfile.js”

  1. We have problems, don’t we? 0:20
  2. A solution is task decomposition 1:50
  3. Adding gulp-load-plugins 5:05
  4. Result after refactoring 6:50

A real example: styles, assets, sprites, production

  1. Goal and app structure 0:15
  2. Improving build of styles and assets 1:55
  3. A typical problem with preprocessors with src and fixing with resolver 4:03
  4. Working with sprites using gulp-svg-sprites 6:20
  5. Add production mode: minify with gulp-cssnano, resource hash with gulp-rev and gulp-rev-replace 15:13
  6. Do we need to use long-term hashing for images? 22:17
  7. Summary 25:35

Integration with Webpack

  1. Summary 27:16