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 2 Dan 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 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

Videos You May Like

A Simple Introduction to Cisco CML2

0 3877 0

Mark Jacob, Cisco Instructor, presents an introduction to Cisco Modeling Labs 2.0 or CML2.0, an upgrade to Cisco’s VIRL Personal Edition. Mark demonstrates Terminal Emulator access to console, as well as console access from within the CML2.0 product. Hello, I’m Mark Jacob, a Cisco Instructor and Network Instructor at Interface Technical Training. I’ve been using … Continue reading A Simple Introduction to Cisco CML2

Creating Dynamic DNS in Network Environments

0 641 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader teaches how to create Dynamic DNS zones in Network Environments. Video Transcription: Now that we’ve installed DNS, we’ve created our DNS zones, the next step is now, how do we produce those … Continue reading Creating Dynamic DNS in Network Environments

Cable Testers and How to Use them in Network Environments

0 724 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader demonstrates how to use cable testers in network environments. Let’s look at some tools that we can use to test our different cables in our environment. Cable Testers Properly Wired Connectivity … Continue reading Cable Testers and How to Use them in Network Environments

Write a Comment

See what people are saying...

    Share your thoughts...

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