JavaScript build tools and why you need them?

Why do we need a build tool to begin with? If you find yourself asking this question, maybe it’s time you refresh your memory on Continuous Integration. Build tools are essential to large, complex application development and development teams. Even if you are a solo developer, you can benefit from using build tools, besides automation is cool! Build tools enable you to have a reproducible build, independent of an IDE or dedicated machine. It allows you to runs static analysis tools, minify JavaScript/CSS for production, unit tests, organize and structure your projects, asset compilation and the ability to package everything up into a web archive. Another advantage is the ability to maintain a nightly build for people to test, or find out quickly if you broke tests without having to remember to run tests (as you should) and wait for them to complete. It’s basically a utility that can save you time and heartaches, besides why do all that manually?

The build tool that I’m familiar with the most is Apache Ant. It has been my go to build tool for building pure AS3 projects in Flash Builder for years, but things are about to change. On my quest for finding the perfect MVC JavaScript framework, Grunt.js kept sprouting up in conversations. What is this Grunt.js that you speak of? I would like to take a moment and state that If Grunt.js did not peak my curiosity I would have continued with ANT, that being said I did come across a great post on how to use ANT to build your web apps.

So, what is Grunt.js? Basically, Grunt’s a task-based command line build tool for JavaScript projects built on top of the Node.js platform. It can handle all the cool things that a build tool should do and some. I mean since it’s built on top of Node.js you can leverage all the power of Node in your tasks, if you wanted to. Grunt.js has a strong community and the learning curve for using and customizing Grunt is so small that there is already hundreds of written tasks (plugins) available for use today. As a tech prerequisite I always ask, “Who else is using this tool?”, well a lot of companies, Adobe, JQuery, Twitter, to name a few. If you are stepping into JavaScript from ActionScript I would advise using Grunt, besides why not use a build tool written in JavaScript? Go learn how to use Grunt!

*Update

Other task runners that you should look into:

Gulp
I’m currently using Gulp, for the majority of my applications. You may wonder why I switched, mainly because the cool kids persuaded me to,..LOL. No seriously, Gulp focuses on code, while Grunt is all about configuration, Gulp is a bit faster, and has a cleaner API, but by all means if you are into Grunt, stick with it.

Cake
If you write Coffeescript, then you are most likely using Cake, from my brief experience, Coffeescript, has no plugin system, so you are on your own to write tasks and from what I understand, it can get a bit arduous when writing larger tasks. It may be the best tool of choice for very simple use cases.

Broccoli
Broccoli is sort of like Gulp, it’s task based, has a plugin system for helpers and it relies on the command line for parameters. Unfortunately, its code base is not fully stable yet and it lacks a community, but it seems promising and I wouldn’t be surprised if it became the the next hottest task runner.

One thought on “JavaScript build tools and why you need them?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: