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!

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

gulp.js introduction

http://slides.com/corybrown/deck-7/live#/