1. grunt是什么
一个可以运行 各种处理前端繁琐操作（压缩文件，删注释，测试等等）的插件 的平台。
所谓的自动化，就是插件帮你处理了各种繁琐的操作。而grunt的作用就是作为主管分配任务给插件，实现自动处理。
2. 如何使用
- 安装nodejs,与npm，必须的
- 安装grunt命令行到系统，从而可以在任何位置使用grunt
$ npm install grunt-cli -g //-g 的意思是全局
-
配置package.json 文件与 gruntfile.js 文件，以下以一个demo作为例子，新建文件夹内容如下：
其中dest是处理完的文件，node_modules是库，src是源码，test是测试
- package.json是npm的库清单，写上要导入什么库，之后在所在目录输入下面的命令就可以自动导入
$ npm install
package.json也可以通过以下命令生成。
$ npm init
package.json的文件内容是大致是这样
{
"name": "project-name",
"version": "1.0.0",
"description": "...",
"main": "index.js",
"keywords": [
"flux",
"react"
],
"repository": "github_username/repository_name",
"author": "your name",
"license": "MIT",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^1.0.0",
"grunt-contrib-connect": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-htmlmin": "^1.2.0",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-qunit": "^1.1.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"jshint": "^2.9.1",
"uglify": "^0.1.5",
"watch": "^0.17.1"
}
}
另外库也可以一个一个导入, 加了--save-dev可以自动写入到package.json文件中
$ npm install grunt-contrib-uglify --save-dev
- gruntfile.js是配置要执行的任务，文件内容大致如下
module.exports = function(grunt) {
grunt.initConfig({
//载入npm的库清单，必须
pkg: grunt.file.readJSON("package.json"),
//以下是插件的具体配置，各种插件的配置可参考官网，下面是一些例子
//concat，合并文件
concat:{
options:{separator: ";"}, //合并的分隔符
dist:{
src:['src/*.js'], //要合并的文件
dest:'dest/<%= pkg.name %>.js' //合成后的文件
}
},
//minify js 压缩JS
uglify:{
options:{
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'
}, //banner 就是在压缩后的文件开头生成一个标签，这里是名字+日期
dist:{
src:["<%= concat.dist.dest %>"], //表示要压缩concat之后的文件
dest:"dest/<%= pkg.name %>.min.js" //压缩后的文件
}
},
//单元测试的工具
qunit:{
files:["test/*.html"]
},
//js的语法检查
jshint:{
files:['Gruntfile.js', 'src/*.js', 'test/*.js'],
},
//实现监控的工具，开启后每次改动文件都会执行里面定义的任务
watch:{
files:['<%= jshint.files %>', '<%= qunit.files %>'],
tasks:['jshint', 'qunit']
}
});
//载入库，必须的
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
// 默认任务，命令行输入'grunt'运行，分先后顺序
grunt.registerTask('default', ['concat' ,'uglify']);
// 自定义任务, 命令行输入 'grunt test' 运行，test就是自定义的名字
grunt.registerTask('test', ['jshint', 'qunit', 'watch']);
};
配置完之后就可以在命令行输入 grunt 来运行了
更多查看grunt官网
3. 总结
其实就是写两个文件package.json, gruntfile.js
