介绍
Broccoli 是一个构建工具，专为快速、简单、灵活地构建 JavaScript 项目而设计。它是一个基于 Node.js 的工具，可将输入树转换为输出树，方便实现文件的压缩、模块化、优化等功能。
Broccoli-rework-single 是一个 Broccoli 插件，用于对 CSS 进行预处理和后处理，并将处理后的 CSS 文件输出到指定目录。它使用的是 rework 作为 CSS 解析器，在此基础上实现了可以输出单个 CSS 文件的功能，适合用于前端开发中的样式的处理和优化。
本文将介绍如何安装和使用 broccoli-rework-single 插件，为前端开发者提供一篇有深度和指导意义的教程。
安装
在开始使用 broccoli-rework-single 插件之前，需要先安装 Node.js 和 Broccoli。安装 Node.js 可以到官网（https://nodejs.org/）进行下载，安装 Broccoli 可以在命令行中使用 npm 进行安装。在命令行中运行以下命令即可安装 Broccoli：
npm install -g broccoli-cli
安装完成之后，就可以在项目目录下安装 broccoli-rework-single 插件了。在命令行中运行以下命令即可安装：
npm install broccoli-rework-single --save-dev
使用
安装完成 broccoli-rework-single 插件之后，就可以使用它进行 CSS 文件的处理了。在项目目录下创建一个名为 Brocfile.js 的文件，然后在其中引入 broccoli-rework-single，设置输入树和输出树，最后使用 Broccoli.build 方法生成输出树。具体代码如下：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
----- --------- - -----
----- ---------- - ------
----- ------- - -
---- ------------------
-------- -
---------------------------
-
-
----- ----------- - -------------------
-------------- - ----------------------- -------- ------------ -----------在以上代码中，inputTree 和 outputTree 分别代表输入树和输出树，可以根据实际项目需要进行设置。options 是一个对象，其中的 src 属性表示输入文件的路径，plugins 属性表示需要使用的 rework 插件。在该示例中，使用了一个名为 my-rework-plugin 的插件，可自行替换为其他插件。
outputFiles 是一个数组，包含需要输出的 CSS 文件的路径，可以根据实际项目需要进行设置。本示例中需要输出的是 styles/main.css 文件。
最后使用 Broccoli.build 方法生成输出树，即可完成 CSS 文件的处理。在命令行中运行以下命令即可生成输出树：
broccoli build dist
示例
以下是一个完整的示例，包含 Brocfile.js 和 styles/main.css 两个文件。其中，使用了两个 rework 插件：autoprefixer 和 cssnano，分别用于添加浏览器前缀和压缩 CSS。
-- -------------------- ---- -------
-- -----------
----- ------------ - ---------------------------------
----- ------------ - -----------------------
----- ------- - ------------------
----- --------- - -----
----- ---------- - ------
----- ------- - -
---- ------------------
-------- -
---------------
---------
-
-
----- ----------- - -------------------
-------------- - ----------------------- -------- ------------ -----------/* styles/main.css */
html:before {
content: "Hello, World!";
}执行以下命令即可生成输出树：
broccoli build dist
生成的 styles/main.css 文件如下所示：
html:before{content:"Hello, World!"}总结
本文介绍了如何使用 broccoli-rework-single 插件对 CSS 进行预处理和后处理，并将处理后的 CSS 文件输出到指定目录。通过本文的实践和学习，读者可以深入了解 Broccoli 的使用方法，掌握 CSS 文件的处理和优化技巧，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50dc