It has been some time since JavaScript build tools like Grunt or Gulp were just the "next big thing" for web developers. Working without them is nearly unimaginable nowadays and it seems that there's almost no problem in our day to day workflow which cannot be solved by simply using just another plugin. But are build tools really the answer to everything? In this talk, we will take a look at the ten most common problems which seem to be unsolved by using just the build tool basics. We will create advanced building pipelines for our custom processes and find out reusable patterns which can be applied to similar issues.

1. Advanced JavaScript
Build Pipelines
with Gulp.js

2. Let's talk a
short bit about
the JS build tool
revolution

3. HTML
CSS
JavaScript

4. 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

8. 1530 lines of code
original Ant tasks used:
concat — copy — delete — mkdir

10. Maybe Java isn't the right
tool?
Java is to JavaScript what
Alf is to Gandalf

11. Grunt started a boom

12. Gruntfiles get long

13. Grunt tasks get slow:
lots of reads
and writes

14. One unmanageable horde
of (sometimes)
low quality plug-ins

15. And then came Gulp

16. React is in love with
Webpack

17. Ember.js digs Broccoli.js

18. Ember.js digs Broccoli.js

20. So… every community seems
to have its preference
Stick with your communities
preference!

21. For all the rest?
Gulp might be a good,
very good option

22. Disclaimer

23. I (occasionally) contribute to
Gulp

24. I'm writing a book on Gulp
http://bit.ly/gulp-tool-book
39% off with 39baumgar
coupon code!

25. gulp.src(…) gulp.dest(…)
Reads files Writes files

26. gulp.src(…) .pipe(uglify()) gulp.dest(…)

27. gulp.src(…) .pipe(uglify()) gulp.dest(…).pipe(concat())

28. task
manager
streaming
file
system
file watcher

29. gulp.task('scripts', function() {!
return gulp.src(‘src/**/*.js')!
.pipe(uglify())!
.pipe(concat('main.min.js'))!
.pipe(gulp.dest('dist'));!
});!
!
gulp.task('default', function(done) {!
gulp.watch(‘src/**/*.js', gulp.parallel(‘scripts'));!
done();!
});!

30. undertaker.task('scripts', function() {!
return vinyl.src(‘src/**/*.js')!
.pipe(uglify())!
.pipe(concat('main.min.js'))!
.pipe(vinyl.dest('dist'));!
});!
!
undertaker.task('default', function(done) {!
chokidar.watch(‘src/**/*.js', undertaker.parallel(‘scripts'));!
done();!
});!

31. so similar … yet so
different?
Gulp
Streams
Browserify
Streams

32. var source = require(‘vinyl-source-stream’);!
!
var b = browserify({!
entries: ['_js/main.js']!
});!
!
var bundle = function() {!
return b.bundle()!
.pipe(source(‘main.js’))!
.pipe(gulp.dest('js'));!
}!
!
gulp.task(‘bundle’, bundle);!

33. This also goes the
other way around…

34. var app = express();!
var router = express.Router();!
!
router.get('/*', function(req, res) {!
var stream = request('http://host.to.forward.to' + req.originalUrl);!
stream.pipe(res);!
stream!
.pipe(source('.' + req.originalUrl))!
.pipe(gulp.dest('./cachedir'));!
});!
!
app.use(express.static('_site'));!
app.use(express.static('cachedir'));!
app.use(router);!

35. var app = express();!
var router = express.Router();!
!
router.get('/*', function(req, res) {!
var stream = request('http://host.to.forward.to' + req.originalUrl);!
stream.pipe(res);!
stream!
.pipe(source('.' + req.originalUrl))!
.pipe(gulp.dest('./cachedir'));!
});!
!
app.use(express.static('_site'));!
app.use(express.static('cachedir'));!
app.use(router);!

36. So start thinking
streams …

37. Multiple input formats
return gulp.src(‘src/**/*.coffee)!
.pipe(coffee())!
.pipe(uglify())!
.pipe(concat(‘main.js’))!
.pipe(gulp.dest(‘build’))!

