How to set up tasks in Grunt JS

Grunt JS is a task runner, which means it is designed to run tasks for you. It’s your little slave bot, and you can tell it what to do, and when to do it!

To follow along with this tutorial on how to setup and trigger Gruntjs tasks, you’ll need Grunt JS installed and a Grunt JS project setup and ready.

• If you don’t have Gruntjs installed on your machine, find out how to install Gruntjs on a previous article here
• If you don’t have a Gruntjs project set up yet, find out how to setup a Gruntjs project on a previous article here

From here, I’ll assume you have Grunt JS installed and a Grunt JS project set up.

How to set up and trigger Gruntjs tasks

Inside of your project’s Gruntfile.js, I’ll presume you have the similar barebones setup already:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    // Read in the project settings
    pkg: grunt.file.readJSON('package.json')
  }); // End of config
}

We’re first going to add a basic task just to output something into the Terminal. We’ll add our task to Gruntfile.js, underneath the initConfig() section:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    ...
  }); // End of config

  // Basic task
  grunt.registerTask('basicTask', function() { // 1
    grunt.log.writeln(this.name + ' was passed "' + arguments[0] + '"'); // 2
  });
}

1. We use grunt.registerTask() to register our basic task, with a label of 'basicTask' – this is what we’ll use to type into the Terminal to trigger the task
2. We log a message to the Terminal, which logs the task name (this.name) and the first argument that gets passed to it

Go into your Terminal, and cd into your Gruntjs project directory, and type grunt basicTask

Image may be NSFW.
Clik here to view.

It worked! We just triggered a grunt task from the Terminal that we’d setup in Gruntfile.js. However, we did receive an undefined notice. This is because we didn’t pass the task/function any arguments. To pass an argument to the task, go back into Terminal and type grunt basicTask:"hello"

Image may be NSFW.
Clik here to view.

The syntax may seem a little strange, but it’s essentially the same as saying basicTask("hello").

We’ve now set up a basic task for grunt to perform, but how about multi tasks? Read on to find out more.

Set up and trigger multi tasks in gruntjs

For multitasks, we need to first add some configuration to grunt.initConfig(). Let’s add the following to Gruntfile.js:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    ...

    log: {
      array: [1, 2, 3],
      message: "Hi there",
      boolean: true
    }

  }); // End of config

  ...

}

We have added a log object inside of grunt.initConfig(). It contains an array of numbers, a message and a boolean value. We want to output this onto the screen, but how? We need to set up another grunt task, but this time, a grunt multiTask.

Underneath the basic task we added earlier, add this multi task:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    ...

    log: {
      array: [1, 2, 3],
      message: "Hi there",
      boolean: true
    }

  }); // End of config

  // Basic task
  ...

  // Multi task
  grunt.registerMultiTask('log', function() { // 1
    grunt.log.writeln(this.target + ': ' + this.data); // 2
  });

}

1. We set up the multi task with grunt.registerMultiTask() and assign the reference 'log' so it knows how to trigger this task
2. For each item in the log object, we will output a line into the console, which will display the key name (e.g. array) and the value (e.g. 1, 2, 3)

Save this and go back into the Terminal and type grunt log

Image may be NSFW.
Clik here to view.

It has automatically run each and every property inside the log object/task! But we don’t have to run all of them – we can select whichever one we like. To see this, go into the Terminal and type grunt log:message

Image may be NSFW.
Clik here to view.

So what you’ll now realise is that multitasks can wrap a bunch of items together to run under one command (in our case grunt log). But you can specify down if you so wish.

You can also run tasks within tasks. Read on to find out more…

How to run grunt tasks within other tasks

Running other JavaScript functions inside functions isn’t uncommon, and so neither is it in gruntjs. Inside Gruntfile.js we’ll add another basic task, that will run another tasks when called:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    ...

    log: {
      ...
    }

  }); // End of config

  // Basic task
  ...

  // Multi task
  ...

  // Sub task
  grunt.registerTask('subTask', function(){ // 1
    grunt.log.writeln('Going to run a sub-task:'); // 2
    grunt.task.run('log:message'); // 3
  });

}

1. We register a basic task as normal, and label it as 'subTask'
2. We output a line saying we’re running a sub-task within this task
3. We run the 'log' multitask but only on the property 'message' – so we should get the output “Hi there”

Test it out by going into the Terminal and typing grunt subTask

Image may be NSFW.
Clik here to view.

There you have it! Our Gruntjs task just ran another grunt task from inside itself. These basic concepts will help your understanding of how Grunt JS tasks work.

Last but not least, how to run asynchronous tasks in grunt. Read on to find out how.

How to run asynchronous tasks in Gruntjs

To finish of this tutorial about understanding how Grunt JS tasks work, we’ll create a basic asynchronous task.

As normal, we’ll register a basic new grunt task in Gruntfile.js with some special options:

module.exports = function(grunt) {
  // Configuration for tasks
  grunt.initConfig({
    ...

    log: {
      ...
    }

  }); // End of config

  // Basic task
  ...

  // Multi task
  ...

  // Sub task
  ...

  // Asynchronous task
  grunt.registerTask('asyncTask', function(){ // 1

    // Force task into async mode
    var done = this.async(); // 2

    // Keep the user updated
    grunt.log.writeln('Beginning async task...'); // 3

    // Timeout
    setTimeout(function(){ // 4
      grunt.log.writeln('All done!'); // 5
      done(); // 6
    }, 1500);

  });

}

1. We setup a basic grunt task as normal here, and label it as 'asyncTask'
2. We tell gruntjs this is an asynchronous task; var done = this.async()
3. Our task outputs a friendly message to the user
4. We setup our timer, which will trigger in 1500ms
5. On timer expire we output to say it’s completed
6. We tell grunt the asynchronous task is complete

Let’s give it a go inside the Terminal. Type grunt asyncTask

Image may be NSFW.
Clik here to view.

You have now grasped the basics of running a variety of different gruntjs task types. You can put these into practical use now, and run useful web development tasks such as concatenating, minifying and running JSHint on your project JavaScript files.