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

1. Plumbin' Pipelines
with Gulp.js

2. @Dynatrace
@Ruxit

3. @ddprrt
fettblog.eu

4. HTML
CSS
JavaScript

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

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

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

13. Grunt started a boom

14. Gruntfiles get long

15. Grunt tasks get slow

16. lots of reads
and writes

17. And then came Gulp

18. Disclaimer

19. I (occasionally) contribute
to Gulp

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

21. I don't know Java anymore
Java is to JavaScript what
Alf is to Gandalf

22. Let's go!

23. The ecosystem

25. Runtime environment
JavaScript

26. Package System for Node
Host of all things Gulp plugins

27. CLI Gulpfile
PluginA
PluginA

28. CLI Gulpfile
PluginA
PluginA
starts

29. CLI Gulpfile
PluginA
PluginA
loadsstarts

30. CLI Gulpfile
PluginA
PluginA
loadsstarts
uses

31. npm install -g gulp-cli
npm init
npm install --save-dev gulp
touch gulpfile.js

32. npm install -g gulpjs/gulp-cli#4.0
npm init
npm install --save-dev gulpjs/gulp#4.0
touch gulpfile.js

33. The basics:
Streams

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

35. gulp.src(…) gulp.dest(…)

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

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

38. to the command line!

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

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

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

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

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

44. gulp.task('styles', function() {
return gulp.src('app/styles/main.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(prefix())
.pipe(gulp.dest('dist/styles'));
});
and pipe it through a
series of operations

45. gulp.task('styles', function() {
return gulp.src('app/styles/main.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(prefix())
.pipe(gulp.dest('dist/styles'));
});
before we save it
again on the "real" file system

46. Tasks

47. scripts styles lint

48. scripts
styles
lintgulp.parallel

49. scripts
styles
lint
gulp.parallel
gulp.series

50. to the command line!

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

52. gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);

53. gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);
runs in series

54. gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);
runs in parallel

55. A development
environment

56. gulp.watch
scripts
*.js

57. Bowser-Sync!
r

58. to the command line!

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

60. function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}

61. function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}
watches this Glob pattern

62. function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}
starts this task on
change, unlink, add

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

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

65. gulp.watch('dist/**/*', bSync.reload);
And a watcher that triggers a
reload

66. Incremental
builds

67. Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())

68. Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())

69. 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?

70. Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())

72. filter files
that have changed

73. filter files
that have changed
do performance
heavy operations

74. filter files
that have changed
do performance
heavy operations
remember the
old files

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

76. to the command line!

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

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

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

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

81. Part II

82. A short
source map interlude

83. Browserify
(for Babel/React)

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

85. Why not both??

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

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

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

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

90. Stream arrays
and merge Streams

91. A static
site generator

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)

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

94. In pipes
gulp.src(‘posts/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())

95. In pipes
gulp.src(‘posts/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
gulp.src(‘posts/*.html')
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())

96. In pipes
gulp.src(‘posts/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
gulp.src(‘posts/*.html')
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
the same!

97. In pipes
gulp.src(‘pages/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
gulp.src(‘pages/*.html')
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())

98. In pipes
gulp.src(‘pages/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
gulp.src(‘pages/*.html')
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
the same!

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

100. to the command line!

101. to the command line!

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

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

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

105. Material

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

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

109. @ddprrt