38. Multiple input formats
return gulp.src(‘src/**/*.js)!
.pipe(uglify())!
.pipe(concat(‘main.js’))!
.pipe(gulp.dest(‘build’))!

39. Multiple input formats
return gulp.src(‘src/**/*.js)!
.pipe(uglify())!
.pipe(concat(‘main.js’))!
.pipe(gulp.dest(‘build’))!
the same!

40. Multiple input formats
And actually, you just want
one bundle in the end

41. What if we could
reuse parts of the
stream?

42. return gulp.src(‘app1/src/**/*.coffee’)!
.pipe(coffee())!
.pipe(uglify()!
.pipe(concat(‘main.js’))!
.pipe(gulp.dest('build'));!

43. var merge = require(‘merge2’);!
!
return merge(gulp.src(‘app1/src/**/*.coffee’)!
.pipe(coffee()),!
gulp.src(‘app1/src/**/*.js’))!
.pipe(uglify()!
.pipe(concat(‘main.js’))!
.pipe(gulp.dest('build'));!

44. var merge = require(‘merge2’);!
!
return gulp.src(‘app1/src/**/*.coffee’)!
.pipe(markdown()),!
.pipe(gulp.src(‘app1/src/**/*.js’), {passthrough: true})!
.pipe(rename(blogFn))!
.pipe(wrap(layoutStr))!
.pipe(swig())!
.pipe(gulp.dest('build'));!

45. Multiple bundles
And now we need this
over and over again
for all our applications…

46. var elems = [!
{ dir: ‘app1’, bundleName: ‘app1.min.js’ },!
{ dir: ‘app2’, bundleName: ‘app2.min.js’ }!
];!

47. !
var streams = elems.map(function(el) {!
return gulp.src(el.dir + ‘src/**/*.coffee’)!
.pipe(coffee()),!
.pipe(gulp.src(el.dir + ‘src/**/*.js’), {passthrough: true})!
.pipe(uglify())!
.pipe(concat(el.bundleName))!
});!
return merge(streams)!
.pipe(gulp.dest('build'));!

48. Incremental
builds

49. Some tasks take long
gulp.src(‘scripts/*.js’)!
.pipe(uglify())!
.pipe(gulp.dest())!
.pipe(concat())!
Too much is going on!
Each change: Uglify all
the files?

50. filter files
that have changed
do performance
heavy operations
remember the
old files
and continue
with the other ops

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

52. 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'));!
});!
we use the cache to
check if files have
changed

53. 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

54. gulp.task('lint', function () {!
return gulp.src(‘src/**/*.js’)!
.pipe(jshint())!
.pipe(jshint.reporter(‘default’))!
.pipe(jshint.reporter(‘fail’));!
});!

55. gulp.task('lint', function () {!
return gulp.src(‘src/**/*.js’, { since: gulp.lastRun(‘lint’) })!
.pipe(jshint())!
.pipe(jshint.reporter(‘default’))!
.pipe(jshint.reporter(‘fail’));!
});!

56. gulp.task('images', function () {!
return gulp.src(‘src/images/**/*.*’)!
!
.pipe(imagemin())!
.pipe(gulp.dest(‘dist’));!
});!

57. gulp.task('images', function () {!
return gulp.src(‘src/images/**/*.*’)!
.pipe(newer(‘dist’))!
.pipe(imagemin())!
.pipe(gulp.dest(‘dist’));!
});!

58. When architecting
Gulp build pipelines…

59. Separate the process
from the content

60. Think about how the
basic pipeline would
look like

61. Think about how
your data looks like

62. And then posh your pipes up
with stream tools that
change your data accordingly

64. @ddprrt

65. Material

66. Workshop files
https://github.com/frontend-tooling
https://github.com/frontend-tooling/sample-project-gulp
https://github.com/frontend-tooling/static-site-generator
http://fettblog.eu
http://speakerdeck.com/ddprrt

67. Reading Material
http://bit.ly/gulp-tool-book
39% off with 39baumgar
coupon code!