Installing Grunt and Plugins

Installing Grunt Task Runner is simple enough when you know how to install it, but it's quite frustrating when you are installing it the first time. Once you started using grunt, you will never leave it. Here are some simple steps to install and run.

1. Download and install NodeJS from here.
Once you are done with the installation of NodeJS, create folder somewhere on your hard-drive and name it as first-grunt-project. Now, create a project structure inside the first-grunt-project folder as:

-first-grunt-project
  -- dev
     -- js 
     -- styles
        -- less 
           -- variables.less 
           -- colors.less 
           -- style.less /*we need to import all less files in this file with @import "variables.less" and so on
     -- css 
        -- style.css 
     -- index.html 

Now right click inside the root folder that is first-grunt-project and select the option Open command window here. Since you have already installed NodeJS just verify the version with a command node --version that should show you the NodeJS version you have installed.

2. Create a new file called package.json and save it at the root directory:
first-grunt-project
  -- package.json
Add this code in package.json file and save it. You can check the current version of package.json here. More information on package.json can be read at the npm website.

{
  "name": "grunt-project", 
  "version": "1.2.5" 
}

3. Go to command window and type npm install -g grunt-cli, this will install the cli for you.

Note: npm stands for Node Package Manager.
And cli stands for Command Line Interface

4. Create a new js file and save it as Gruntfile.js. Add the following code in it. This code is to compile LESS files to CSS. Refer the video below for installing JavaScript plugins.

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          // target.css file: source.less file
          "styles/style.css": "styles/less/styles.less"
        }
      }
    },
    watch: {
      styles: {
        files: ['styles/less/**/*.less'], // which files to watch
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
});

//plugins
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

//tasks
grunt.registerTask('default', ['less','watch']);

};

5. Go to command window and type npm install grunt --save-dev this will install grunt for you.

You are ready with the installation of grunt, you can confirm that by running grunt --version command. After installing grunt, install the two plugins we are using in the gruntfile.js above for compiling LESS file - that are contrib less and contrib watch.

Videos:
All about packge.json and gruntfile.js:


All about creating a basic project with Grunt:

Create another folder and try with installing grunt first and the cli and then the next steps from here - http://ericnish.io/blog/compile-less-files-with-grunt and see the effect