Grunt
In this tutorial we will learn to create simple tasks for Grunt.
Let us create a simple task that will print "Hello World" when we run grunt on command line.
grunt
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".
registerTask
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.
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
YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt hello Running "hello" task Hello Done. YUSUF-MacBook-Pro:grunt-project yusufshakeel$
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.
grunt greetings
grunt hello
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"]); };
In the terminal type the following command to run the combined task "mytasks".
$ grunt mytasks
YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt mytasks Running "greetings" task Hello World Running "hello" task Hello Done. YUSUF-MacBook-Pro:grunt-project yusufshakeel$
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"]); };
To run the default task simply type the grunt command in the terminal.
$ grunt
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.