Broccoli 是一个用 JavaScript 编写的前端构建工具，它使用插件模型，灵活性高，在构建速度上也表现出色。而 Broccoli-Builder 就是一个基于 Broccoli 的 npm 包，可以帮助我们更方便地使用 Broccoli 来构建我们的项目。
安装和使用
首先，我们需要安装
broccoli-buildernpm 包。在终端中执行以下命令：--- ------- ---------- ----------------
然后，在
Brocfile.js中引入broccoli-builder:----- ------- - ----------------------------
接着，我们需要编写一些 Broccoli 插件，并将它们传递给
Builder的实例。下面是一个简单的例子：----- ------ - --------------------------- ----- ---------- - -------------------------------- ----- --- - --- ------------- - -------- ----- --- ----- ----------- - --- ---------------- - -------- -------- --- -------------- - ---------------- --------------
在这个例子中，我们创建了两个插件，分别将
app和public目录中的文件复制到输出目录中。最后，我们使用mergeTrees将这两个插件的输出合并起来。最后，在终端中执行以下命令，运行 Broccoli 构建：
----------------
它会将
Brocfile.js中定义的所有插件组合起来，并输出到我们的目标文件夹中。
深入学习
插件
Broccoli 是由一系列插件构成的。每个插件都可以接收一个输入节点，处理它，并返回一个新的输出节点。例如，broccoli-funnel 就是一个插件，用于将输入节点中的一部分内容复制到输出节点中。
使用 Builder 时，我们需要创建一个或多个插件，并将它们传递给 Builder 的实例。在 Broccoli 中，插件的顺序非常重要，因为每个插件的输出都会成为下一个插件的输入。
树合并
在很多情况下，我们可能需要从多个源（如 app 和 public 目录）中读取文件，并将它们合并成单个输出。为了实现这一点，我们可以使用 broccoli-merge-trees 插件。该插件将多个输入节点合并成一个输出节点。
文件监视
Broccoli 还提供了一个 watch 命令，可以监视文件的更改，并在任何文件更改时重新构建我们的项目。只需在终端中执行以下命令即可启动监视模式：
---------------- -------
示例代码
下面是一个稍微复杂的例子，展示了如何使用 broccoli-builder 构建一个基本的静态网站：
----- ------ - --------------------------- ----- ---------- - -------------------------------- ----- ---- - ------------------------------------- ----- ---------- - -------------------------------------- ----- --- - --- ------------- - -------- ----- --- ----- ----------- - --- ---------------- - -------- -------- --- ----- ------ - --- -------------------- ----------------------- -------------- ----- -------------- - --- --------------------------- ------------ ---------- -------------- - ---------------
在这个例子中，我们首先将 app 和 public 目录中的文件复制到输出目录中。然后，我们使用 broccoli-sass-source-maps 插件生成
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/53927