简介
broccoli-coco 是一个基于 Broccoli 的 CSS 压缩工具。它可以将 CSS 文件中未使用的样式删除，并可以自动将 vendor prefix 进行整合，生成可维护性更高的 CSS 代码。
安装
使用 npm 进行安装即可：
--- ------- ---------- -------------
使用
在 Broccoli 的 Brocfile.js 文件中，引入 broccoli-coco 并将其作为 Broccoli 插件进行使用。
--- ---------- - ------------------------- --- --------- - --- -- ------- --- ---------- - --------------------- ---------
其中，options 可以指定一些可选参数，如下所示：
enabled: 是否启用 CSS 压缩功能，默认为true。debug: 是否启用调试模式，开启后可以在控制台中查看调试信息，默认为false。cleanup: 是否在处理 CSS 文件时清理空规则，默认为true。
示例代码
以下是一个简单的示例，展示如何使用 broccoli-coco 进行 CSS 文件的压缩：
--- ---------- - ------------------------- --- ----- - --- -- ------ --- ------- - - -------- ----- ------ ------ -------- ---- -- --- ---------- - ----------------- --------- -- ----- -------------- - -----------
深入了解
忽略某些选择器
broccoli-coco 提供了一种方式来忽略指定的选择器，例如：
---- - --- - -- ----- ----------- -- ------- - --- -
在上面的例子中，.header 将会被忽略，不进行压缩。注意，这种方式需要在要忽略的选择器后面添加 /* coco: ignore.next */ 注释。
如果要忽略整个文件中的样式，可以在文件开头添加以下注释：
-- ----- ------ --
自定义 vendor prefix
broccoli-coco 默认使用 autoprefixer 进行 vendor prefix 整合。如果需要使用自定义的 vendor prefix，可以在 options 中进行设置：
--- ------- - -
------------- -
--------- ------ - ---------- ------- -- ---
-
--上面的例子表示，使用 last 3 versions 和 safari >= 8 两个浏览器版本进行 vendor prefix 整合。详细的配置项可以参考 autoprefixer 文档。
结语
通过本篇文章，我们了解了如何使用 broccoli-coco 进行 CSS 压缩，以及它提供的一些可选参数和高级功能。希望本文对你有所帮助，欢迎提出宝贵的意见和建议。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8bccdc64669dde52b1