Getting Started with Grunt a JavaScript task build tool

Home > Blogs > Developer Visual Studio / ASP.NET > Getting Started with Grunt a JavaScript task build tool

Getting Started with Grunt a JavaScript task build tool

Like This Blog 2Dan Wahlin
Added by March 26, 2013

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 may also like:  Running Java Apps in Microsoft Edge on Windows 10

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”:

You may also like:  Running Java Apps in Microsoft Edge on Windows 10

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.

Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Videos You May Like

Agile Methodology in Project Management

0 64 0

In this video, you will gain an understanding of Agile and Scrum Master Certification terminologies and concepts to help you make better decisions in your Project Management capabilities. Whether you’re a developer looking to obtain an Agile or Scrum Master Certification, or you’re a Project Manager/Product Owner who is attempting to get your product or … Continue reading Agile Methodology in Project Management

Subnetting a TCP/IP Network using the Magic Box Method

0 432 2

In this session, we are going to look at how to subnet a Class B address into multiple network segments using what's called The Magic Box. Let's run through this real quick.

Detailed Forensic Investigation of Malware Infections – April 21, 2015

2 215 2

In this IT Security training video, Security expert Mike Danseglio (CISSP / CEH) will perform several malware investigations including rootkits, botnets, viruses, and browser toolbars.

Write a Comment

See what people are saying...

  1. Drew

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

  2. Christian Haas

    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”.

Share your thoughts...

Please fill out the comment form below to post a reply.