Broccoli SuitCSS 是 SuitCSS 的构建工具，它能够帮助你从 SuitCSS 的源文件中构建出优化过的 CSS 文件。本篇教程将会教你如何使用 Broccoli SuitCSS 的 NPM 包来进行 SuitCSS 文件的构建。
前置条件
在开始之前，你需要先安装 Node.js 和 NPM 。在安装完成后，你还需要全局安装 Broccoli：
npm install -g broccoli-cli
安装 Broccoli SuitCSS
使用以下命令安装 Broccoli SuitCSS：
npm install --save-dev broccoli-suitcss
使用 Broccoli SuitCSS
在使用 Broccoli SuitCSS 进行文件构建之前，你需要了解一些基本的概念：
- Broccoli: 是一个构建工具，它提供了一个使用 JavaScript 编写的 API，可以用来构建任意类型的文件。
- Plugin: 是一个 Broccoli 插件，它可以将文件从一个状态转换到另一个状态。例如，一个 CSS 的 plugin 可以将源文件转换成压缩过的文件。
- Node: 是一个 Broccoli 插件的实例，它代表了一个实际的文件夹或文件。
- Tree: 是一个 Broccoli 插件的集合，它可以包含一个或多个 Node 或其他 Tree。
在开始使用 Broccoli SuitCSS 来构建你的 CSS 文件之前，你需要创建一个 Tree 来表示你的源文件。以下是一个简单的例子：
-- -------------------- ---- ------- --- ------- - ---------------------------- --- ---- - --------------------------- --- ---- - ---------------- -------- ----------------- -------- - --------------- ------------- ------------ - ------- -- --- - --------------------- ------ ---------------------- - ---------- - --- ---------- - ------------------------ -------------- ---------------- - -------------- -- --------------------- - ------------------ - ------ --------------------------- -- -------------- - ------------------- -------- - ------ --- ----------------- --------- --
在这个例子中，我们继承了 Tree 类，并且在 build 方法中使用了 Broccoli SuitCSS。这个例子会将输入的 Node 中的 SuitCSS 文件转换成优化过的 CSS 文件，并将其作为输出的 Node。
你可以将这个 Tree 作为输入传递给 Broccoli，并将其输出到一个目录中，例如 dist 文件夹。以下是一个简单的例子：
var MyTree = require('./my-tree.js');
var distTree = MyTree(__dirname + '/src', {});
broccoliBuilder([distTree], { outputPath: __dirname + '/dist' });在以上代码中，我们使用 MyTree 将 src 目录中的 SuitCSS 文件编译成了优化过的 CSS，并将其输出到了 dist 目录中。
示例代码
以下是一个完整的示例代码，它将 src 中的 SuitCSS 文件编译成了优化过的 CSS，并将其输出到了 dist 文件夹中。
directory.js
-- -------------------- ---- ------- --- ------- - ---------------------------- --- ---- - --------------------------- --- ---- - ---------------- -------- ----------------- -------- - --------------- ------------- ------------ - ------- -- --- - --------------------- ------ ---------------------- - ---------- - --- ---------- - ------------------------ -------------- ---------------- - -------------- -- --------------------- - ------------------ - ------ --------------------------- -- -------------- - ------------------- -------- - ------ --- ----------------- --------- --
index.js
-- -------------------- ---- ------- --- ------ - ----------------------- --- -------- - -------------------- --- -------- - ---------------- - ------- ---- --- ------- - --- --------------------------- ------------------------------------- - --- ------ - ----------------- -------------------- -- ------------- - ----------------- ---
总结
在本篇教程中，我们介绍了如何使用 Broccoli SuitCSS 的 NPM 包来进行 SuitCSS 文件的构建。我们通过一个简单的例子来介绍了一些基本的概念，并展示了如何将 Broccoli SuitCSS 集成到你的构建管道中。希望这篇文章能够帮助你更好地了解和使用 Broccoli SuitCSS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde513a