@TheMattBruntIntro to Gulp

Intro to GulpThe Streaming Build System

“Automate and enhance your workflow”

@TheMattBruntIntro to Gulp

Before I talk about Gulp

@TheMattBruntIntro to Gulp

Task Runners

@TheMattBruntIntro to Gulp

Gulp vs Gruntvs Cake vs Broccoli vs Brunch

vs NPM scripts

Anyone else hungry?

@TheMattBruntIntro to Gulp

Don’t use Grunt! Use Gulp!

Don’t use Gulp! Use Grunt!

Don’t use either! Use NPM!

(why bother with anything, it’s all pointless when the robots take over…)

@TheMattBruntIntro to Gulp

What should I use?Whatever you want.

You’re the ones working with it. Choose what you like.

@TheMattBruntIntro to Gulp

Disadvantages?• More dependencies

• At the mercy of plugins supporting things • gulp-ruby-sass to use ruby-sass for example

• ‘Bloat’ • Gulp is a relative newcomer compared to Grunt

• Smaller install base than Grunt - though it’s catching

up • Pretty much everything here can be done in npm-scripts

@TheMattBruntIntro to Gulp

Grunt• Single Gruntfile

• + plugins • No code logic • Plugins based on a

configuration object

Gulp• Single Gulpfile

• + plugins • Relies on code logic via pipes • Configuration isn’t as ‘clean’ as

Grunt • It’s up to you how you want to

configure and write your file

They both essentially do the same thing, just in different ways.

@TheMattBruntIntro to Gulp

In your head, picture a build system

It should take files, modify them in a few ways, then output the results.

@TheMattBruntIntro to Gulp

You may have pictured something like this:

This is what Gulp does.

@TheMattBruntIntro to Gulp

Gulp uses streams and pipes

Gulp does nothing but provide some streams and a basic task system

Plugins do the rest

@TheMattBruntIntro to Gulp

Getting started with Gulp• Install Node.js (there’s multiple ways to do this) • CD to project directory and create package.json

• npm init # asks lots of questions

• echo {} > package.json # quick & dirty

• Install gulp globally • npm install -g gulp

• Install gulp to the project • npm install --save-dev gulp

• Create gulpfile.js and go from there!

@TheMattBruntIntro to Gulp

package.jsonNode packages!

@TheMattBruntIntro to Gulp

Installing plugins• npm install --save-dev package-name

• Configuration options for when using a plugin are plugin-

specific, docs / README on the package pages!

@TheMattBruntIntro to Gulp

Learn just 4 Gulp functions

@TheMattBruntIntro to Gulp

1

@TheMattBruntIntro to Gulp

gulp.src(globs[, options])

Emits a readable stream of files that matches the glob.

This is piped to other streams.

@TheMattBruntIntro to Gulp

2

@TheMattBruntIntro to Gulp

gulp.dest(path[, options])

Returns a writeable stream.

Files piped to this are written to the filesystem

@TheMattBruntIntro to Gulp

3

@TheMattBruntIntro to Gulp

gulp.task(name[, deps], fn)

Registers the function as a gulp task with a name

Can specify dependencies on other tasks

@TheMattBruntIntro to Gulp

4

@TheMattBruntIntro to Gulp

gulp.watch(glob, fn)

Runs the function whenever a file matching the glob changes.

@TheMattBruntIntro to Gulp

Congratulations!You are now an expert in using Gulp.

@TheMattBruntIntro to Gulp

The GulpfileWhere the magic happens

@TheMattBruntIntro to Gulp

gulpfile.js

@TheMattBruntIntro to Gulp

Best Practices?

@TheMattBruntIntro to Gulp

How should it be structured?• Split tasks into separate files and include them with a plugin. • Or just define all tasks in the file. • Use a separate config file. • Or include config within gulpfile.js

• Object • JSON

However you want.

@TheMattBruntIntro to Gulp

What can we do with it?• Pretty much anything you want. • Compile SASS / LESS / Stylus etc into CSS. • Compile CoffeeScript etc into JS. • Concatenate files. • Minify files. • Clean up / rename / move files. • Syncing of your browser across multiple devices. • Re-run tests. • and so on…

@TheMattBruntIntro to Gulp

Outcomes & Benefits• Performance gains:

• Concatenating files reduces the number of requests to fetch

assets for our site. • Minifying reduces file size of CSS / Images / JS.

Smaller files lead to faster page load times. • Portable.

• Setup once, commit gulpfile.js and dependencies, every dev

has the same setup. • Automatic re-running of tasks. • Easy to use.

@TheMattBruntIntro to Gulp

Favourite feature?

@TheMattBruntIntro to Gulp

File watchers.No more save file, switch to terminal, re-run task.

Repetitive & boring.

@TheMattBruntIntro to Gulp

DemoIt’s easier to see it in action.

@TheMattBruntIntro to Gulp

Talk through gulpfile.js

Configuration

Gulp utils

Run a task

See changes

File watchers

Browser sync

PHP Stuff!

@TheMattBruntIntro to Gulp

Links & info

http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/

http://xkcd.com/378/

https://github.com/Brunty/intro-to-gulp-talk/