JavaScript Optimization: Grunt.js
For the past year or so, I’ve been engrossed in all things JavaScript. It’s been easy ( and incredibly fun ) to get lost in an endless sea of plugins, frameworks, and widgets. The problem I kept finding myself in was then optimizing all that great code for my personal and professional projects. Do I make use of a JavaScript loader to optimize the loading in of disparate scripts, or do I combine files and minify, and if that’s the best way, how do I keep it clean enough that it’s easy to maintain? Many people, more knowledgeable than me have tackled this issue, and I don’t intend to get into a flame war over which approach is best, but I’d like to share with you three recent discoveries that have made my task of optimizing JavaScript files for websites and applications quick and easy.
Good: Scratch my own itch ( Minimi )
In an attempt to solve this problem for myself, I wrote a small Ruby script, that watches a particular directory, and, like SASS and CoffeeScript compilers, when the file is saved, it runs it through the Google Compiler ( Check out Minimi on Github ). This worked great, but the fact that it didn’t concatenate files became an issue.
Better: The GUI ( CodeKit for Mac )
CodeKit for Mac, which is still in beta, is ideal for those who don’t want to have to mess with the command line. It provides a visual interface to optimize/compile JavaScript, CoffeeScript, Sass, and Less. For my purporses though, I was interested in it specifically for JavaScript. Essentially, you register a directory to watch within the app. You can drag and drop files in the order you’d like them to concatenate, define which files should have syntax checking (using JSLint or JSHint), and at the end you can minify it all using UglifyJS. The best part is, that like SASS and CoffeeScript, the app will watch this directory and run this process every time you save. The app does all this quite well, so if you’re not comfortable using Terminal, I urge you to give Codekit a look.
Best: Open-Source ( Grunt.js )
While CodeKit is great, I knew that if I wanted to use this tool, and be able to share code with my team, I couldn’t expect everyone to pay for an app. I spent a few days looking at build scripts, but none of them felt just right. Enter @cowboy and his terrific open-source contribution, Grunt.js. Grunt.js is a perfect combination of the previous two approaches. Grunt runs the code through JSHint, concatenates files in an order that you specify, minifies code using UglifyJS, performs unit tests using nodeunit, and it will do it all every time you save per a watch command. All of the instructions are defined in a text-based config file. While I haven’t integrated testing into my daily workflow, I can attest that Grunt’s lint, concatenate, minification, and watch commands have really made the entire process of JavaScript optimization a breeze ( Check out my typical gruntfile on Github ).
I’ve also written a little AppleScript that given my place in the Finder, the script will open Terminal, cd to the appropriate directory, kick off Grunt.js’s watch command for that project, and open that directory up in Sublime Text 2 ( Check out Grunt Here on Github ). If you’re an Alfred user, you’re going to love this.
As you can see, this is something that had been bothering me for some time. Initially I thought code minification on save was all that I needed, and I was able to cobble enough Ruby together to make it all happen, but CodeKit’s GUI allowed for so much more. Ultimately I found that in a team-based environment, Grunt.js worked best of all.
If you have any questions, corrections, or even if you have tips for me, please don’t hesitate to reach out on Twitter. As always, thanks for reading!
