标签：
以前自己太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‘]); };
标签：
原文地址：http://www.cnblogs.com/hutuzhu/p/4325560.html
