前端工程化之文件版本号的更新

前言

对于前端静态资源缓存的处理，一般有两种方式：
1、将版本号添加到资源链接的后面
2、将版本号拼接到文件名的后面
第一种的劣势我就不细述了，且无法做到非覆盖式更新，所以我们这里只讨论第二种方式。

Gulp

使用 gulp-rev + gulp-rev-collector是现阶段比较通用的方法，其使用效果如下:

"/js/main.js" => "/dist/main-67079fb.js"   
"/css/main.css" => "/dist/css/main-8d0a5c6.css"    

Webpack

webpack可以为所有导入的资源添加对应的hash文件名，所以对于使用webpack打包的开发场景，文件名的处理并不是问题，而且通过ManifestPlugin插件可以顺便输出以下json，即源文件和输出文件名的映射。

{
  "static/main.css": "static/main.f23f606.css",
  "static/main.js": "static/main.faa7d80.js",
  "static/runtime.js": "static/runtime.6821490.js",
  "static/assets/img/favicon.ico": "static/assets/img/favicon.1c4070c.ico"
}  

所以现在的问题是如何根据这份json，更新已有的引用地址。
于是，基于此，借鉴了gulp-rev 和 gulp-rev-collector，另外造了轮子：gulp-manifest-replace。
具体使用方法可以看github上的文档。