coolie 静态资源的依赖分析、版本管理

Question

引子

前端开发有哪些静态资源：

• html 文件里引用的图片
• css 里引用的图片、字体

依赖分析

在进行依赖分析之前，会创建一个静态资源的版本对应关系（例 MAP），然后在分析到 html、css 文件里包含静态资源的时候，会与 MAP 匹配，如果找到则使用 MAP 中的版本，否则去查找该静态资源。

如，在 html 文件里，使用了以下静态资源

<!-- 相对于构建的目录 -->
<img src="/abc/def.png">

<!-- 路径使用的是模板变量，可以添加 coolieignore 属性，会被 coolie 忽略 -->
<img src="{{varible}}" coolieignore>

css 文件里引用了各种静态资源：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

body{
    background: #f5f5f5 url("../img/100x100.png");
}

.body{
    background: #ccc url(/static/img/100x100.png);
}

版本管理

是不是写过这样的代码：

// 第1次上线
body{
	background: url("abc.png");
}

// 第2次上线
body{
	background: url("abc.png?v=123");
}

// 第3次上线
body{
	background: url("abc.png?v=123456");
}

// 第n次上线
body{
	background: url("abc.png?v=1234567890abcdef");
}

这么做？累不累？是不是很恼火，为什么用户那里总是缓存清不了？！来让 coolie 解放你的双手吧，给自己一点爽的时间吧。

html 文件构建之后：

<!-- 构建之后的资源 -->
<img src="/res/abcdefwffwe90312312.png">

<!-- 构建之后，会删除 coolieignore 属性 -->
<img src="{{varible}}">

css 文件构建之后：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../res/abcdef000000000.eot');
  src: url('../res/afwefwrwer42342343.eot?#iefix') format('embedded-opentype'),
  url('../res/dqww423423423dqwdq.woff2') format('woff2'),
  url('../res/ccwcqwcqwqwcqw.woff') format('woff'),
  url('../res/fwer5223423423.ttf') format('truetype'),
  url('../res/dr423423fwfwfwe.svg#glyphicons_halflingsregular') format('svg');
}

body{
    background: #f5f5f5 url("../res/dq41212312d.png");
}

.body{
    background: #ccc url(../res/e1212312312dw.png);
}

总结

coolie 将静态资源的版本关系分析的比较彻底，无须开发者额外当心。