天天看点

gulp-rev:项目部署缓存解决方案----gulp系列(六)

引言:

  前端工程化部署比较重要考虑的一个问题是缓存 ,可以参考 《变态的静态资源缓存与更新》。

  使用gulp-rev解决的就是《变态的静态资源缓存与更新》提出的问题。

rev会做什么:

  根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。

     替换html里静态资源的路径为带有md5值的文件路径,这样html才能找到资源路径。有些人可能会做:静态服务器配置静态资源的过期时间为永不过期。

达到什么效果:

  静态资源只需请求一次,永久缓存,不会发送协商请求304

  版本更新只会更新修改的静态资源内容

  不删除旧版本的静态资源,版本回滚的时候只需要更新html,同样不会增加http请求次数

配置:

  在系列(五)代码的基础上,再进行扩展。

1.安装:

gulp-sync 处理任务异步

2.找到gulp->config.js,配置rev,配置css和js的revJson输出地址:

3.gulp->tasks里修改css和js任务,这里只贴js任务代码(css雷同):

在输出文件之前执行rev(),输出后的文件就会生成hash码,如图:

gulp-rev:项目部署缓存解决方案----gulp系列(六)

执行以下两句会生成一个json,里面存储的是文件原名和生成hash文件名的对应

gulp-rev:项目部署缓存解决方案----gulp系列(六)

4.gulp->tasks里新建rev任务:

config.revJson 是js和css任务生成的文件名对应关系的json,config.src是所有html文件。

所以revCollector 就是根据文件名对应关系,遍历所有html,替换文件命名,替换后如下图:

gulp-rev:项目部署缓存解决方案----gulp系列(六)

至此rev任务就完成了。

5.加入gulp-sync:

  更优雅的同步处理任务还是得加上它。

     把之前的deploy和default任务合并到combo.js里,并加入gulp-sync

gulp-rev:项目部署缓存解决方案----gulp系列(六)

当前这个rev任务,只是遍历html替换静态资源命名。

所有生成revJson的任务执行完之后,才能执行rev。

注意:使用这个缓存部署方式可以设置静态资源服务器缓存永远不会过期(非必要)

>>> github 地址,请选择 rev 分支<<<

gulp-rev:项目部署缓存解决方案----gulp系列(六)

有没有人打赏?没有的话,那我晚点再来问问。

gulp-rev:项目部署缓存解决方案----gulp系列(六)

关注大诗人公众号,第一时间获取最新文章。

gulp-rev:项目部署缓存解决方案----gulp系列(六)

如果你有购买钢琴的打算,可以从这里了解到在售信息,价格实惠品质保障。

---转发请标明,并添加原文链接---