Grunt Update

This is a followup post of my previous post on “Grunt Basics.”

Apparently, installing grunt has changed since my last blog.  Pwa pwa pwa…

1. If you’re installing grunt for the first time, type this in your command line:

npm install -g grunt-cli

If you’re updating from a version before 0.4, type this:

npm uninstall -g grunt && npm install -g grunt-cli

2. For “project scaffolding,” install grunt-init:

npm install -g grunt-init

Project scaffolding is when you type a command in the command line, and that automagically builds a project directory for you.  It’ll prompt you for a project name, description, version, etc etc.  So once you’ve installed grunt-init, you can type something like:

grunt-init jquery

And that’ll set up a jQuery project for you.  That also comes with a whole bunch of stuff, like JS Hint, QUnit, Uglify… check out the package.json file to see what it comes with.  If you run:


And something’s missing, just do:

npm install

And the missing stuff gets installed.  Run:

grunt watch

And your project gets rebuilt as you save your JS files.  Yuh, it’s like magic.

So when you run:


It’ll go through all the tasks defined in your default task in your Gruntfile.js.  Usually it looks like this:

grunt.registerTask(‘default’, [‘jshint’, ‘qunit’, ‘clean’, ‘concat’, ‘uglify’]);

But feel free to configure that and anything else you may need in your Gruntfile.js.


Grunt Basics

In a past post, I mentioned a build tool called Grunt.  IT IS AWESOME!

“Grunt is a task-based command line build tool for Javascript projects.”

Here are some basic steps on how to set up Grunt for your project:

1. Install Node.js:

2. Install Phantom.js:

3. Install Grunt by using:  npm install -g grunt

4. Set up a project with grunt init, or you can do specific configurations.  Here is one for JQuery:  grunt init:jquery.

And ta-da!  It sets up your directory and project files.

5. Use grunt watch and it’ll run a batch of predefined tasks whenever you make changes to your files such as:

  • lint – Validate files with JSHint.
  • min – Minify files with UglifyJS.
  • qunit – Run QUnit unit tests in a headless PhantomJS instance.

You can even configure your grunt.js file a bit to cater to your project’s needs.  If you prefer Jasmine or Mocha over QUnit, for example, you can specify your grunt.js file to use that instead.  When I developed in AS3, I had to literally type a command (i.e., ant or mvn) in the command prompt or double-click an Ant icon in Flash Builder to have the build process going.  But Node.js brings along this ability to “watch” your files — it’ll build whenever you hit ctrl+s — and it’ll execute all of those commands that you tell it to in your configuration.  All of this sounds like a great boost to your development workflow… don’t you think?

Crazily enough, Grunt is not the only build tool out there for Javascript.  There’s Yeoman, Mimosa, Gear, Jake… some people even still use Ant.  I have yet to try them all out.  Which build process and configurations do you prefer?