Slide 1
Slide 1 text
Plumbin' Pipelines
with Gulp.js
Slide 2
Slide 2 text
@Dynatrace
@Ruxit
Slide 3
Slide 3 text
@ddprrt
fettblog.eu
Slide 4
Slide 4 text
HTML
CSS
JavaScript
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
1530 lines of code
original Ant tasks used:
concat — copy — delete — mkdir
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Let's talk a
short bit about
the JS build tool
revolution
Slide 13
Slide 13 text
Grunt started a boom
Slide 14
Slide 14 text
Gruntfiles get long
Slide 15
Slide 15 text
Grunt tasks get slow
Slide 16
Slide 16 text
lots of reads
and writes
Slide 17
Slide 17 text
And then came Gulp
Slide 18
Slide 18 text
Disclaimer
Slide 19
Slide 19 text
I (occasionally) contribute
to Gulp
Slide 20
Slide 20 text
I'm writing a book on Gulp
http://bit.ly/gulp-tool-book
39% off with 39baumgar
coupon code!
Slide 21
Slide 21 text
I don't know Java anymore
Java is to JavaScript what
Alf is to Gandalf
Slide 22
Slide 22 text
Let's go!
Slide 23
Slide 23 text
The ecosystem
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Runtime environment
JavaScript
Slide 26
Slide 26 text
Package System for Node
Host of all things Gulp plugins
Slide 27
Slide 27 text
CLI Gulpfile
PluginA
PluginA
Slide 28
Slide 28 text
CLI Gulpfile
PluginA
PluginA
starts
Slide 29
Slide 29 text
CLI Gulpfile
PluginA
PluginA
loads
starts
Slide 30
Slide 30 text
CLI Gulpfile
PluginA
PluginA
loads
starts
uses
Slide 31
Slide 31 text
npm install -g gulp-cli
npm init
npm install --save-dev gulp
touch gulpfile.js
Slide 32
Slide 32 text
npm install -g gulpjs/gulp-cli#4.0
npm init
npm install --save-dev gulpjs/gulp#4.0
touch gulpfile.js
Slide 33
Slide 33 text
The basics:
Streams
Slide 34
Slide 34 text
gulp.src(…) gulp.dest(…)
Reads files Writes files
Slide 35
Slide 35 text
gulp.src(…) gulp.dest(…)
Slide 36
Slide 36 text
gulp.src(…) .pipe(uglify()) gulp.dest(…)
Slide 37
Slide 37 text
gulp.src(…) .pipe(uglify()) gulp.dest(…)
.pipe(concat())
Slide 38
Slide 38 text
to the command line!
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
gulp.task('styles', function() {
return gulp.src('app/styles/main.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(prefix())
.pipe(gulp.dest('dist/styles'));
});
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
Tasks
Slide 47
Slide 47 text
scripts styles lint
Slide 48
Slide 48 text
scripts
styles
lint
gulp.parallel
Slide 49
Slide 49 text
scripts
styles
lint
gulp.parallel
gulp.series
Slide 50
Slide 50 text
to the command line!
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);
Slide 53
Slide 53 text
gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);
runs in series
Slide 54
Slide 54 text
gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts'),
‘server'
)
);
runs in parallel
Slide 55
Slide 55 text
A development
environment
Slide 56
Slide 56 text
gulp.watch
scripts
*.js
Slide 57
Slide 57 text
Bowser-Sync!
r
Slide 58
Slide 58 text
to the command line!
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}
Slide 61
Slide 61 text
function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}
watches this Glob pattern
Slide 62
Slide 62 text
function watcher(done) {
gulp.watch('styles/**/*.less', gulp.parallel(‘styles’));
done();
}
starts this task on
change, unlink, add
Slide 63
Slide 63 text
gulp.task('server', function(done) {
bSync({
server: {
baseDir: ['dist', 'app']
}
})
done();
});
Slide 64
Slide 64 text
gulp.task('server', function(done) {
bSync({
server: {
baseDir: ['dist', 'app']
}
})
done();
}); BrowserSync set up to start
a dev server, serving dist and
app statically
Slide 65
Slide 65 text
gulp.watch('dist/**/*', bSync.reload);
And a watcher that triggers a
reload
Slide 66
Slide 66 text
Incremental
builds
Slide 67
Slide 67 text
Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())
Slide 68
Slide 68 text
Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())
Slide 69
Slide 69 text
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?
Slide 70
Slide 70 text
Some tasks take long
gulp.src(‘scripts/*.js’)
.pipe(uglify())
.pipe(gulp.dest())
.pipe(concat())
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
filter files
that have changed
Slide 73
Slide 73 text
filter files
that have changed
do performance
heavy operations
Slide 74
Slide 74 text
filter files
that have changed
do performance
heavy operations
remember the
old files
Slide 75
Slide 75 text
filter files
that have changed
do performance
heavy operations
remember the
old files
and continue
with the other ops
Slide 76
Slide 76 text
to the command line!
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
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'));
});
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
Part II
Slide 82
Slide 82 text
A short
source map interlude
Slide 83
Slide 83 text
Browserify
(for Babel/React)
Slide 84
Slide 84 text
so similar … yet so
different?
Gulp
Streams
Browserify
Streams
Slide 85
Slide 85 text
Why not both??
Slide 86
Slide 86 text
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'));
}
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
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
Slide 89
Slide 89 text
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
Slide 90
Slide 90 text
Stream arrays
and merge Streams
Slide 91
Slide 91 text
A static
site generator
Slide 92
Slide 92 text
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)
Slide 93
Slide 93 text
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
Slide 94
Slide 94 text
In pipes
gulp.src(‘posts/*.md')
.pipe(kramdown())
.pipe(wrap())
.pipe(nunjucks())
.pipe(rename())
.pipe(gulp.dest())
Slide 95
Slide 95 text
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())
Slide 96
Slide 96 text
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!
Slide 97
Slide 97 text
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())
Slide 98
Slide 98 text
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!
Slide 99
Slide 99 text
What if we could
reuse parts of the
stream?
Slide 100
Slide 100 text
to the command line!
Slide 101
Slide 101 text
to the command line!
Slide 102
Slide 102 text
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'));
});
Slide 103
Slide 103 text
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
Slide 104
Slide 104 text
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
Slide 105
Slide 105 text
Material
Slide 106
Slide 106 text
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
Slide 107
Slide 107 text
Reading Material
http://bit.ly/gulp-tool-book
39% off with 39baumgar
coupon code!
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
@ddprrt