grunt 实现一个简单的打包、 js压缩

这两天公司让研究js压缩，去掉js中的备注和空格，网上看了一些技术方案，都需要js代码合并，而我们并不想把js代码合并成一个js。所以就看到了grunt的配置压缩，下面我们直接来看过程吧。

安装配置环境

一、先安装grunt环境:

 npm install -g grunt-cli

二、创建package.json文件，控制grunt插件的版本等信息

1、可以手动创建一个package.json文件，格式如package.json图

2.可以使用代码创建： 

npm init   

package.json

创建之后package.json格式

三、添加需要用到的插件：

这里我先把所需要的插件全部添加到项目中：

npm install grunt --save-dev

npm install load-grunt-tasks --save-dev

npm install time-grunt --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-clean --save-dev

npm install grunt-contrib-uglify --save-dev

添加完插件之后的package.json

四、创建配置文件 ------- Gruntfile.js，这里我只展示一下结合自己项目文件实现的一下简单方法，配置参数如下：

Gruntfile.js

Gruntfile.js

文件目录

五、运行：

1、单独调用每一个服务

grunt copy //将文件从源文件拷贝到目标文件

grunt clean //清除文件

grunt unglify //压缩js从源文件到目标文件

2、构建组合的build服务

grunt build

总结：

这里只是记录一下简单的操作和实现的例子，具体的实现还是需要查grunt文档的api查看。grunt中文文档地址：http://www.gruntjs.net/

web的缓存一直都是一个头疼的事情，grunt中还提供了grunt-rev插件，将文件名增加md5加密的数据，这样的话文件中只要有修改的地方md5加密都会发生改变，这样我们就能保证最新的文件能够及时更新。

grunt-usemin插件，rev将MD5文件重命名之后的文件，来替换原文件中引用该文件的地方，这样我们就用担心，加密之后文件引用出现错误了。