How to use grunt for workflow automation

 

What is workflow automation:

In the new era of development its not limited itself with doing coding and manual testing of functionality on server. The era has been changed now, CSS are coming after compilation from pre-processors, code are being validated through tools like JShint (to avoid any wrong code is not written), TDD, BDD to be written and many more process to be done in order to get complete build package. Workflow automation is a process where we automate all these task with single tool that is grunt. By using this tool we will get a proper build package without failing any of the steps.

What is grunt

Grunt is a JavaScript based task runner tool. This tool actually runs various tasks in one command (based on the configuration). In today’s development environment where we need to compile the css files using less similarly validate if JavaScript is fine or syntax is correct or not. Either we can perform all these tasks manually as well but there could be a chance that due to any reason if we forgot to run any task we might lead to any issue that might take ours to figure out the root cause. So there must be some mechanism that runs every task with one command and prevent our self to reach in any bad situation. . Exactly here is the role of grunt comes and what grunt does. In short we can say that Grunt provide a smart way to automate our workflow.

 

Who all are using grunt:

Worlds largest organization such as Adobe Systems, jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart and Microsoft are already using grunt.

 

How to install grunt:

Step 1: Create a package.json file for your project by running the command from your project root

npm init

Step 2. install grunt globally

npm install -g grunt

Step 3. Create the gruntFile.js. There are 3 subtasks into it

  • Configuration for tasks
  • Custom tasks
  • Task loading

Below are the code to be written under package.json . The idea of writing in package.json is to extend the functionality of your project.

module.exports = function(grunt) {

// Project configuration.

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

});

// Default task(s).

grunt.registerTask('default', []);

};
  1. You are done just run grunt command to see it working

Add a task like less in grunt

Install less plugin for grunt by running below command

npm install -g grunt-contrib-less

npm install -g grunt-cli

npm install grunt --save-dev

(Use sudo if you are using on linux)

5.

Add and configure a package.json file:

{
"name": "my-project-name",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.2",

"grunt-contrib-less": "~0.8.2"

}
     }

Based on above text. Complete code would be like as below


module.exports = function(grunt) {
grunt.initConfig({

less: {
development: {
options: {
paths: ["assets/css"]
},
files: {"path/to/result.css": "path/to/source.less"}
},
production: {
options: {
paths: ["assets/css"],
cleancss: true
},
files: {"path/to/result.css": "path/to/source.less"}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};

You are all set now. Just run below command

 

grunt 


Your all scheduled tasks will keep on executing automatically. Now just focus yourself on your development stuff and enjoy!!

Related posts:

The following two tabs change content below.

Chandra Shekhar

Consultant at Infogain
Chandra Shekhar is a LAMP Developer,Thinker,Blogger and currently working as Magento(Ecommerce) specialist.. I am always open to learn new things in LAMP as well as other newer technology. In the journey of my last 9 years of web and product development, I have decided to share my knowledge and experience to Open Source Community in 2011. In this regard I have started CuteHits.com. Since then I am actively sharing my knowledge on various LAMP technology through CuteHits.com’s technical ... Read More about Chandra Shekhar

Latest posts by Chandra Shekhar (see all)