How to learn gruntjs

 

कैसे सीखे  जावास्क्रिप्ट ग्रन्ट ज स ?

Learned Grunt js

Grunt Mainly for Task automation…….

Grunt: The JavaScript Task Runner

gruntjs.com

Step -1.First Install grunt command globally for operations once for all projects by going to Command Prompt

npm install -g grunt-cli

g means globally no seprate for projects

 

Step-2 then goto any project to creat config file package.json

npm init

Step-3 then in package.json delete scripts license

 

Step-3 Install grunt for specific project

npm install grunt –save-dev

 grunt1

The file for package.json below

grunt2

Step-4 Install grunt plugins for specific task

 

npm install grunt-contrib-…….. plugin name

npm install grunt-contrib-uglify –save-dev   |ex:

grunt3

npm install grunt-contrib-concat –save-dev

 

Step-5 Creat Gruntfile.js for specific project

 

now add Gruntfile.js

 

file for giving special instructions

module.exports = function(grunt){

grunt.registerTask(“default”, “”, function(){

grunt.log.write(“This grunt task is practise only”);

});

});

 

 

we will provide the final file combine/merge

 

 

module.exports = function(grunt){

 

grunt.initConfig({

//Basic settings and info about my plugins

pkg: grunt.file.readJSON(“package.json”),

//name of plugin wihout the grunt-contrib

cssmin:{

combine: {

files: {

‘css/main.css’:[‘css/reset.css’, ‘css/style.css’]

}

}

},

 

//uglify

uglify:{

dist: {

files: {

‘js/index.min.js’:[‘js/index.js’]

}

}

}

});

// Load the plugin

grunt.loadNpmTasks(‘grunt-contrib-cssmin’);

grunt.loadNpmTasks(‘grunt-contrib-uglify’);

//Do the task

grunt.registerTask(‘default’, [‘cssmin’, ‘uglify’]);

};

 

 

 

2nd format

Cssmin

grunt4

npm install -g grunt-cli

module.export = function(grunt){

grunt.init({

min {

dist {

src:’calcu.js’,

dest : add.min,js’

}

grunt.js

grunt min

all  minify

provide array []

alll *.js

//Can also add some text at beging

//By adding

Meta : { banner : ‘/*tttthis is banner*/’},

Then in src : [‘<banner>’,]

 

 

Watching the files for autmatically task runner

grunt watch

Ctrl+c

to stop watch

 

Concatenate files build system

3rd way

Npm install –S grunt

Gurnt is task runner

Resgiter of task
grunt.registerTask(‘speak’, function(){

Console.log(‘speak’);

 

})

Now say

Grunt speak

–speak

grunt.registerTask(‘yell, function(){

Console.log(‘yell);

 

})

grunt.registerTask(‘both, [‘speak’, ‘yell’]

})

 

Now

Grunt.initConfig({

Concat:{same as above}

Grunt.loadNpmTask(‘grunt-contrib-concat’);

For  autmatically concate files or anything

Watch is here

 

Grunt watch …

Waiting …..status

module.exports = function(grunt){

 

grunt.initConfig({

 

pkg : grunt.file.readJSON(“package.json”),

 

//name of pulgin without grunt contrib

 

concat: {

options : {

separator: ‘;’ ,

},

dist : {

src: [‘controller/firstFormCntrl.js’, ‘controller/mainCntrl.js’, ‘controller/reviewCntrl.js’, ‘controller/secondFormCntrl.js’],

dest: ‘dist/built.js’

},

},

 

});

 

//load the plugins

grunt.loadNpmTasks(‘grunt-contrib-concat’);

 

grunt.registerTask(‘default’, ”, ‘concat’);

};

 

Now autmate the task

As follows

Before need to installl

Plugins

Npm install grunt-contrib-watch –save-dev

module.exports = function(grunt){

               

                grunt.initConfig({

 

                                pkg : grunt.file.readJSON(“package.json”),

 

                                //name of pulgin without grunt contrib

 

                                concat: {

                                                options : {

                                                                separator: ‘;’ ,

                                                },

                                                dist : {

                                                                src: [‘controller/firstFormCntrl.js’, ‘controller/mainCntrl.js’, ‘controller/reviewCntrl.js’, ‘controller/secondFormCntrl.js’],

                                                                dest: ‘dist/built.js’

                                                },

                                },

                                watch:{

                                                scripts: {

                                                files: [‘controller/**/*.js’],

                                                tasks: [‘concat’],

 

                                                },

                                }

 

                });

 

                //load the plugins

                grunt.loadNpmTasks(‘grunt-contrib-concat’);

                grunt.loadNpmTasks(‘grunt-contrib-watch’);

 

                grunt.registerTask(‘default’, ”, ‘concat’);

};

 

Purchasing hosting and a domain name

If you want complete control of website, then you need to purchase: