5. @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…)
7. @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
8. @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.
9. @TheMattBruntIntro to Gulp
In your head, picture a
build system
It should take files, modify them in a few ways,
then output the results.
11. @TheMattBruntIntro to Gulp
Gulp uses streams
and pipes
Gulp does nothing but provide some streams and a
basic task system
Plugins do the rest
12. @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!
14. @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!
28. @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.
29. @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…
30. @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.
34. @TheMattBruntIntro to Gulp
Talk through gulpfile.js
Configuration
Gulp utils
Run a task
See changes
File watchers
Browser sync
PHP Stuff!
35. @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/
