GruntJs安装及使用入门（自定义grunt任务,合并压缩js、css）
一、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/
