文章有点过期了, 目前我已经切换到 Gulp + Webpack, 推荐使用 Webpack 处理静态资源打包:javascript
项目里使用了 @island205 的 grunt-rev 和 grunt-usemin 配置静态文件的配置,
考虑到这配置官方文档上没说清, 并且估计下次使用极可能忘记这些坑了..
这里作一些笔记, 解释一下参数怎么配合.java
首先是 grunt-rev , 其实 GitHub 上写的还算详细,
就是 files 里的指定的文件都会被修改文件名, 文件名前加入 md5 字符串,
好比 css/app.css 被重命名为 css/ae35dd05.app.css 只之类的webpack
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 信息,
配置是这样:git
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 了github
assetsDirs 定义了资源查找的相对路径(猜想原理仍是遍历的..)
好比正则找出了 ./a.png 的文件, 那么 usemin 将从尝试从 static static/a/b/css 查找
md5 这个部分将会由正则进行匹配, 命中以后将会对指定的文件进行替换
若是没有找到, url 将不会被替换web
目前对具体的原理理解不清晰, 须要调整功能仍是得看代码实现,
好比文件名查找部分有 getRevvedCandidates 查找,
https://github.com/yeoman/gru...
若是存在 mapping, 甚至能够从 mapping 查找, 不然回滚到文件系统的查找方式segmentfault
上面只是想解释下参数备忘, 下面这篇文章里记录了比较完整的一套打包方案.mvc
另外使用 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/...