回想最早年资源版本控制,是不是类似如下
1 2 3 |
<script src="a.js?t=20140404"></script> <script src="a.js?v=1.1.0"></script> |
这是一个最常见的古老的版本控制方式,简单直观易用,缺点就是我们常常会因为缓存因为覆盖造成发布外网时出现资源同步问题。对于没啥访问量的小型站点折腾折腾也就过了,如果项目很大访问很大,一但出现问题波及很广你自然少不了被领导被上级抓去捡肥皂的命运。
所以现在有了很多居于 gulp 或 grunt 的 hash 值生成静态文件的工具,没错今天我要讲的也是这个,但是会换点花样和玩法。
最基本的 rev 玩法
1 2 3 4 |
<!-- build:js js/all.js --> <script src="js/all.js"></script> <!-- endbuild --> |
通过定义 build 再在 gulpfile.js 做 rev() 配置,比如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
return gulp.src("*.html") .pipe(userefAssets) // Concatenate with gulp-useref .pipe(jsFilter) .pipe(uglify()) // Minify any javascript sources .pipe(jsFilter.restore()) .pipe(cssFilter) .pipe(csso()) // Minify any CSS sources .pipe(cssFilter.restore()) .pipe(rev()) // Rename the concatenated files .pipe(userefAssets.restore()) .pipe(useref()) .pipe(revReplace()) // Substitute in new filenames .pipe(gulp.dest('dist')); |
这样就可以动态将 build 内的 css,js 等文件合并压缩并 md5 命名,但是这种做法的缺点也很明显,写法繁琐,而且不支持特殊规则比如 css 内部的 background:url(),如果想要支持这种替换还得自己做插件做规则匹配。
于是就有了巧妙的利用 manifest.json 来帮助我们做更智能化的 md5 规则
1 2 3 4 5 6 7 |
gulp.task('ift-js', ['move-js'], function(){ return gulp.src('./dev/js/**') .pipe(rev()) .pipe(gulp.dest('./dist/js/')) .pipe(rev.manifest({path:'ift-js.json'})) .pipe(gulp.dest('./dist/')); |
通过这种形式我们使用主动式创建 md5 文件让本地文件自然形成 md5 拷贝版同时生成了 json 对应表
然后通过扫描全部资源文件,通过正则匹配确认文件被使用的是原文件还是 md5 文件,如果使用的是原文件,系统自动删除已生成的 md5 文件,如果使用了 md5 文件,系统自动删除源文件,这种形式消除了冗余拷贝
1 2 3 4 5 6 |
return gulp.src(['./dist/css/**','./dist/js/**','./dist/*.html'],{base:'dist'}) .pipe(replace(/js\/[\S]*\\?\_\_\_md5/g,function(match){ return md5(match,'js/'); })) .pipe(gulp.dest('./dist/')); |
而这边使用的规则避开了传统的 bulid 注释形式,因为我觉得这种写法真的有些繁琐了,所以这边采用时间戳形式
于是就有了如下成果
调用方
1 2 3 4 5 |
<script src="/js/console.js"></script> <script src="/js/plugin.js?___md5"></script> <script src="/js/section.js?___md5"></script> <script src="/js/index.js?___md5"></script> |
开发目录
1 2 3 4 5 6 |
dev/js - console.js - index.js - plugin.js - section.js |
发布目录
1 2 3 4 5 6 |
dist/js - console.js - index-a5fae3cd.js - plugin-0ddc6bc0.js - section-0c058d64.js |
可以看到根据自能匹配规则,js 目录下有三个文件被自动 md5,而调试文件因为没有 md5 标识保留了源文件拷贝。
me500 2016 年 7 月 4 日
如何把源文件生成的 md5 写入到压缩后文件的 header 中
银狐 2016 年 4 月 26 日
能提供下 gulpfile.js 配置文件吗
包包 2015 年 4 月 4 日
都写了什么东西,有头无尾的,像这些插件(
csso,cssFilter,userefAssets,replace
)在哪里安装没说
,下面的代码又冒出这种任务['move-js'],这个任务有什么用没说,就不能写详细一点吗
Axes 2015 年 4 月 2 日
sorry,看错。。。我还以为是 h5 的本地缓存呢
Axes 2015 年 4 月 2 日
Alloy 的项目里有用 manifest 吗?这东西目前能用?就单单那个无论怎么刷都刷不掉当前页面文件缓存的坑都能让人崩溃了吧。。。。这样就算加 md5 版本号也没啥意义吧
tcdona 2015 年 4 月 2 日
huhu 大神,我对这块非常敢兴趣,请问能提供下示例代码吗?