[已过时] grunt-rev 和 grunt-usemin 替换静态资源 url 的配置

文章有点过时了, 目前我已经切换到 Gulp + Webpack, 推荐使用 Webpack 处理静态资源打包:

• http://segmentfault.com/t/web...

• https://github.com/search?l=j...

---

项目里使用了 @island205 的 grunt-rev 和 grunt-usemin 配置静态文件的配置,
考虑到这配置官方文档上没说清, 而且估计下次使用很可能忘记这些坑了..
这里做一些笔记, 解释一下参数怎么配合.

首先是 grunt-rev , 其实 GitHub 上写的还算详细,
就是 files 里的指定的文件都会被修改文件名, 文件名前加入 md5 字符串,
比如 css/app.css 被重命名为 css/ae35dd05.app.css 只之类的

rev:
  options:
    encoding: 'utf8'
    algorithm: 'md5'
    length: 8
  images_fonts:
    files: [
      src: [
        'static/images/**/*.{jpg,jpeg,gif,png,ico}'
      ]
    ] 
  css_js:
    files: [
      src: [
        'static/**/*.{js,css}'
      ]
    ]

然后是 grunt-usemin , 文档已经很长了.. 就是比较难看懂.
首先 usemin 一个功能是根据注释替换到 CSS/JS 等资源引用,
也还有一些我看不懂的高级功能 ⬿_⬿
这里记的是, grunt 可以 HTML/CSS/JS 中的资源地址进行替换, 增加 md5 信息,
配置是这样:

usemin:
  css:
    files:
      src: ['static/**/*.css']
  js: 'static/**/*.js'
  html: 'static/**/*.html'
  options:
    assetsDirs: ['static', 'static/a/b/css/']
    patterns:
      js: [[/(\/images\/[\/\w-]+\.png)/, 'replace image in js']]

注意这里定义的 task 需要和 patterns 里定义的内容对应
task 执行时, 会使用这些 pattern 的正则从源码文件里找 url 信息
由于 fileprocessor.js 默认定义了 html css 的配置, 这里可以省略.
其他如果增加比如 js js_header 之类的配置, 就需要自己写 pattern 了

assetsDirs 定义了资源查找的相对路径(猜测原理还是遍历的..)
比如正则找出了 ./a.png 的文件, 那么 usemin 将从尝试从 static static/a/b/css 查找
md5 这个部分将会由正则进行匹配, 命中之后将会对指定的文件进行替换
如果没有找到, url 将不会被替换

目前对具体的原理理解不清晰, 需要调整功能还是得看代码实现,
比如文件名查找部分有 getRevvedCandidates 查找,
https://github.com/yeoman/gru...
如果存在 mapping, 甚至可以从 mapping 查找, 否则回滚到文件系统的查找方式

---

上面只是想解释下参数备忘, 下面这篇文章里记录了比较完整的一套打包方案.

Complete Grunt deployment workflow for a client side app with RequireJS, Jasmine, LESS, and Amazon S3

---

另外使用 usemin 压缩 HTML 过程中发现有 url 没有被正确替换,
查找原因是 HTML 的默认正则没有正确识别写在同一行的..
如果开启了 pretty: true 是可以避免识别出错.. 具体看着 Issue 的吐槽:
https://github.com/yeoman/gru...

---

Teambition 出于业务需要, 进行了一些 fork, 增加了 prefix CDN 的接口
算是业务的定制吧, 如果需要可以参考这里的代码 grunt-usemin@73e350

---

返回博客首页: http://blog.tiye.me

---

update:

最近用到有考虑自己写了另外的脚本来完成这项功能:
https://github.com/jiyinyiyon...
关于思路还有缺陷在一个演示的视频里做了描述:
http://weibo.com/1651843872/B...
还有另外一个处理多页面但是做法过于激进的方案:
https://github.com/mvc-works/...