There was a time when we didn't need JavaScript build tools

But we keep writing more JavaScript...

Flite started writing a lot more front-end JavaScript

We needed a way to manage the mess.

We wanted

Build Version 0 (Winter 2012)

Do all the things in Java!

Tools

using ant...

Problem

Ant is ugly.

More observations

Build Version 1 (Spring 2012)

Do (some) things node.js!

We used jake

jake is a step in the right direction.

We started writing lots of jake tasks

desc('This is the default task.');
task('default', function (params) {
  console.log('This is the default task.');
});
						

We started using lots of npm packages

This makes writing build tasks easier.

• knox (Amazon S3 Uploading)
• rimraf (native node `rm -rf`)
• node-glob (fancy file matching!)
• JSHint(code linting)
• UglifyJS (minification!)

Problem

We ended up with a 1000+ line Jakefile we couldn't reuse.

Build Version 2 (Summer 2012)

Do all the things in node.js!

We couldn't help but notice this thing called grunt.js

We weren't the only ones.

grunt was doing all the stuff we were doing

In 5 lines of code

grunt.initConfig({
  min: {
    dist: {
      src: ['src/source1.js', 'src/source2.js'],
      dest: 'dist/built.min.js'
    }
  }
});
						

"Configuration over Scripting"

-grunt.js author @cowboy (Ben Alman)

Grunt is balanced

Lots of common tasks and plugins that you can configure in a JSON object, but you also can script with the full power of node.js.

Grunt can load NPM plugins!

// Load some grunt tasks we’ve developed from the npm package grunt-barkeep.
grunt.loadNpmTasks('grunt-barkeep');
// Load grunt-shell
grunt.loadNpmTasks('grunt-shell');
// Load grunt-jasmine
grunt.loadNpmTasks('grunt-jasmine');
						

It's easy to create your own plugins.

Check out gruntjs.com

Plugins we use (and like)

• grunt-barkeep: our special sauce (s3, ducksboard, snockets)!
• grunt-shell: execute shell tasks!
• grunt-s3: send stuff to Amazon S3!
• grunt-jasmine: run jasmine tests headlessly in Phantom JS!**

It's easy to create custom tasks in grunt.

It bundles underscore, async, logging, console coloring, file utilities, and more.

var js = grunt.file.expandFiles(task.file.src);
// Hey, async is available in grunt.utils.
grunt.utils.async.forEach(js, function (fn, callback) {
    // ...
    if (err) {
    	// Fatal error logging
    	grunt.fail.fatal(err);
    }
});
						

The Future: grunt 0.4.0

Coming soon?

• Requires node > 0.8.0
• Externalizes a lot of plugins in the gruntjs github repository
• Lots of bug fixes and new features