Gulp.js

Stream based build system

Code over configuration

Small idiomatic Node (npm) modules

Really simple api

Simple api

gulp.src()

gulp.dest()

gulp.watch()

gulp.task()

Src

    
    gulp.src('client/js/**/*.js') 

    gulp.src(['client/js/**/*.js', 'test/specs/**/*.js''])

    gulp.src('client/js/**/*.js', { base: 'client' })

Returns a readable stream

gulp.src(globs[, options])

Dest

    
    gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/templates'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

Taps out files from a stream

gulp.dest(path[, options])

Task

gulp.task('name', ['deps'], function(done) {

  return stream || promise;
  // ...or, call done()
  
});

gulp.task(name[, deps], fn)

Watch

gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event) {
  console.log(
    'File ' + event.path + ' was ' + event.type + ', running tasks...'
  );
});

gulp.watch(glob [, opts], tasks)

gulp.watch(glob [, opts, cb])

Typical build tools

The gulp way

Vinyl stream

DEMO

Gulp 4

New task engine

gulp.series(fn[, fn, fn ... n])

gulp.parallel(fn[, fn, … n])

Sample

    
    gulp.task('build',
            gulp.series(
                gulp.parallel('jshint', 'jscs'),
                gulp.parallel('wiredep','styles'),
                'optimize'
            )
    )

Tech Lightning talk

By fhelje

Tech Lightning talk

  • 361