#TECH

Guide to Setting up GRUNT

grunt_logo

 

Front end developers or UI developers often do certain kind of things like:

  1. Changing small codes of CSS and JS and combine them for production.
  2. compiling CSS/JS/HTML preprocessor.
  3. Compressing images, css, js, html etc.
  4. Switching and reloading browser for changes.

Now for compiling, minifying a preprocessor you will need some paid or free software like Prepros, Koala, Codekit etc. Some of them support windows or some mac.

For image compressor we have PunyPNG or other software and for auto update we can use some editors like brackets visual studio etc.

Now there are some preprocessors or templating language or operating system that these software editors doesn’t support then what will you do? One option is Google and install different softwares for that or another option is using GRUNT.

What is Grunt?

Grunt is a task runner that can improve the speed of front-end development. It can help to do repetitive task like minification, compilation, compression, auto reload etc.

Installation

To install grunt one need to install node and npm first.

Installing node and npm

  1. Download and install node.js from https://nodejs.org/en/
  2. Follow the prompts.
  3. Test node by opening cmd(command prompt) and write node -v. This must give you the version of node installed.
  4. Test npm by opening cmd and type npm -v. This must give you the version of node installed.

Installing grunt

    1. Set up a new package.json file in your project and add value. Something like-
    2. 
      {
      "name": "",
      "version": "0.1.0",
      "devDependencies": 
        {
      
         }
      }
      
      

 
or just create 1 new one by command npm init.

  • Install Grunt CLI(command line interface) by typing command npm install -g grunt-cli in cmd in your project.
  • Install Grunt in the project you are working by typing npm install grunt –save-dev
  • Test your grunt by typing command grunt –version and you must get the version of grunt and grunt cli installed.

Important node modules or plugins and Installing them

There are two ways to install a node module.

  1. By typing the respective command for the module or plugin.
  2. Mentioning the plugin details in package.json and running npm install command in cmd. By this way you can install multiple plugin at the same time.

There are lot of modules that are important for a front end developers. I am naming some of them and their installation command.

  1. autoprefixer – it add prefixes to CSS properties (npm install grunt-autoprefixer –save-dev)
  2. grunt-browser-sync – reload the browser on each saved changes in project on all browsers.
  3. (npm install grunt-browser-sync –save-dev)
  4. grunt-contrib-htmlmin – minifying html.
  5. (npm install grunt-contrib-htmlmin –save-dev)
  6. grunt-contrib-preprocessor – for preprocessor compilation depends on preprocessor
  7. (npm install grunt-contrib-less –save-dev)
  8. “grunt-contrib-uglify” –  for formation of js,
  9. (npm install grunt-contrib-uglify –save-dev)
  10. grunt-contrib-watch –  it watches the changes and runt grunt on each change
  11. (npm install grunt-contrib-watch –save-dev)

Setting up all modules for grunt
For this you have to create a gruntfile.js like this



module.exports = function(grunt) {


  // Project configuration.
  grunt.initConfig({
	  pkg: grunt.file.readJSON('package.json'),
    less: {
      development: {
        options: {
          compress: false,
          yuicompress: false,
          optimization: 2,
			livereload: true
        },
        files: {
           "css/style.css": "css/style.less"  //destination file and source file
        }
      }
    },
	  jade: {
		  compile: {
			options: {
			  pretty: true,
			},
			files: {
			  "index.html": ["index.jade"]
			}
			  
		  }
		},
	  watch: {
		  stylesless: {
			options: { livereload: true },
			files: ['css/style.less', 'css/header.less', 'css/generic.less', 'css/global.less', 'css/components.less'],
			tasks: ['less:development']
		  },

		  jade: {
			options: { livereload: true },
			files: ['index.jade', 'header.jade', 'main.jade'],
			tasks: ['jade']
		  }
		},
   
  });
 	grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jade');
	grunt.loadNpmTasks('grunt-contrib-watch');
  	grunt.registerTask('default', ['less', 'jade', 'watch']);
};

 

Different plugins we initialize in the grunt file may have different ways to initialize and may have different options.

Few things that are must in a grunt file are:

pkg: By this we tell the grunt the plugin we are using are defined in package.json file.

grunt.loadNpmTasks: This function load the tasks from specified plugin in package.json installed via npm.

grunt.registerTask: Only those task will run that are specified in that function.

Grunt has many benefits like improved efficiency, productivity, and reduction of multiple software for workflow, even some new frameworks or plugins want javascript task runner for their installation. The problems I found with any javascript task runner is that initially set up took time. Secondly, the speed varies on different operating system i.e it is fast in mac and ubuntu while slow in windows.

At last I can say one thing grunt can’t solve all the problem but it is worth to check any javascript task runner at least once.