以前自己太low了，都没用过高大上的前端自动化打包工具，开发方式也是偏传统的。加入到新的团队后得拼命赶上啊，前端技术更迭太快，各种技术层出不穷，智商都快不够用了。看人家都用的牛逼哄哄的技术，自己还守着
那点小白技术就说不过去了，所以有些环境逼着你进步，有些环境是让你不知不觉就堕落了。不扯淡了，开始学习吧。
1、Grunt的安装
Grunt依赖Nodejs环境，所以安装前需要安装nodejs，至于怎么安装有很多教程，有一键安装的安装包，安装过程比较容易。这里加入已经安装好了Nodejs，
在CMD中输入命令即可安装Grunt，容易吧。
npm install -g grunt-cli
2、新建一个Grunt项目
新建一个文件名，名称随便定，我这里就取的grunt_test。在该文件下新建2个文件，一个是package.json，一个是Gruntfile.js，一般来说这两个文件是必须的。
package.json：
{
"name": "grunt_test",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-sass": "*",
"grunt-contrib-clean": "latest",
"grunt-contrib-concat": "latest",
"grunt-contrib-requirejs": "latest",
"grunt-contrib-htmlmin": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-copy": "latest",
"grunt-usemin": "latest",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"matchdep": "*"
},
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "huzhao",
"license": "ISC"
}
name是你的grunt项目名称，不是开发的项目名称哈。devDependencies字面意思就是依赖嘛，Grunt有很多插件，很多流程的实现都依赖插件，devDependencies就是把你需要的插件列出来。
3、下载插件
package.json中列出了很多插件，使用时需要把他们下载下来，进入你的grunt项目内，在命令中输入：
npm --install
上面命令会把需要的插件下载到本地，这个时候grunt项目里就多了很多文件。
4、Gruntfile.js
基本所有的实现都在该文件里了，所以是最重要的。
module.exports = function(grunt) { // Do grunt-related things in here };
这是一个容器，所有的内容方法必须写在里面。
初始化：
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
pkg加载package.json，读取里面的内容。
uglify是一个压缩js的插件，把源文件压缩成目标文件。
// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
自定义任务：
grunt.registerTask('default', ['uglify']);
默认是default，即你在grunt项目里打开命令窗口输入：grunt就能运行了，这里也可以改成别的名称，通常是对应开发的项目名称，比如grunt_project，那么运行的时候就输入:grunt grunt_project。
简易的完整代码：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', 'uglify']);
};