coolie 之 CSS 模块依赖分析、合并、压缩、版本管理

Question

用了 css 预编译工具，用了 grunt、gulp。在上线的时候，执行 grunt task 或者 gulp task，做的非常好。css 被合并、压缩（或者你使用了 YUI 等压缩工具实时监听处理？）了，并且生成了带有版本号的样式文件，并且还替换了页面上的 css 引用，因此你的 css 文件目录可能是这样的：

.
|-- _normalize.css
|-- _base.css
|-- _module.css
|-- home.css
|-- detail.css
`-- ...

在 home.css 和 detail.css 里写了各种 import，自我感觉不错。

页面上是这样的：

<!--开发环境-->
<link type="stylesheet" href="home.css">
<!--生产环境-->
<link type="stylesheet" href="home.abcd1234.css">

确实，你做的已经够好了。但，coolie 能做的比你还好，并且还更方便。且听作者细细说来：

CSS 模块依赖分析

现在，coolie 要你做的是，只需要在页面上引入一大串 link 即可，像这样：

<!--coolie-->
<link rel="stylesheet" href="/static/css/common/0-normalize.css"/>
<link rel="stylesheet" href="/static/css/common/1-base.css"/>
<link rel="stylesheet" href="/static/css/common/2-unit-grid.css"/>
<link rel="stylesheet" href="/static/css/common/2-unit-text.css"/>
<link rel="stylesheet" href="/static/css/common/3-font-icon.css"/>
<!--/coolie-->

可能你已经注意到了，<!--coolie--> 和 <!--/coolie--> 是一个 CSS 文件引用范围的标记，在这个范围里的 CSS 文件将会被打包成一个文件。coolie 通过分析这些标记来分析 CSS 模块的依赖情况，得到依赖情况，然后再将他们合并、压缩以及版本处理。

CSS 文件的合并

在页面上找到了这些标记，然后根据这些 CSS 文件列表，找到对应的文件，然后将他们串联起来合并。

CSS 文件的压缩

将上述串联起来的文件进行压缩。

CSS 文件的版本管理

coolie 在串联的过程中，就已经得到了文件的 MD5 列表，然后再次 MD5，就是文件的名称，达到了版本化管理的目的。

当然，css 文件被合并、压缩、版本处理了，那么页面上的标记就会被替换。

<link rel="stylesheet" href="/static/css/abc123.css">

注意：文件的根目录，以构建目录为准，建议在项目里写绝对路径。

当然，css 文件里还包括了静态资源的引用，后文再述。

总结

构建工具	CSS 文件依赖分析	CSS 文件合并压缩	CSS 文件版本管理
百度 fis	半自动	手动	可以
淘宝 spm	无法	无法	无法
webpack	无法	无法	无法
coolie	全自动	少量配置	可以