Broccoli-Watched-Tree 是一个构建工具，它可以在前端项目中帮助我们创建静态文件和资源。它通过监听文件的变化，自动更新相关的资源，极大地提高了我们的开发效率。本篇文章将带领你了解 Broccoli-Watched-Tree 的基本使用方法和实际应用技巧。
安装
使用 NPM 包管理器进行安装：
npm install --save-dev broccoli-watched-tree
也可以使用 Yarn 安装：
yarn add -D broccoli-watched-tree
基本使用方法
在 Broccoli-Watched-Tree 中，我们需要先定义一个根目录，在这个根目录下创建静态资源和文件。然后，我们可以使用 Broccoli-Watched-Tree 提供的转换器将这些文件转换成 web 应用所需的格式。最后，我们可以在根目录下的 dist 目录下找到我们生成的文件。
定义根目录
定义根目录是 Broccoli-Watched-Tree 的第一步。在我们的项目中，我们可以创建一个名为 src 的文件夹，并在其中创建我们需要的静态资源和文件。
创建转换器
在 Broccoli-Watched-Tree 中，转换器用来将我们定义的文件和资源转换成 web 应用所需要的格式。我们可以使用现成的转换器，例如 broccoli-sass 或 broccoli-typescript-compiler，也可以自己编写一个转换器。
以编写一个简单的转换器为例，我们可以先创建一个 my-converter.js 文件：
-- -------------------- ---- -------
----- ------ - ---------------------------
----- ----------- ------- ------ -
------- -
-- ------
-
-
-------------- - ------------该代码实现了 MyConverter 类，我们可以在 build 方法中实现我们的转换逻辑。Broccoli-Watched-Tree 会在我们的静态资源和文件发生变化时自动执行该方法并更新目标文件。
运行 Broccoli-Watched-Tree
运行 Broccoli-Watched-Tree 的方式很简单。我们只需要在项目的根目录下创建一个 Brocfile.js 文件，并在其中定义我们的转换器和目标文件，然后使用 Broccoli-Watched-Tree 相关的 API 来处理和输出目标文件。
下面是一个典型的 Brocfile.js 文件的示例代码：
const MyConverter = require('./my-converter');
const tree = 'src';
const options = {};
const myConverter = new MyConverter(tree, options);
module.exports = myConverter;在这个示例代码中，我们只创建了一个转换器 my-converter，并把它的输出结果设置为输出目标文件。这里的 tree 参数指定我们的静态资源和文件所在的目录，而 options 参数则包含了转换器的配置信息。
实际应用技巧
Broccoli-Watched-Tree 在实际应用中可以帮助我们处理很多常见的问题。下面是一些 Broccoli-Watched-Tree 的实际应用技巧。
使用插件
Broccoli-Watched-Tree 可以使用很多现成的插件。例如，我们可以使用 broccoli-sass 插件来处理 SCSS 文件，或使用 broccoli-replace 插件来实现文本替换。
优化构建速度
Broccoli-Watched-Tree 可以和其它构建工具集成，例如 Gulp 和 Grunt，从而进一步优化构建速度。我们可以使用 Broccoli-Watched-Tree 的时间戳缓存机制来实现构建速度优化。
性能监控
Broccoli-Watched-Tree 支持性能监控。我们可以使用 --profile 参数来启用性能监控功能，然后可以在控制台中查看构建任务的各种性能指标。
示例代码
下面是一个使用 Broccoli-Watched-Tree 处理 SCSS 文件的示例代码：
-- -------------------- ---- ------- ----- ------------ - ------------------------- ----- ---- - ------ ----- ------- - - ----------- -------------- ---------- ---- ---------- ----- -- ----- ------- - --- ------------------ --------- -------------- - --------
在这个示例代码中，我们使用了 broccoli-sass 插件来处理 SCSS 文件。这个插件会自动处理 SCSS 文件，并输出 CSS 文件和 Source Map 文件。我们只需要指定 inputFiles 和 outputDir，就可以完成 SCSS 文件的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51ab