引子

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

用了 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 全自动 少量配置 可以
15 条评论
作者
状态
  • 发布于 ,8 次更新
  • 最后更新于
  • 被浏览 2704 次
  • 被评论 15 次
  • 隶属于 文章 版块
  • 归纳于 NodeJS 分类
  • 收录于 coolie介绍 专辑
标签
二维码
目录