引子

先进的你,可能现在还是这么做的:

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

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

home.cssdetail.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 全自动 少量配置 可以