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. This site has all the information about how to make a local grunt setup.
  • node.js
  • grunt-plugins
  • Gruntfile
  • package.json

Task Automated
Plugin Used
Compressing Javascript and CSS files
Merging JS modules into single file
Compile Sass to CSS using Compass
Validate files with JSHint
Run predefined tasks whenever watched file patterns are added, changed or deleted.
Minify images
Clean files and folders
Project creation with required folder structure.
List of Tasks automated at 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  

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

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

Posted in General