什么是 broccoli-rework？
Broccoli-rework 是一个基于 Broccoli 构建工具的 npm 包，其作用在于对 CSS 进行批量处理。这样，我们可以方便地对多个 CSS 文件进行统一的处理，实现对整个项目样式的一次性调整。
安装
在使用 broccoli-rework 前，我们需要先安装它，可以通过以下代码进行安装：
npm install --save-dev broccoli-rework
使用入门
接下来，我们将以一个简单的例子来演示如何使用 broccoli-rework。
首先，在项目根目录中创建一个名为 brocfile.js 的文件，其中包含以下代码：
-- -------------------- ---- -------
--- ------ - ---------------------------
-- ----- --- ---
--- ------ - -------------
-- ------ --- ---
--- --------- - --------------
-- ------
--- --------------- - ------------- -
-- ----- ------ --
------------------------ -
---------------------------------------------- -
------ --------- --- ------ -- --------------------------------------- -
------ ----------- --- ----
---
---
------ ----
--
-- -- ------ ------
--- ------------ - -------------- -----------------
-- ------ --- ---
-------------- - ------------------------以上代码中，我们基于 broccoli-rework 对 CSS 文件夹中的所有 CSS 文件进行了 .class 样式的移除操作，并将处理后的 CSS 文件输出到了 dist/styles 文件夹中。
API 参考
我们在以上例子中使用了 rework 函数对 CSS 文件进行处理，其 API 如下所示：
var processedCSS = rework(inputNode, reworkCallback);
其中，inputNode 表示输入文件夹节点，reworkCallback 表示对 CSS 进行处理的回调函数。回调函数可以使用 Rework 库来实现。Rework 本身提供了一系列可被调用的链式操作，例如 .use()、.vendors() 等，这些方法被用于针对 CSS 进行一些处理，包括但不限于添加前缀、删除样式、压缩等等。
总结
通过本文的介绍，我们了解了如何借助 broccoli-rework 对 CSS 文件进行批量处理。我们还学习了如何使用 Rework 库来实现 CSS 的具体处理操作，并提供了一个样例代码供读者参考。
尝试使用 broccoli-rework 可以让我们更快速地对整个项目的样式进行一次性调整，从而更加便捷地协同与合作开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50cc