Broccoli-lst 是一个基于 Broccoli 构建器的插件，可以对 HTML/JS/CSS 文件进行压缩和优化，使得页面加载速度更快。
安装
使用 npm 安装 broccoli-lst：
--- ------- ------------ ----------
使用方法
在 Brocfile.js 中引入 broccoli-lst：
----- ----------- - ------------------------
接着，在 Brocfile.js 中配置 broccoli-lst：
----- ------------- - ---------------------- - -- --- ---
其中，inputTree 是 Broccoli 的输入树，可以是任何有效的输入树。
接下来，我们来讲一下 broccoli-lst 支持的配置项。
配置项
enabled
- 类型：
Boolean - 默认值：
true
是否启用 broccoli-lst 插件。如果为 false，则不对文件进行压缩和优化，直接输出。
manifestPath
- 类型：
String - 默认值：
null
生成的 manifest 文件路径。如果为 null，则不生成。
ignore
- 类型：
Array<String|RegExp> - 默认值：
[]
需要忽略的文件或文件夹。可以是字符串或正则表达式。
js
- 类型：
Boolean|Object - 默认值：
true
是否对 JS 文件进行压缩和优化。如果为 true，则采用默认配置；如果为 false，则不对 JS 文件进行操作；如果为对象，则可以传入以下配置项：
enabled：是否启用；mangle：是否启用代码混淆；compress：是否启用代码压缩；output：输出路径。
css
- 类型：
Boolean|Object - 默认值：
true
是否对 CSS 文件进行压缩和优化。如果为 true，则采用默认配置；如果为 false，则不对 CSS 文件进行操作；如果为对象，则可以传入以下配置项：
enabled：是否启用；output：输出路径。
html
- 类型：
Boolean|Object - 默认值：
true
是否对 HTML 文件进行压缩和优化。如果为 true，则采用默认配置；如果为 false，则不对 HTML 文件进行操作；如果为对象，则可以传入以下配置项：
enabled：是否启用；output：输出路径。
示例代码
下面是一个简单的示例代码，使用 broccoli-lst 对 src 目录下的文件进行压缩和优化，然后输出到 dist 目录。
----- ----------- - ------------------------
----- ------ - ------
-------------- - ---------- -
----- --------- - ---------------------------
----- ------------- - ---------------------- -
-------- -----
------------- ----------------
------- -------- ----------
--- -
-------- -----
------- -----
--------- -----
------- ----
--
---- -
-------- -----
------- -----
--
----- -
-------- -----
------- ------
-
---
------ --------------
--这个示例中，src 目录下的所有文件都会被压缩和优化处理。同时，我们忽略了 test 目录和所有的 .md 文件。输出目录中的 JS 文件被混淆和压缩，CSS 文件被压缩，HTML 文件被压缩和优化。
总结
broccoli-lst 是一个非常方便和实用的插件，能够帮助前端开发人员快速地对 HTML/JS/CSS 文件进行压缩和优化，使得页面加载速度更快。我们可以通过这篇文章学会使用这个插件，为自己的项目提供更优质的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c87ccdc64669dde5039