If you work on single-page apps and other JavaScript-centric Web development, you quickly learn that the code-debug cycle in client-side JavaScript is anything but automatic. In these kinds of environments, you end up with enough code that several things happen:

1. You learn why dependency management is such a big deal.
   
   First you load jQuery, because who wants to do serious DOM-based development without it. Then you need a calendar, and it requires a jQuery 1.6+. Now you know why services like npmJS and Bower are so useful. 
    
2. You become dependent on a script loader.
   
   Your JavaScript dependencies successfully managed, you write a bunch of script statements to load them into your app, but lo and behold, they don't load in the right order consistently, so you do some Googling and you find yourself a module loader - CommonJS, StealJS, LazyLoader. You learn how to configure it and load your dependencies in order. Hurray!
    
3. Your source code gets so big you have to re-factor it into lots of smaller files.
   
   Wasn't it great back in the day when all the JavaScript functionality you needed fit into a couple of source files? Not so with today's JavaScript apps. Have you ever looked at the source for jQuery? Yeah, not so simple any longer.
   
    
4. You have to concatenate your re-factored source code into a bundle of JavaScript files for loading on the site. 
   
   Wow, now this is getting complicated. You cut up all those big source files into little source files to make your code easier to manage, but now the disitribution is harder to manage. All of these steps take time, which makes the "correct a misplaced comma" change in your JavaScript file a lengthy, painful process. What is a Web developer to do?

 

Enter Grunt, the Task Runner

So GruntJS is a task runner, that's what they call it. It allows you to write scripts (in JavaScript, yay!) to execute repetitive tasks, like, oh, linting your code, concatenating your source files, and creating source maps for debugging. 

You install Grunt via npm, the package manager for NodeJS. If you haven't installed Node yet, download NodeJS now. Once Node is installed, you have access to the CLI tool npm.

To install Grunt, go to the console and type:

 

 $ npm install -g grunt-cli

 

Great! You have installed Grunt, now what? The short version is that you need a couple of files in the root of your Web project - package.json and Gruntfile.js (or Gruntfile.coffee). Remember back at #1 when you decided you needed a dependency manager? Here you go. If you don't have a package.json file yet, go the root of your Web project in the console and type:

 

$ npm init

 

Npm will ask you a series of questions about your project. Answer as best you can, you can change these values later. Once completed, npm will generate a new package.json file that you will use to maintain your Node dependencies, like plugins for Grunt to run specific tasks. 

You can then install Grunt and set it up as a dependency in package.json by typing:

 

$ npm install grunt --save-dev

 

From there, you can create a Gruntfile, add plugins, and set up tasks to automate your code/debug lifecycle. We will cover that topic in the next part of the series. Meanwhile, if you need more details, you can learn all about getting started with Grunt.