Javascript build tool similar to Compass?

Question

I'm look for a build tool that behaves like Compass in that it watches a folder(s) and then concatenates, minifies and produces a single output file. I would like to be able to specify the order of the files using a config.

I currently use CodeKit (http://incident57.com/codekit/) which does this perfectly. But I have had issues with the JSON config file in the past which has meant I lost which javascript files were included, and also the order.

Answer 1

There are both Yeoman and Grunt.

I would think that Yeoman is the easiest, it is build upon Grunt and with yeoman server you can get live reloading and compiling of both JS and CSS files. It also support other things. If you only want live watching and minify ect. of files you can use yeoman watch. It requres that you setup a Gruntfile.js, but there are some nice examples.

You can also just use Grunt.js, this will require you to install some extra tasks, but this is not a big problem.

So in short with youman you get some extra features out of the box, but it is build upon Grunt and I can recommend both. They work via a commandline interface, but it is pretty easy. Check out their websites, and try them out, it's free!

Youtube intro to Yeoman, with Addy Osmani

Answer 2

A good solution would be to use require.js as your module loader and dependency management, that way you'll never lost track of what's included and in what order it should be included in the final build. If you want to have a watch task you could use MimosaJS (wich use require.js and uglify) and use the "watch" command with appropriate configurations: http://mimosajs.com/optimization.html.