You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Grunt : Automate your UI processes

0.00 avg. rating (0% score) - 0 votes

In today’s world Front-end Engineering is moving in an entirely new generation of web applications. Apps are becoming complex with richer UI and better interactions. But with it comes the ever increasing size of UI resources and their management.

Managing UI resources effectively is posing as a major challenge to the Front-end world.
Grunt is our preferred tool  for UI task automation. It’s a task runner, offering a lot of bundled plugins for common tasks.
The best comes when you can combine various tasks together to create your own more powerful bundle.
Following are some usual tasks we do:
  • Minification
  • Merging
  • Compilation
  • Linting
By including Grunt in our projects all of the above tasks are now just single command away.
http://gruntjs.com/ This site has all the information about how to make a local grunt setup.
Dependencies
  • node.js
  • grunt-plugins
  • Gruntfile
  • package.json

Task Automated
Plugin Used
Compressing Javascript and CSS files
grunt-yui-compressor
Merging JS modules into single file
grunt–concat
Compile Sass to CSS using Compass
grunt-contrib-compass
Validate files with JSHint
grunt-contrib-jshint
Run predefined tasks whenever watched file patterns are added, changed or deleted.
grunt-contrib-watch
Minify images
grunt-contrib-imagemin
Clean files and folders
grunt-contrib-clean
Project creation with required folder structure.
grunt-shell
List of Tasks automated at Naukri.com using grunt plugins

Simple example of how we automated creating new folder with desired structure [Gruntfile.js]

module.exports = function(grunt) {  
 
   //Loads task folder into memory  
   grunt.file.expand(‘../node_modules/grunt-*/tasks’).forEach(grunt.loadTasks);    

   // Configuration for grunt command
   grunt.mergeConfig({
   shell: {
   multiple: {
   command: [ ‘mkdir <new-folder>’,  ‘cd <new-folder>’].join(‘&&’)
   }
   }
   });

   //Register command    
   grunt.registerTask(‘new-branch’, [‘shell’]);
}


Posted in General