Getting Started with Grunt a JavaScript task build tool

JavaScript, JavaScript, JavaScript! It seems that just about everywhere you turn now days you here about “this framework” or “that library” being based on JavaScript. If you like JavaScript (and I do) then that’s a good thing but it also presents several unique challenges. Since JavaScript isn’t compiled it needs to be minified for production applications, concatenated to reduce HTTP requests, linted (with a tool such as JSHint) to drive consistency and catch issues, and have a variety of other tasks/actions applied to it. That can be daunting and quite time consuming if you’re doing it by hand. Fortunately, there are several tools out there that can take away the pain and simplify your life. In this post I’m going to provide a quick introduction to a JavaScript task build tool called Grunt which is available at Grunt The JavaScript Task Runner.

Grunt provides a way to automate several tasks that you may need to run against one or more JavaScript files. Here’s a list of the built-in tasks supported by Grunt:

  • concat – Concatenate files together to reduce HTTP calls from a client to a server
  • init – Generate project scaffolding from a predefined template
  • lint – Validate files with JSHint
  • min – Minify files with UglifyJS
  • qunit – Run QUnit unit tests in a headless PhantomJS instance
  • server – Start a static web server
  • test – Run unit tests with nodeunit
  • watch – Run predefined tasks whenever watched files change

To get started with Grunt you’ll need to perform the following steps (note that these steps involve Node.js commands):

  1. Install Node.js
  2. Run the following at the command prompt to install Grunt globally using the Node Package Manager: npm install -g grunt
  3. To make the Grunt command line interface (CLI) available globally run the following command: npm install -g grunt-cli. Note that you may need to use sudo (for OSX, *nix, BSD) or run your command shell as Administrator (for Windows) to do this.
  4. Create a Gruntfile.js file that defines the tasks to run and place it in your project folder (the root folder containing your JavaScript files for example).
  5. Open a command prompt and navigate to the folder where the Gruntfile lives.
  6. Run grunt using the command line.
  7. Watch the magic happen!

You can see that Grunt relies on Node.js to do all of its heavy lifting. This makes it easy for Grunt to integrate multiple JavaScript tasks into its build process. In addition to the built-in tasks available with Grunt, hundreds of additional tasks can be accessed at GruntThe JavaScript Task Runner.

Now that you’ve seen what Grunt can do and how to get it installed, let’s walk through a simple Gruntfile.js file and explain the tasks that it contains and what they do.

Here’s a basic example of the shell code used in a Gruntfile:

The initConfig() function is used to define the tasks that can be run as well as any settings that have to be defined. The registerTask() function is used to define a task name and the task or tasks that will be run when it’s executed. Here’s an example of a complete Gruntfile with 2 task definitions and one registered task named “default”:

To execute the Gruntfile you can open a command prompt, navigate to the folder where the Gruntfile lives and type grunt. Once the grunt command is executed the default task will be run. Only 1 task is registered in this example named “default” but it will cause the concat and min task definitions to be run which will cause JavaScript files to be concatenated and then minified.

There’s much more that you can do with Grunt if you’re interested in automating your JavaScript build process. Check out Grunt JS Sample Gruntifile for additional examples of defining tasks in a Gruntfile.

Enjoy!
Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Posted in Developer Visual Studio / ASP.NET, Web Development | Posted in , , , , , , , , , , , | 2 Comments

Your Feedback: (2 Responses)

  • Drew says:

    Hi Dan, Great post by the way.
    I’m curious though, have you tried using Grunt in an ASP.NET MVC application?

  • Christian Haas says:

    For me Grunt is right in the sweet-spot between anarchic make-files and strict Ant tasks. I so far bring it to every project (private or office) that I work with.

    But one thing needs an update in your post: Installation step 2 is not needed/recommendet; Install the actual grunt runner only per project, which allows to have different versions per project. Only the CLI is required (See also newest getting-started page on their homepage).

    I also haven’t tried to bind multiple tasks into one using a concatenated string; Whether it’s only possible because of a new version or not, grunt.registerTask(“default”, [“lint”, “test”, “compile”]); makes it more maintainable than “lint test compile”.

  • Leave a Reply

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

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">