Improving your workflow

twitter.com/alexnewmngithub.com/alex.newman

alexnewman.io

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

Quick Facts

● 44,000 downloads a day● Used by

○ Bede Gaming○ Google○ Netflix○ Soundcloud

● Uses Node.js and Orchestrator.js● It’s open source!

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

Why use gulp?

● Code over config

Code over config

Why use gulp?

● Code over config

● Minimal API

● Uses streams

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

● Streams use ‘pipes’, which allow us to pass data through the stream.

●●● Streams are what makes gulp fast

Streams?

Why use gulp?

● Code over config

● Minimal API

● Uses streams

● Runs with maximum concurrency

Maximum Concurrency

● Runs tasks together using orchestrator● Can minify your js and css at the same time● Speed!!!

Why use gulp?

● Code over config

● Minimal API

● Uses streams

● Runs with maximum concurrency

● Fast!

gulp API

gulp.task

● Define a task name

● Set dependencies if required

● Can run multiple plugins

main.scss sass autoprefix min main.css

gulp

gulp

grunt...

gulp.task

gulp API

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

gulp.src

gulp API

gulp.dest

● Where the processed file should be saved

● Can be used with src’s base option

gulp API

gulp.watch

● Watch files and run tasks when files change

● Accepts globbing - **/*.js

gulp API

That’s it!

gulp

● Uses streams● Easy to maintain● Fast!● Runs concurrently● Fast growing

Gruntvs

gulp

● Uses streams● Easy to maintain● Fast!● Runs concurrently● Fast growing

Gruntvs● Has to run in order● Difficult to maintain● Slow(er)!● Writes to Temp files● More plugins● Paved the way

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

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

The power of gulp

The power of gulp

The future of gulp

● gulp 4 is in the line●●

gulp.parallel and gulp.series

The future of gulp

● gulp 4 is in the line●●● ES6

ES6 Support

The future of gulp

● gulp 4 is in the line●●● ES6● Error handling!

Gotchas

● Error handling● Errors break the stream, cancelling the

task● Can be intimidating● Easy to rely on gulp plugins

Summary

● Why should you use gulp?● Minimal API● gulp vs Grunt● The power of gulp● The future of gulp● Gotchas

alexnewman.io

github.com/alexnewmannn

twitter.com/alexnewmnAll code available on my github in the FrontendNE-Talk repository

Questions?