Upload
matt-brunt
View
167
Download
2
Embed Size (px)
Citation preview
@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/