V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ffx0s
V2EX  ›  前端开发

关于使用 grunt usemin rev 的问题

  •  
  •   ffx0s · 2015-11-12 13:45:08 +08:00 · 1632 次点击
    这是一个创建于 3085 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天使用 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 ),说明的应该就是这种情况。请问怎么解决这种情况,难道真的要手动去加版本号吗?

    1 条回复    2015-11-12 14:01:53 +08:00
    ffx0s
        1
    ffx0s  
    OP
       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 文件,我们这次的图片更新没!生!效!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5500 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 03:36 · PVG 11:36 · LAX 20:36 · JFK 23:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.