Slide 1
Slide 1 text
Improving your workflow
twitter.com/alexnewmn
github.com/alex.newman
alexnewman.io
Slide 2
Slide 2 text
Improving your workflow
● Why should you use gulp?
● gulp API
● gulp vs Grunt
● The power of gulp
● The future of gulp
● Gotchas
● Questions at the end
Slide 3
Slide 3 text
Quick Facts
● 44,000 downloads a day
● Used by
○ Bede Gaming
○ Google
○ Netflix
○ Soundcloud
● Uses Node.js and Orchestrator.js
● It’s open source!
Slide 4
Slide 4 text
Why another task runner?
● gulp aims to be simple for users
● gulp plugins should do one thing well
● Can work with existing node modules
● Grunt was great but did a few things wrong...
Slide 5
Slide 5 text
Why use gulp?
● Code over config
Slide 6
Slide 6 text
Code over config
Slide 7
Slide 7 text
Why use gulp?
● Code over config
● Minimal API
● Uses streams
Slide 8
Slide 8 text
Streams?
“If you dig a trench on a hill and
fill up the high end using a water
hose the water will run down the
hill along the trench”
Tim Caswell - HowToNode.org
Slide 9
Slide 9 text
● Streams use ‘pipes’, which allow us to pass
data through the stream.
●
●
● Streams are what makes gulp fast
Streams?
Slide 10
Slide 10 text
Why use gulp?
● Code over config
● Minimal API
● Uses streams
● Runs with maximum concurrency
Slide 11
Slide 11 text
Maximum Concurrency
● Runs tasks together using orchestrator
● Can minify your js and css at the same time
● Speed!!!
Slide 12
Slide 12 text
Why use gulp?
● Code over config
● Minimal API
● Uses streams
● Runs with maximum concurrency
● Fast!
Slide 13
Slide 13 text
gulp API
Slide 14
Slide 14 text
gulp.task
● Define a task name
● Set dependencies if required
● Can run multiple plugins
main.scss sass autoprefix min main.css
Slide 15
Slide 15 text
gulp
Slide 16
Slide 16 text
gulp
grunt...
Slide 17
Slide 17 text
gulp.task
Slide 18
Slide 18 text
gulp API
Slide 19
Slide 19 text
gulp.src
● Specify the file to be processed
● Can be a string or an array of files
● Can change the base of the file
● Accepts globbing - **/*.scss
Slide 20
Slide 20 text
gulp.src
Slide 21
Slide 21 text
gulp API
Slide 22
Slide 22 text
gulp.dest
● Where the processed file should be saved
● Can be used with src’s base option
Slide 23
Slide 23 text
gulp API
Slide 24
Slide 24 text
gulp.watch
● Watch files and run tasks when files change
● Accepts globbing - **/*.js
Slide 25
Slide 25 text
gulp API
That’s it!
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
gulp
● Uses streams
● Easy to maintain
● Fast!
● Runs concurrently
● Fast growing
Grunt
vs
Slide 28
Slide 28 text
gulp
● Uses streams
● Easy to maintain
● Fast!
● Runs concurrently
● Fast growing
Grunt
vs
● Has to run in order
● Difficult to maintain
● Slow(er)!
● Writes to Temp files
● More plugins
● Paved the way
Slide 29
Slide 29 text
Task runners at Bede
● Switched to gulp in August 2014
● Build times were almost twice as fast with
twice as many files to process
● Can use arrays instead of specifying each
file
● gulp in TeamCity for build tasks
Slide 30
Slide 30 text
The power of gulp
● gulp can run a lot of tasks and processes
easily and very fast
● Html minification, css minification, js linting,
image compression, clean files, browserify
bundles…
● Can use plugins without importing each one
Slide 31
Slide 31 text
The power of gulp
Slide 32
Slide 32 text
The power of gulp
Slide 33
Slide 33 text
The future of gulp
● gulp 4 is in the line
●
●
Slide 34
Slide 34 text
gulp.parallel and gulp.series
Slide 35
Slide 35 text
The future of gulp
● gulp 4 is in the line
●
●
● ES6
Slide 36
Slide 36 text
ES6 Support
Slide 37
Slide 37 text
The future of gulp
● gulp 4 is in the line
●
●
● ES6
● Error handling!
Slide 38
Slide 38 text
Gotchas
● Error handling
● Errors break the stream, cancelling the
task
● Can be intimidating
● Easy to rely on gulp plugins
Slide 39
Slide 39 text
Summary
● Why should you use gulp?
● Minimal API
● gulp vs Grunt
● The power of gulp
● The future of gulp
● Gotchas
Slide 40
Slide 40 text
alexnewman.io
github.com/alexnewmannn
twitter.com/alexnewmn
All code available on my github in the FrontendNE-Talk repository
Slide 41
Slide 41 text
Questions?