Task Automation using Grunt – Part 1

Pankaj Salunkhe

Pankaj Salunkhe

Technical Specialist at CG
Microsoft Certified Solution expert in SharePoint and O365 with 9+ years of experience.

write to admin@sharecareinspire.com for contribution
Pankaj Salunkhe

Latest posts by Pankaj Salunkhe (see all)

>>Part 2          >> Related Articles

Problem Statement

During front-end development phase we all have faced issue of performing certain tasks repetitively, which are time consuming.

These repetitive tasks can be any of the following type.

1. Compiling Typescript to JavaScript
2. Validating JavaScript with JSHint
3. Compressing JavaScript with Uglify
4. Cleaning up Files and Folders with Clean
5. Linting/Compressing HTML
6. Linting/Compressing CSS
7. Converting LESS or SASS to CSS
8. CSS file compression
9. JS file compression/validation/minification
10. JS minification or obfuscation
11. HTML/JSON file minification
12. Image optimisation
13. Compile SASS or LESS files to generate CSS files
14. Unit testing
15. SVN commit
16. Build deployment etc.

Imagine performing all these tasks manually and also repetitively, so much of effort is wasted to perform this mundane work.

Grunt Task Runner

Automation is the only solution to reduce effort of this mundane work and be more reliable to perform all these activities repeatedly.

Grunt is the solution for above problem statement, it is a JavaScript Task Runner, and a command line tool which runs on NodeJS. It provides hundreds of plugins to automate tasks with a minimum effort. It also enables you to build your own plugin.

Using Grunt these tasks can be automated and can be done in one key press, we just need to write tasks in JS file and run Grunt.

Grunt in Action

Now lets see grunt in action, how we can use grunt for performing different tasks.

Assumption is that Grunt is already installed.

Task: Clean temporary/unwanted files from folder

Step1: Create folder for demo project

Step2: Create package.json file under folder gruntcleandemo and add below code in package.json file.

{
"name": "CleanFolderDemo",
"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.5.0"
}
}

Step 3Create Gruntfile.js file under folder gruntcleandemo and add below code in Gruntfile.js file.

module.exports=function (grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
clean:{
 output: ['ToBeCleaned/*']
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.registerTask("default",['clean']);
}

Step 4: Create folder ToBeCleaned under folder gruntcleandemo.
Add temporary text files in the folder ToBeCleaned, these files will be deleted by grunt command.

Step 5: Run npm install command to install dependencies.

Step 6: Before running grunt command, check verify files under folder ToBeCleaned.

Step 7: Run command “grunt default -v”
This command execute the task of cleaning files from folder ToBeCleaned.

Step 8: Check folder “ToBeCleaned”
Run dir command at the command prompt the verify the content, you will notice that all the files are removed from the folder.

 

>>Part 2               >> Related Articles


Check Articles From Categories      Health and Parenting      Inspiring Stories      Technology      Microsoft Azure      SharePoint O365

Leave a Reply

Your email address will not be published. Required fields are marked *