Getting Started With GruntJSEasily automate the grunt work for your projects.

We’ll be covering common use cases of GruntJS and how it can benefit your development process, along with an illustration to get you started.


What is GruntJS?

GruntJS is a CLI tool that allows you to automate repetitive tasks with JavaScript. GruntJS is built on top of Node.js, thus making it an incredibly powerful automation tool. In other words, you won’t be constrained to a watered down scripting language, you’ll be able to take full advantage of all the benefits that go along with Node.js.

Don’t let the JavaScript part fool you though; no matter what language you’re coding in, GruntJS can be extremely beneficial in getting the preprocessing “grunt” work done for you.


Why use GruntJS?

Automation! The purpose of GruntJS is to get the “grunt” work done for you in an extremely quick and easy manner.

Engineers often need preprocessors for whatever they’re building and this is where GruntJS comes into play. If you’re familiar with make or Apache Ant, then think of GruntJS as being the JavaScript alternative.

Common uses of GruntJS are:

  • Linting – Check that your CSS/HTML/JavaScript and many other languages are valid before deployment.
  • Concatenation – Concatenate your CSS/JavaScript files.
  • Minification – Minify your CSS/HTML/JavaScript files.
  • Testing – Acceptance, Functional, Integration and Unit Testing.
  • Web Server – Serve a specific directory for you to view the web-based project you’re working on.
  • LiveReload. Automatically reload your browser when you make a change to one of the files in your project.
  • Favicons. Automatically generate favicons for various devices from your website logo.

…and this is just scratching the surface with a handful of many different use cases. Visit the GruntJS Plugins page to see a full list of supported tasks.


Gruntfile.js

Gruntfile.js is the default file that GruntJS looks for to fetch its configuration. Your Gruntfile.js will be unique per project, so GruntJS expects it to live in the current directory where you’re running the gruntcommand.

You can view the full GruntJS documentation if you want to get a more thorough explanation of everything that’s going on with the Gruntfile.js file.


Installing GruntJS

In order to use GruntJS, you must have Node.js installed on your system. If you don’t have Node.js installed, you can download and install it from the Node.js Downloads page.

Install GruntJS by entering the following at the CLI prompt:

npm install -g grunt-cli;

GruntJS Using JSHint Example

Before we install the GruntJS JSHint plugin and create our Gruntfile.jsconfiguration file, let’s first make a test JavaScript file for JSHint to check against.

From the current directory, you’re working in, create a new file titled test.js and copy and paste the following into its contents:

var test = badCodeOnPurpose!;

Enter the following at the CLI to install the GruntJS JSHint plugin:

npm install grunt-contrib-jshint --save;

In the current directory, you’re working in, create a new file named Gruntfile.js and copy-paste the following into its contents:

module.exports = function(grunt) {  
    // Grunt configuration.
    grunt.initConfig({
        // JSHint configuration.
        jshint: {
            // File to run JSHint against.
            src: ['./test.js']
        }
    });

    // Load the GruntJS JSHint plugin.
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // Default tasks to run when `grunt` command is entered.
    grunt.registerTask('default', ['jshint']);
};

Switch back to the CLI and enter the following command to run GruntJS:

grunt;

You should see GruntJS log the following output to the console:

Running "jshint:src" (jshint) task

   test.js
      1 |var test = badCodeOnPurpose!;
                                    ^ Expected an operator and instead saw '!'.

>> 1 error in 1 file
Warning: Task "jshint:src" failed. Use --force to continue.

Aborted due to warnings.

Let’s go back to the test.js file again, but this time let’s make the JavaScript valid by wrapping quotes around our variable’s value. Open up the test.js file and change the code so that it looks like this:

var test = 'badCodeOnPurpose!';

Run GruntJS again from the CLI by entering the following command:

grunt;

Finally we should see the following output letting us know that our JavaScript file is lint free:

Running "jshint:src" (jshint) task  
>> 1 file lint free.

Done, without errors.

Looking Back

Hopefully, the example I illustrated showed you just how easy it is to perform automation with GruntJS. I also hope that it opened your mind to a number of possibilities that you can accomplish by using it.

I’ll be writing more GruntJS guides for use cases as time goes on, so make sure to check back on the blog for updates if you’re interested.

If you had any problems with this guide, or have a suggestion, please leave a comment.

About Salvatore Garbesi