[已過期] 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/...