一、Grunt.js简介（实现自动化）
1）简要说明：
1.GruntJs是基于node的javascript命令行工具，可以自动化构建、测试、生成文档的项目管理工具；
2.使用GruntJs可以自动化的管理子任务的运行；
3.很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等
2）使用原因：
1.合并js文件——为了明确模块分工，可能会将Javascript代码拆成很小很小的一个个js文件，为减少Http Request我们需要合并js文件
2.压缩js文件、css文件等，从而减小请求的文件。
3.源代码测试
4.将备注自动生成文档
二、GruntJs安装
1.安装node，npm（最新版本的node会自动安装npm）
2.安装命令行工具grunt-cli——npm install -g grunt-cli(-g 全局安装)
3.安装grunt及其插件——npm install --save -dev （安装完成后可以使用grunt -version查看版本）
4.若之前安装过旧版本的grunt可以使用npm unistall -g grunt-cli卸载
三、package.json文件说明
1)说明：package.json是项目配置文件，包括项目的依赖信息，以及作者、版本等信息
2)例子：
{
"name": "myProject",
"version": "0.1.0",
"author": "@wish",
"devDependencies": { //项目的依赖
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1", //校验，语法检查
"grunt-contrib-uglify": "~0.1.2", //压缩
"grunt-contrib-concat": "~0.1.1" //合并文件
}
}
四、利用grunt压缩JS文件/合并JS文件
1）在node安装路径下建立工程 testJsUglify
2）配置package.json文件，放置在工程的根目录
"name": "testJsUglify",
"version": "0.1.0",
"author" : "@wish",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}
3）安装工程的依赖插件（package.json中配置的信息）
命令行中进入工程根目录，执行命令：npm install
工程testJsUglify根目录中增加了node_modules目录，包含grunt、grunt-contrib-concat、grunt-contrib-jshint、grunt-contrib-uglify四个子目录
4）将需要压缩的js文件添加到工程，本例中在跟目录下建立assets文件夹添加文件test1.js和test2.js
/testJsUglify/assets/test1.js
/testJsUglify/assets/test2.js
5)创建grunt任务
创建Gruntfile.js文件，放置在根目录，内容如下：
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : { //合并文件
domop : {
src: ['assets/test1.js', 'assets/test2.js'], //源文件目录
dest: 'dest/result.js' //目标文件目录，自动创建dest目录
}
},
uglify : { //压缩文件
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build : {
src : 'dest/result.js',
dest : 'dest/result.min.js'
}
}
});
// 载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify']);
};
6）执行grunt任务
工程根目录执行grunt命令，合并和压缩完成，在dest目录中即可看见result.js和result.min.js文件
五、使用grunt合并压缩CSS文件
说明：合并和压缩过程类似js文件，下面详细说明：
1）创建工程testGruntCSS
2）配置package.json文件，放置工程的根目录
{
"name":"testGruntCSS",
"version": "0.1.0",
"author" :"@wish",
"devDependencies":{
"grunt":"~0.4.0",
"grunt-contrib-concat":"~0.1.1",
"grunt-css":">0.0.0"
}
}
3)安装依赖插件 工程根目录执行 npm install
根目录中增加文件夹node_modules,子目录分别为grunt，grunt-contrib-concat和grunt-css文件夹
4）将需要合并和压缩的css文件添加到工程
/testGruntCSS/assets/css1.css
/tetGruntCSS/assets/css2.css
/tetGruntCSS/assets/css3.css
5)工程根目录下新建Gruntjs文件，内容如下：
module.exports = function(grunt){
grunt.initConfig(
{
pkg:grunt.file.readJSON('package.json'),
concat:{
css:{
src:['assets/*.css'],
dest:'dest/all.css',
}
},
cssmin: {
css: {
src: 'dest/asset/all.css',
dest: 'dest/asset/all-min.css'
}
}
});
// 载入concat和css插件
grunt.loadNpmTasks('grunt-contrib-concat');//用于合并
grunt.loadNpmTasks('grunt-css');//用于压缩
grunt.registerTask('default',['concat','cssmin']);//任务
6)执行grunt任务
进入工程根目录，执行grunt命令，合并压缩完毕
进入dest目录即可看见all.css文件和all.min.css文件
六、自定义Grunt任务
1）新建工程defineGrunt
2）工程根目录配置package.json文件
{
"name": "defineGrunt",
"version": "0.1.0",
"author": "@wish",
"devDependencies": {
"grunt": "~0.4.0"
}
}
3)安装依赖插件grunt
工程根目录输入 npm install
4) 自定义任务，根目录创建Gruntfile.js文件，内容如下：
module.exports = function(grunt){
grunt.registerTask('myGrunt','输出不同参数',function(arg1,arg2){
if(arguments.length === 0){
grunt.log.writeln('任务'+this.name+'没有传参数');
}else if (arguments.length === 1) {
grunt.log.writeln('任务' + this.name + "有一个参数是" + arg1);
} else {
grunt.log.writeln('任务' + this.name + "有两个参数分别是" + arg1 + ", " + arg2);
})
};
5)测试任务
1.进入工程目录，输入grunt myGrunt ,输出：任务myGrunt没有传参数；
2.进入工程目录，输入grunt myGrunt:argument1 ,输出：任务myGrunt有一个参数是argument1；
3.进入工程目录，输入grunt myGrunt:argument1:argument2 ,输出：任务myGrunt有两个参数，分别是argument1, argument2；
参考：http://home.cnblogs.com/u/snandy/