Kyle Nunery

Grunt Ground Zero

Kyle Nunery -

Grunt is a popular task runner in the Node/JavaScript space. Any task you perform repeatedly is a good candidate to be automated via Grunt. On a typical development project you would automate building your SASS, linting your JavaScript, minifying your JavaScript, or compiling your CoffeeScript.

Step 1 - Install Grunt

Assuming you have Node already installed then you can install Grunt at the command-line with the following command. It is important to note this is not the Grunt Task Runner.

> npm install -g grunt-cli

The -g command installs the grunt-cli package globally. Now you can run grunt from any directory.

Try running grunt.

> grunt

# you should see something like this

...
Fatal error: Unable to find local grunt.
...

Step 2 - Adding Grunt to a New Project

We installed grunt-cli globally but you will still need to install the grunt module locally. Let's create a new folder for our new awesome project called learn-grunt.

> mkdir learn-grunt
> cd learn-grunt

You will need to create a new file called package.json. We add {} to the file to make it a valid json file. Alternatively you can run npm init but for this example we are going to keep it simple.

> echo '{}' > package.json

Here is how you install a local copy of grunt.

> npm install grunt --save-dev

Take a look at the contents of the package.json file.

> cats package.json

# contents of package.json

{
  "devDependencies": {
    "grunt": "~0.4.2"
  }
}

Any module dependencies you might have for your grunt tasks will be listed in your package.json file as devDependencies.

Let's see what tasks we currently have available.

> grunt --help

# output

...
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
...

You need a Grunt file to store your tasks so you don't see the above informational message.

Step 3 - Create a Grunt File

You will need a Grunt file named Gruntfile.js or Gruntfile.coffee to contain your Grunt tasks. In our case we will install a JavaScript minification module called Uglify that can be run by the Grunt task runner. Uglify is one of several available JavaScript minification tools.

> npm install grunt-contrib-uglify --save-dev

Look at the package.json file.

# contents of package.json

{
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.3.2"
  }
}

We now need to register the grunt-contrib-uglify task in your Gruntfile.js so we can run it from the command line. Update your Gruntfile.js file to look like the following:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        my_target: {
          files: [{
            expand: true,
            cwd: 'src',
            src: '**/*.js',
            dest: 'dest'
        }]
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

Step 4 - Using Grunt

Now we can actually use Grunt to run our uglify task. Run grunt!

> grunt

Output

>> Destination (build/.min.js) not written because src files were empty.

Uh oh, we don't have any files to minify! Let's add some files so we can see the task "uglify" a JavaScript file.

> mkdir src
> touch src/index.js
> open src/index.js

Index.js file contents

function foo() {
	var favoriteNumber = 100;
    alert(favoriteNumber);
}

Run grunt again.

> grunt

There will be a new folder called dest. Look at the file dest/index.js.

function foo(){var a=100;alert(a)}

This article has shown the basics of understanding Grunt to run tasks.

References