coolie PK webpack 之二：CSS 文件的合并与压缩
接前文，下面开始进入静态资源的合并与压缩中的第 2 项：CSS 文件的合并与压缩。
预备
在前文的基础上，准备以下文件和目录
|-- demo
|-- src
| |-- single1.js
| |-- single2.js
| |-- single1.css
| |-- single2.css
| `-- body.png
`-- index.html
single1.css 的内容为
html {
margin: 0;
padding: 0;
}
single2.css 的内容为
body {
background: url("./body.png");
}
index.html 内容为
<!DOCTYPE html>
<!-- coolie -->
<link rel="stylesheet" type="text/css" href="./src/single1.css">
<link rel="stylesheet" type="text/css" href="./src/single2.css">
<!-- /coolie -->
<!-- coolie -->
<script src="./src/single1.js"></script>
<script src="./src/single2.js"></script>
<!-- /coolie -->
webpack
无法直接做到。
coolie
无须修改配置，直接用前一篇文章的配置文件。
执行 coolie build 之后，index.html（为了便于阅读，已经加了断行） 为：
<!DOCTYPE html>
<link rel="stylesheet" href="/src/bdd8e022ce7470f06d7183daabac0b79.css">
<script src="/src/6c762d4e4b7d1e9504281bc12abd65b9.js"></script>
<!--coolie@0.20.10-->
来看下构建之后的 bdd8e022ce7470f06d7183daabac0b79.css 文件：
/*coolie@0.20.10*/
html{margin:0;padding:0}
body{background:url(a821bd973bf1114e6ed1d9170b6e84eb.png)}
聪明的 coolie 也将 css 引用的图片进行版本管理了，看下 relationship-map.json：
{
"index.html": {
"css": {
"src/bdd8e022ce7470f06d7183daabac0b79.css": [
"src/single1.css",
"src/single2.css"
]
},
"js": {
"src/6c762d4e4b7d1e9504281bc12abd65b9.js": [
"src/single1.js",
"src/single2.js"
]
},
"main": ""
}
}
此时的目录结构为：
|-- dest
|-- src
| |-- bdd8e022ce7470f06d7183daabac0b79.css
| |-- 6c762d4e4b7d1e9504281bc12abd65b9.js
| `-- a821bd973bf1114e6ed1d9170b6e84eb.png
|-- index.html
`-- relationship-map.json
一张图说明一切
总结
webpack
- 优点
- 没有
- 缺点
- 无法实现
coolie
- 优点
- 不需要修改配置
- 只需要在页面上添加引用
- 完美实现了样式的合并与压缩
- 同时处理了样式中引用的图片
- 同时对 css 和图片进行了版本管理
- 同时修改了 html 文件的引用
- 缺点
- 无
综，coolie 完美的实现了要求，做的非常漂亮，得满分 10 分，webpack 无法直接做到，得 0 分。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： Node.js 事件驱动实现概览
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论