Cuelogic Blog Icon
Cuelogic Career Icon
Home > Blog > Product Development > Web > Grunt: task-based command line build tool for JavaScript projects

Grunt: task-based command line build tool for JavaScript projects

Grunt: task-based command line build tool for JavaScript projects

When working on a JavaScript project, there are a bunch of things you’ll want to do regularly like concatenating given files, running JSHint on your code, running tests, or minifying your scripts. It would be nice to have a single, unified set of commands for all those extra tasks, that worked for every single JavaScript project, right?
grunt1

That’s what Grunt aims to be. It has a bunch of built-in tasks that will get you pretty far, with the ability to build your own plugins and scripts that extend the basic functionality.

Just install it with

npm install -g grunt

and see for yourself.

watch in action

Built-in tasks

As of now, grunt has the following predefined tasks that you can use in your project:

  1. concat - Concatenate files.
  2. init - Generate project scaffolding from a predefined template.
  3. lint - Validate files with JSHint.
  4. min - Minify files with UglifyJS.
  5. qunit - Run QUnit unit tests in a headless PhantomJS instance.
  6. server - Start a static web server.
  7. test - Run unit tests with nodeunit.
  8. watch - Run predefined tasks whenever watched files change.

Custom tasks

In addition to the built-in tasks, we can always create our own tasks. Don’t like a built-in task’s default behavior? Override it. Check out the grunt API documentation and the built-in tasks source for everything you need to know about creating custom tasks.

Also, creating a grunt plugin allows you to package related tasks into an easily-installed npm module. Backbone Boilerplate is a good example of a grunt plugin.

Initializing a new project

The init task initializes a new project, based on the current environment and the answers to a few questions. Once complete, a grunt.js configuration file will be generated along with a complete directory structure, including a basic readme, license, package.json, sample source files and unit tests (etc). The exact files and contents created depend on the template chosen along with the answers to the questions asked.

Now, instead of sketching out an idea in a quick one-off gist, We can create the scaffolding for an entire project in about 10 seconds, “fill in the blanks,” and then run grunt to lint, test, concat and minify my code. If everything passes, we can then commit and push code.

Run grunt

Each time grunt is run, it looks in the current directory for a file named grunt.js, aka the “gruntfile.” If this file is not found, grunt continues looking in parent directories until it is found. This file is typically placed in the root of your project repository, and is a valid JavaScript file comprising project configuration as well as any custom project-specific tasks and helpers you’ve defined.

References:

http://weblog.bocoup.com/introducing-grunt/
http://code.tutsplus.com/tutorials/meet-grunt-the-build-tool-for-javascript--net-24856