Grunt - Creating Tasks

In this tutorial we will learn to create simple tasks for Grunt.

Creating our first Grunt task

Let us create a simple task that will print "Hello World" when we run grunt on command line.

Open the Gruntfile.js file that we created in the Getting Started tutorial and type the following code.

module.exports = function(grunt) {
	
	/**
	 * this will print "Hello World"
	 * when we run
	 * $ grunt greetings
	 * on command line
	 */
	grunt.registerTask("greetings", function() {
		console.log("Hello World");
	});

};

So, in the above code we have created our module and using grunt's registerTask method we have created our first task greetings. This task will print "Hello World".

Running Grunt task

Save the content of Gruntfile.js file and open terminal and run the following command to print out the greetings message "Hello World".

$ grunt greetings

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt greetings
Running "greetings" task
Hello World

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

Congratulation! You have successfully created and executed a Grunt task.

Let's create another task

Open Gruntfile.js file and add the following code to create a new task hello. When grunt will run this task it will print "Hello".

module.exports = function(grunt) {
	
	/**
	 * this will print "Hello World"
	 * when we run
	 * $ grunt greetings
	 * on command line
	 */
	grunt.registerTask("greetings", function() {
		console.log("Hello World");
	});

	/**
	 * this is the 2nd task
	 */
	grunt.registerTask("hello", function() {
		console.log("Hello");
	});

};

Now to run the new task open terminal and type the following command.

$ grunt hello

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt hello
Running "hello" task
Hello

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

Combining the tasks

So, as you can see from the above examples when we type grunt greetings grunt runs the greetings task. And when we type grunt hello it runs the hello task.

We can combine the two tasks together under one name (let's say mytasks) by adding the following line of code in the Gruntfile.js file.

grunt.registerTask("mytasks", ["greetings", "hello"]);

In the above line of code we have created a task "mytasks" and added "greetings" and "hello" task to it. So, when we run this task in the terminal then grunt will run both the tasks.

Our final code will look like the following.

module.exports = function(grunt) {
	
	/**
	 * this will print "Hello World"
	 * when we run
	 * $ grunt greetings
	 * on command line
	 */
	grunt.registerTask("greetings", function() {
		console.log("Hello World");
	});

	/**
	 * this is the 2nd task
	 */
	grunt.registerTask("hello", function() {
		console.log("Hello");
	});

	/**
	 * combining the two tasks under one name
	 * "mytasks"
	 */
	grunt.registerTask("mytasks", ["greetings", "hello"]);

};

Running the combined task

In the terminal type the following command to run the combined task "mytasks".

$ grunt mytasks

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt mytasks
Running "greetings" task
Hello World

Running "hello" task
Hello

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

Creating the default task

There is an easier way to combine tasks together under one name and that is by creating the default task.

In the following example we are creating a default task and combining greetings and hello task together under the default task.

grunt.registerTask("default", ["greetings", "hello"]);

Final code in Gruntfile.js file.

module.exports = function(grunt) {
	
	/**
	 * this will print "Hello World"
	 * when we run
	 * $ grunt greetings
	 * on command line
	 */
	grunt.registerTask("greetings", function() {
		console.log("Hello World");
	});

	/**
	 * this is the 2nd task
	 */
	grunt.registerTask("hello", function() {
		console.log("Hello");
	});

	/**
	 * combining the two tasks under one name
	 * "mytasks"
	 */
	grunt.registerTask("mytasks", ["greetings", "hello"]);

	/**
	 * this is the default task
	 * to run this task just type
	 * $ grunt
	 */
	grunt.registerTask("default", ["greetings", "hello"]);

};

Running the default task

To run the default task simply type the grunt command in the terminal.

$ grunt

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt
Running "greetings" task
Hello World

Running "hello" task
Hello

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

That's all for this tutorial. Have fun coding.