前言
一个好的前端工程化不仅需要依靠 webpack 模块化打包管理工具，同时需要一些构建工具进行辅助。Broccoli 是一个快速、可靠的构建工具，可以帮助我们很好地管理前端项目。 Broccoli-brotli 是一个 Broccoli 插件，它通过为您的资源生成 brotli 压缩版本来减小资源载荷。
安装
在开始使用 Broccoli-brotli 之前，您需要先安装 Node.js 和 Broccoli。
你可以在你的项目根目录下使用 npm 安装：
npm install broccoli-brotli --save-dev
如果您已经有了 Broccoli，那么您可以跳过安装 Broccoli 步骤。如果您尚未安装 Broccoli，请使用 npm 进行安装：
npm install -g broccoli-cli
使用
Broccoli-brotli 插件很容易使用和集成到您的 Broccoli 工作流中。 插件只需要两个参数：inputNode 和 options。
inputNode：一个 Broccoli 输入节点。
options：一个对象，它具有以下参数：
enabled（可选）：一个布尔值，表示是否启用 Broccoli-brotli。默认为true。brotliEncodingOptions（可选）：一个 brotli 压缩编码选项对象。默认为undefined，表示使用默认编码。brotliDecodingOptions（可选）：一个 brotli 解压缩编码选项对象。默认为undefined，表示使用默认编码。include（可选）：一个匹配 glob 的字符串、字符串数组或包含字符串和 / 或字符串数组的组合。只有匹配的文件才会被压缩。默认为['**/*']，表示所有文件都会被压缩。exclude（可选）：一个匹配 glob 的字符串、字符串数组或包含字符串和 / 或字符串数组的组合。匹配的文件不会被压缩。默认为[]，表示没有文件将被排除。outputExtension（可选）：一个字符串。指定生成压缩版本输出文件的扩展名（默认为.br）。
-- -------------------- ---- -------
----- ------ - ---------------------------
----- ---------- - ----------------- -
-------- -----
---------------------- -
-------- --
--
-------- ------------
-------- --------------
---示例
以下示例说明了如何在项目中使用 Broccoli 和 Broccoli-brotli 插件。
安装 Broccoli 和 broccoli-brotli
安装 Broccoli 和 broccoli-brotli：
npm install -g broccoli-cli broccoli-brotli --save-dev
创建一个新的 Broccoli 项目并编写代码
在项目根目录下创建一个名为 Brocfile.js 的新文件，并编写以下代码：
-- -------------------- ---- -------
----- -- - --------------
----- -------------- - ---------------------------
----- ------ - ---------------------------
----- ---------- - --------------------------------
----- -------- - ------------------------------
----- ------------ - -------------------------
-- -- ---- ---
----- ---- - --- ---------------------- ------------ ------------
-- - ---- ---------- ---------- ---
----- ---------- - --- ------------ -
------- ----
-------- -------
-------- ------------
---
-- -- --- --
----- ----------- - --- -------------------- -
-------------------- -
---
-- --------- ------ ---
----- ------ - --- ------------- -
-------- -------------
---
-- -- ------------ - --- --
----- ---------------- - --- --------------------------------------- --------- -
-------- ------------- ---------- ------------ -----------
---
-------------- - -----------------
在上面的代码中，我们首先使用 broccoli-sass 编译所有的 .scss 文件，然后使用 broccoli-funnel 将所有文件复制到 public 文件夹中。接下来，我们使用 broccoli-clean-css 压缩 .css 文件。最后，我们使用 broccoli-brotli 压缩所有 .html、.js、.json 和 .xml 文件。
运行 Broccoli 并查看结果
现在，运行以下命令来编译代码：
broccoli build dist
它将生成一个名为 dist 的新文件夹，其中包含压缩的资源和 CSS 文件。
完成后，您可以在项目的浏览器窗口中打开 index.html 文件以查看结果。
小结
Broccoli-brotli 是一个优秀的 Broccoli 插件，通过为资源生成 Brotli 压缩版本，减小了资源载荷，提高了前端工程化的开发效率。本文介绍了 Broccoli-brotli 的安装、使用方法和示例，希望能对大家学习前端工程化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3556