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.


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)


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) {

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.registerTask('default', ['less']);

You are all set now. Just run below command



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

The following two tabs change content below.

Chandra Shekhar

GCP Architect
Chandra Shekhar Pandey is Google certified Cloud engineer, I am Magento2 Trained developer. Having huge experience in designing cloud solution. I have around 12 years of experience with world enterprise IT companies and fortune 500 clients. During my architecture design I am always caring about high availability, fast performance and resilient system. From the programmer background I have huge experience in LAMP stack as well. Throughout my carrier I have worked on Retail, E-Learning, Video Conferencing and social media domain. The motive of creating cutehits was just to share the knowledge/solutions I get to know during my day to day life so that if possible I can help someone for same problems/solutions. is a really a very effort for sharing knowledge to rest of the world. For any query/suggestion about same you can contact me on below details:- Email: shekharmca2005 at Phone: +91-9560201363

Latest posts by Chandra Shekhar (see all)

You may also like...