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', []);
};
- 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:
Chandra Shekhar
Latest posts by Chandra Shekhar (see all)
- Best practices for micro service design - January 23, 2022
- Spring Boot - January 23, 2022
- Java - January 23, 2022
Recent Comments