[Gulp.js系列教程][13]版本修订

版权声明

本文出自 “ 幻冥极地 ” 博客 ,作者 小貘 采用 署名-非商业性使用-相同方式共享 协议。转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
https://www.moorehy.com/archives/176

原文跳转:Introduction to Gulp.js 13: Revisioning

这是我Gulp.js系列教程的第13篇。今天我将编写一个任务(task),来为我的静态文件(assets)提供版本修订支持。

为生产部署拷贝矢量文字

在编写有趣的修订静态(asset)文件任务前,我不得不先编写另一个无聊而短小的任务,它只做一件简单的事情:拷贝字体文件到生产部署用的静态(assets)文件夹。

版本修订

静态文件(assets)优化已经完成了。但是还有一个重要的事情还没有做,那就是“版本修订”。

为了追求更好的性能,浏览器将总会长时间缓存静态(assets)文件。现在的硬盘空间已经变得越来越巨大,但是请求文件的速度人没有飞速提高(尤其在移动端)。所以如果你缓存静态文件在浏览者的硬盘上,就会带来一个问题。如果你更新一个文件,浏览器将仍然使用旧的文件。所以,如果你设置为缓存十年,那么你的用户将不会得到新的静态文件(asset),除非他手动删除浏览器缓存(cache)。但是哪个用户会这么做?

这就是为什么我们需要重命名被修改的每个文件,从而使缓存(cache)失效。想当初我们不得不手动添加修订号到我们的静态文件上,像 image_r1.pngimage_r2.png 。真操蛋!(译注:原作者爆粗口跟偶木关系。。。)。现在,读取一个文件的内容,获取生成的校验码已经变得很容易了。除非文件被修改,否则校验码将永远不变。

我的下一个任务(task)将重命名所有静态文件(assets)。这样, application.css 将重命名为 application-f084d03b.css 。即使我只修改文件中的一个符号,它也将得到一个新的文件名。

安装用于处理静态文件重命名的 gulp-rev 包:

这个任务将重命名全部静态文件,并创建一个包含全部文件的JSON文件,里面包含重命名了哪里,以及新旧文件名。

替换到静态文件的路径

生产部署构建的最后一步是替换所有文件中包含修订后文件名的静态文件。

这个任务(task)将需要 gulp-rev-collector 来替换静态文件的路径名:

我们只替换包含在清单文件中的静态文件路径。不包含任何图片或二进制文件。修改器(Revision collector)将尝试打开并销毁大部分二进制文件。

这个任务将查看 manifest.json 文件,替换所有HTML,CSS,JavaScript和Text等文件中的每个路径。

生产部署构建完成!现在本系列教程仅剩一件事情没讲了,那就是:部署网站到服务器。

源码

查看Github上的源码

总结

Gulp.js系列教程的第13部分结束了。今天我们学到了如何修订静态文件,并替换相关文件中的链接。

发表评论

电子邮件地址不会被公开。 必填项已用*标注