Introduction

Why do I need a build tool?

If you are asking, then you probably don't need it ;-)

Now, seriously, if all you're making is a small web application, then you're probably better off putting a bunch of script and link tags on the head of you HTML document, and fitting your code into a few javascript, HTML and CSS files. No need to complicate your life with all this "build" nonsense! ;-)

The case for build tools

Any moderately to highly complex application needs code, lots of code! And that means, dozens or hundreds of source files (unless you like editing large, monolithic files and spending most of your time scrolling and searching for things).

Also, if you want to keep your project well organized, you'll feel the need to create a well thought out directory structure for it, which will probably be many levels deep.

All those source files, in all those source folders, will need to be assembled to just a few files, at most, in order for the app to be delivered efficiently over HTTP, otherwise the browser will choke under a deluge of connections to the server to fetch all the required files.

Furthermore, modern web development also means developers frequently take advantage of stylesheet preprocessors, compile-to-javascript languages, alternative HTML formats and many other tools to simplify, accelerate and enhance the development process.

So, you'll need an automation tool that can perform all those tasks for you.

Isn't Grunt already a build tool?

Grunt has a vibrant ecosystem of plugins that allow it to do almost all the build automation tasks you may need.

Nevertheless, there are needs that are quite specific to applications based on the AngularJS framework that, currently, no combination of other existing Grunt plugins can fulfill in the most practical, simple and easy way.

The case for an AngularJS build tool

AngularJS is an amazing framework and one of the best for developing highly sophisticated web applications.

The only problem is, while it promotes modular development, it doesn't provide a mechanism for automatically finding all the required source files of your app and then loading them in the correct order. It lets that task up for you to solve!...

So, perhaps you're already facing one of these scenarios:

• You're manually defining your source files' include order and manually managing your modules' stylesheet and asset dependencies, but find it to be a lot of work, tedious and error-prone.

Or

• You tried to integrate AngularJS with RequireJS, Browserify or one of those other popular module loaders / optimizers / packagers, but found it to be awkward to use an additional module dependency resolution system (with a very different philosophy) over a framework that already has one (and just lacks the loading part).

Or

• You're using some hand-made custom solution but are not quite satisfied with it.

If any of these ring a bell, this tool might be the answer you were looking for!