在前端开发中，构建和打包工具扮演了重要的角色。在构建工具中，Broccoli 是一款基于插件式的、快速且易于使用的构建工具，特别适用于构建大型项目。而 broccoli-cli 就是一款 Broccoli 的命令行工具。
本文将介绍如何使用 npm 包 broccoli-cli 构建项目。
安装 broccoli-cli
首先，我们需要全局安装 broccoli-cli。
npm install -g broccoli-cli
初始化项目
在使用 broccoli-cli 之前，我们需要初始化项目。假设我们想要初始化一个名为 myApp 的项目，可以通过以下命令：
broccoli init myApp
执行完命令后，会生成 myApp 目录，里面包括了以下文件：
Brocfile.js：配置文件，用于配置构建任务。package.json：项目依赖定义文件。
构建项目
在项目目录中执行以下命令：
broccoli build <outputDirectory>
其中，outputDirectory 参数为可选参数，指定构建输出的目录。如果不指定，则默认构建到 dist 目录。
配置构建任务
Broccoli 使用 Brocfile.js 文件来定义构建任务，这个文件是一个 CommonJS 模块。在 Brocfile.js 文件中可以定义如下四类任务：
- Trees：文件树，即源文件。
- Filters：过滤器，即对源文件进行筛选、转换、去重等操作。
- Adapters：适配器，即根据目标环境的需要，将输出转化成期望的格式。
- Plugin Factories：插件工厂，用于生成插件实例。
下面是一个简单的 Brocfile.js 文件示例，该示例定义了一个拷贝任务，将 public 目录下的文件拷贝到输出目录。
var Funnel = require('broccoli-funnel');
var sourceTree = 'public';
// 过滤源文件
sourceTree = new Funnel(sourceTree, {});
module.exports = sourceTree;在 Brocfile.js 文件中，可以使用众多的 broccoli 插件来扩展构建任务，例如：
broccoli-clean-css：用于压缩 CSS 文件，得到更小的 CSS 文件。broccoli-uglify-js：用于压缩 JavaScript 文件。broccoli-broccoli-sass：用于编译 Sass 文件。
示例代码
下面是一个简单的 Broccoli 项目示例，该项目包括如下文件：
-- -------------------- ---- -------
- -----
- ----------
- --
- ----------
- ----------
- ---
- ---------
- -----------------
- -----------
- ------------对该项目进行构建以及压缩处理，可以使用以下配置文件：
-- -------------------- ---- ------- --- ------ - --------------------------- --- ---------- - -------------------------------- --- ---------------- - ------------------------------ --- -------- - ------------------------------ --- ---------- - -------- --- ------ - --- ----------------- - ------ - ------ -------------- ------------- --- --- ------- - --- ----------------- - ------- - ------ ------------- -------------------- --- -- -- ---------- -- ------ - ------------------------ ---- -- -- --- -- ------- - ----------------- ---- -------------- - ----------------------- ------- ----------
在终端中运行 broccoli build 命令即可构建该项目。
结语
通过本文的介绍，读者可以了解如何使用 npm 包 broccoli-cli 构建项目，并且了解了如何使用 Brocfile.js 配置 broccoli 构建任务。实际项目中，读者可以根据需要调整任务的配置和插件的使用，以便更好地满足项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59783