1) What is grunt?
Grunt is javascript task runner that does thinks that you would do normally with your code.
For example: Normaly when you develop the code and upload it to the server. Your first moto is to make your site faster. for that you minify your css file and js file. Normaly you copy your css code and paste it to the third party website that will
minify your css and js file. Each time, each file you have to copy and paste your code and need to minify it. This process is time consuming. Grunt solve this problem.

2) How to Install Grunt?
Following are the steps to install grunt
a) install node.js
– Go to https://nodejs.org/en/download/
– Download and install nodejs
b) install grunt-cli
– Go to command prompt and install grunt command line interface.
– command: npm install -g grunt-cli

3) Preparing a new grunt project.
– Create a grunt folder on desktop
– open command prompt and go to your project
– create package.json with following command
– Command: npm init
– enter name, version, author information
– Need to save with next command: npm install grunt –save-dev
– You will see node_modules folder created in your project directory with all installed grunt modules

Note: If you see error “Failed to parse package.json data” then clean npm cache with following command: npm cache clean

4) gruntfile.js
gruntfile is where you would register and load all of your plugins, all of your plugins will ran when you type command in
commandprompt (command: grunt)
You will get fatal error message when you type command grunt because yet you have not create gruntfile.js file in your
project directory. Create a file gruntfile.js with following basic code.

module.exports = function(grunt){
    grunt.initConfig({

    });
};

5) What are plugins ?
Plugins are like robots. You can think plugin are like as a robots. When you want to minify css their is one plugin in grunt (cssminify). This plugin will minify all css files and save your time.

6) Installing plugin in grunt
– Go to grunt website and find link for plugin
– Find plugin which you want to install. We are going to install cssmin plugin.
– Type next command: npm install grunt-contrib-cssmin –save-dev
– Above command will install cssmin plugin into your node_modules folder. Also your package.json file is updated.
– Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
– Command: grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
– so your gruntfile.js will look like

module.exports = function(grunt){
    grunt.initConfig({

    });
    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

– This code will load our plugin

7) How to use grunt plugin
– It is very easy to use plugin. some times it is easy and some time it is hard to use. We have installed cssmin plugin.
it is very easy to use. Now, in your gruntfile.js add following code.

module.exports = function(grunt){
   grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
     cssmin:{
       options:{

       },target:{
       files:{
       'output.css':['style.css', 'reset.css']
       }
    }
}
});

     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.registerTask('default',['cssmin']);
};

– Go to command prompt and run command: grunt
– You will see output.css will be created into your project directory.

Assignment: Create CSS folder and add two css file in that folder and generate output.min.css in that css folder using cssmin plugin

Solution:

module.exports = function(grunt){
    grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    cssmin:{
      options:{
       },
       target:{
         files:{
              'css/output.min.css':['css/reset.css','css/style.css']
       }
    }
  }
});

    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default',['cssmin']);
};

Why you need a build system

What should a build system do
A) Repetative Tasks
– Concatenating JavaScript
– Prefixing CSS
B) Utilities
– JSHint
– Uglify(compress/minify) JavaScript
C) Local Server
D) Live Reload

GRUNT – GULP – BRUNCH

Why is this good for you ?
– Less file requests for page load
– Faster file requests

Development workflow
– You can use cool technologies
– You can break code into multiple files
– Easier to avoid code conflicts
– You can avoid annoying, repetative tasks

*** Registering Tasks  ***

You can register task with following code.

grunt.registerTask('speak',function(){
console.log('I am speaking');
});

You can run this task with command: grunt speak

grunt.registerTask('read',function(){
console.log('I am reading');
});

You can run this task with command: grunt read

grunt.registerTask(‘both’,[‘read’,’speak’]);

You can run this task with command: grunt both

 

*** Plugin ***
1) grunt-contrib-concat
2) grunt-contrib-watch
Note: To exit from commandprompt (watch) press ctrl + c

3) gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    cssmin:{
          target:{ 
            files:{
           'dist/css/styles.css':['css/style-1.css','css/style-2.css']
          }
       }
    },
   concat: {
       js: {
         src: ['js/file-1.js', 'js/file-2.js'],
         dest: 'dist/js/scripts.js',
       },
       css: {
       src: ['css/style-1.css', 'css/style-2.css'],
       dest: 'dist/css/styles.css',
      }
   },
   watch: {
     js: {
     files: ['js/**/*.js'],
     tasks: ['concat']
   },
    css: {
    files: ['css/**/*.css'],
    tasks: ['concat']
  },
 }

});

grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default',['cssmin']);
grunt.registerTask('default',['concat']);
grunt.registerTask('default',['watch']);

};

Advertisements