这两天公司让研究js压缩,去掉js中的备注和空格,网上看了一些技术方案,都需要js代码合并,而我们并不想把js代码合并成一个js。所以就看到了grunt的配置压缩,下面我们直接来看过程吧。
安装配置环境
一、先安装grunt环境:
npm install -g grunt-cli
二、创建package.json文件,控制grunt插件的版本等信息
1、可以手动创建一个package.json文件,格式如package.json图
2.可以使用代码创建:
package.json 创建之后package.json格式npm init
三、添加需要用到的插件:
这里我先把所需要的插件全部添加到项目中:
添加完插件之后的package.jsonnpm 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
四、创建配置文件 ------- 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文件重命名之后的文件,来替换原文件中引用该文件的地方,这样我们就用担心,加密之后文件引用出现错误了。
网友评论