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

gulp.js introduction

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

Made with Slides.com