JS Task Runners
Grunt/Gulp
http://slides.com/eatrocks/js-task-runners/live
What is a task runner?
"A task runner is a thing that does stuff."
Bruce Campbell, Just now
A JavaScript automation tool
A JavaScript build tool
Common Use
- Run tests (you do have tests right?)
- Minify JavaScript, HTML, CSS
- Remove logging statements from code
- Compile SASS into CSS
- Cache bust
- Copy and delete files
- Compress images
- Check code quality
- Run a server
- Refresh the browser on code change
- Build Angular template cache
- Mitigate Angular weirdness
- ...
But when it's time to do the actual "stuff", gulp and grunt can't do diddly!
[insert picture of Conductor here]
It's all about the plugins!
Gulp 1,409
Grunt 4,403
Tasks
Tell Grunt and Gulp what to run by defining tasks
concatenate some JS files
src/one.js
src/two.js
app.js
bruce.js
> gulp bruce
...
> grunt bruce
...
Environment Specific Tasks
> gulp stage
...
Grunt
- configuration
- everything is a plugin
Gulp
- code
- everything is code
(still have plugins) - stream based
a little more 'bout gulp
Task Dependency
By default tasks run concurrently, for serial behavior
- give it a hint to tell it when the task is done
- tell it that a task depends on completion of another
var gulp = require('gulp');
// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
// do stuff -- async or otherwise
// if err is not null and not undefined, the orchestration will stop
cb(err);
});
// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
// task 'one' is done now
});
gulp.task('default', ['two']);
// or specify both - 'one' will not run twice
gulp.task('stuff', ['one', 'two']);
Fast
Both Grunt and Gulp are fast
Gulp is built on Node Streams = faster
Clean
less intermediate files
another benefit of streams
brought to you by the letter g
and by gulpjs.com
- getting started
- api docs
- recipes
- articles
- plugins