Grunt Automation Tools

Grunt and Grunt plugins are installed and managed by NPM, and NPM is the package Manager for node. js.

Installing the CLI

First, you need to install the grunt command line (CLI) into the global environment first.

NPM install-g GRUNT-CLI

Once the above command is executed, the grunt command is added to your system path and can be executed in any directory at a later time.

The task of the Grunt CLI is simple: Calls Gruntfile are Grunt in the same directory. The benefit is that it allows you to install multiple versions of Grunt on the same system at the same time.

How the CLI works

Each time grunt he runs, he uses the system provided by node to require() find locally installed Grunt. It is because of this mechanism that you can run in any subdirectory of the project grunt .

If you find a locally installed GRUNT,CLI, load it, pass Gruntfile the configuration information in, and then perform the task that you specified.

General steps

1. Move the current directory of the command line to the project's root directory.
2. Executes npm install the library that the Command installation project relies on.
3. Executes the grunt command.

Preparatory work

It is generally necessary to add two files to your project: package.json and Gruntfile .

Package.json: This file is used by NPM to store the item's metadata in order to publish the project as a NPM module. You can list the project-dependent grunt and grunt plugins in this file and place them in the Devdependencies configuration section.

{ "name": "My-project-name",

"Version": "0.1.0",

"Devdependencies": {

　　　　"Grunt": "~0.4.5",

　　　　"Grunt-contrib-jshint": "~0.10.0",

　　　　"Grunt-contrib-nodeunit": "~0.4.1",

　　　　"Grunt-contrib-uglify": "~0.5.0 "

}

}

gruntfile: This file is named Gruntfile.js or Gruntfile.coffee , used to configure or define tasks (Task) and load the grunt plug-in.

Installing the grunt and grunt plugins

The package.json simplest way to add grunt and grunt plugins to existing files is through npm install <module> --save-dev commands.

For example: NPM install Grunt-contrib-jshint--save-dev

Gruntfile file case

File Merge: Merge the a.js,b.js,c.js from the SRC directory into the abc.js of the Dest directory

Module.exports = function (grunt) {
Project configuration
Grunt.initconfig ({
Pkg:grunt.file.readJSON (' Package.json '),
Concat: {
Options: {
Separator: '; '
},
Dist: {
SRC: [' src/a.js ', ' src/b.js ', ' src/c.js '],
Dest: ' Dest/abc.js '
}
}
});
Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Default task
Grunt.registertask (' Default ', [' concat ']);
}

File compression:

Module.exports = function (grunt) {
Project configuration
Grunt.initconfig ({
Pkg:grunt.file.readJSON (' Package.json '),
Uglify: {
Options: {
Banner: '/*! <%= pkg.file%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '
Preservecomments: ' All ',//Do not delete comments, can also be false (remove all comments), some (retain @preserve @license @cc_on comments)
Report: "min"//output compression rate, optional value has false (not output information), gzip
Beautify the Code
Beautify: {
Chinese ASCII, very useful! God configuration to prevent Chinese garbled characters
Ascii_only:true
}
},
Build: {
SRC: ' src/<%=pkg.file%>.js ',
Dest: ' dest/<%= pkg.file%>.min.js '
},
BUILDALL1: {//Task three: Compress all JS files in JS folder according to the original file structure
Files: [{
' Dest/a.min.js ': ' Src/a.js ',
' Dest/b.min.js ': ' Src/b.js ',
' Dest/c.min.js ': ' Src/c.js ',
}]
},
BUILDALL2: {//Task three: Compress all JS files in JS folder according to the original file structure
Files: [{
Expand:true,
CWD: ' src ', under the//js directory
SRC: ' **/*.js ',//all JS files
Dest: ' dest '//output to this directory
}]
},
Release: {//Task IV: Merging compressed a.js and B.js
Files: {
' Dest/ab.min.js ': [' dest/a.min.js ', ' src/b.min.js ']
}
}
}
});
Load plug-ins that provide "uglify" tasks
Grunt.loadnpmtasks (' grunt-contrib-uglify ');
Default task
Grunt.registertask (' Default ', [' uglify ']);

Default task (Specify execution order)
/* Grunt.registertask (' default ', [' uglify:release ']);
Grunt.registertask (' Mina ', [' Uglify:builda ']);
Grunt.registertask (' minb ', [' uglify:buildb ']);
Grunt.registertask (' Minall ', [' Uglify:buildall ']); * *

}

Reference: http://www.gruntjs.net/getting-started

Grunt Automation Tools