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

1. Concatenation
2. Minification

Build Version 0 (Winter 2012)

Do all the things in Java!

Tools

1. Concatenation: combiner.jar (circa 2009 fake sprockets in Java)
2. Minification: Closure Compiler

using ant...

Problem

Ant is ugly.

More observations

1. It's hard to find your way around ant if you're new.
2. Ant is hard to extend.
3. Ant just isn't designed for front-end engineering.
4. Sometimes you just want a scripting language.

Build Version 1 (Spring 2012)

Do (some) things node.js!

We used jake

jake is a JavaScript build tool, similar to Make or Rake. Built to work with Node.js.

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 favors the “configuration” approach for tasks for one simple reason: people seem to prefer a more declarative “configuration” style approach to a “scripting” approach.

-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