关于使用 grunt usemin rev 的问题

2015-11-12 13:45:08 +08:00
 ffx0s

今天使用 grunt 打包将代码发到线上的时候,发现有张图片( xx.1234.png ) 404 了。图片是在 index.css 里 background 引用的。然后查找原因发现是在打包的过程中 usemin 去替换 index.css 里 xx.png 的引用后没有重新去计算 md5 和生成新的一份 index.css ,因为我们用的是 cdn , index.css 已经有缓存了,所以线上访问的 index.css 其实是上一个版本的。
找到了一个关于 md5 定位的链接( https://github.com/fouber/blog/issues/5 ),说明的应该就是这种情况。请问怎么解决这种情况,难道真的要手动去加版本号吗?

1746 次点击
所在节点    前端开发
1 条回复
ffx0s
2015-11-12 14:01:53 +08:00
![此处输入图片的描述][1]

问题就出在步骤 2 上,步骤 2 计算的文件 md5 并不是文件最终的 md5 ,由于分步骤计算,第 3 步替换引用使得文件内容修改,文件最终的 md5 其实和第 2 步算出的并不一致,这导致 css 和图片的依赖关系没能建立起来。比如我们某次迭代,只更新了图片,按照上述计算,我们将得到:
[1]: https://cloud.githubusercontent.com/assets/536297/7784416/6c6b5a44-0197-11e5-9b3d-ac4b9c95a033.png
请注意,我们在第 2 步中,如果仅仅根据单一文件内容进行 md5 计算,那么,只有图片因为内容改变修改了 md5 戳(红色字标出),但 css 的内容没有发生变化,所以针对 css 计算的 md5 戳与上个版本一致(蓝色字标出)

接下来进行步骤 3 的替换,严重注意,此时 index.html 替换后引用的 css 地址相比上个版本是 没有改变的,这意味着,这次发布的版本,虽然 css 内容更新了图片的地址,但 index.html 中却没有更新 css 路径,进而导致浏览器最终还是使用了上个版本的 css 文件,我们这次的图片更新没!生!效!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/235613

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX