前言
前端开发过程中，我们经常需要对 CSS、JS 文件进行合并，以减少浏览器对服务器的请求次数，从而提升页面加载速度。而在使用工具进行文件合并操作时，我们通常需要使用如 Gulp、Webpack 等构建工具。
本文将介绍一种基于 broccoli 的 npm 包 —— broccoli-concat-filenames，可以直接对文件名称进行合并操作，且更加轻便快捷。
背景
Broccoli 是一个基于过滤器的构建工具，可以对代码进行静态分析，并生成最终的构建结果。与其他构建工具相比，Broccoli 拥有以下优势：
- 高效：Broccoli 比其他构建工具更快，并且在处理时间长的构建过程时，合理地降低了内存的消耗。
- 灵活：Broccoli 是一个非常灵活的工具，它可以适应构建工程的各种需求，并能够自定义各种过滤器。
另一方面，npm 包是 JavaScript 生态系统里的包管理工具，我们可以使用 npm 包来管理和下载已经被发布的 JavaScript 代码。而 broccoli-concat-filenames 就是一个方便使用的 npm 包，可以对 JS、CSS 文件进行合并操作。
安装
安装 broccoli-concat-filenames 很简单，只需要在命令行中输入以下指令即可：
npm install broccoli-concat-filenames --save-dev
使用
安装完毕之后，我们就可以开始使用 broccoli-concat-filenames 来合并文件了。下面介绍使用步骤：
1. 创建 Broccoli 实例
首先，我们需要将 broccoli-concat-filenames 集成到我们的 Broccoli 工程中。在具体实现时，我们可以在项目的根目录下创建一个 Brocfile.js 文件，并在其中导入 broccoli-concat-filenames 模块：
const concatFilenames = require('broccoli-concat-filenames')然后，我们需要创建一个 Broccoli 实例，以便对文件进行处理。具体实现如下：
const outputNode = concatFilenames(inputNode, {
outputFile: 'output.js',
concat: ';',
persist: true
})inputNode：输入文件，我们可以使用 Broccoli 的broccoli-funnel模块读取源文件夹中的所有文件，并将它们传递给concatFilenames模块；outputFile：输出文件名称；concat：文件合并时的分隔符；persist：在处理完毕后是否保留 Broccoli 实例以便进行下一步操作。
2. 文件合并
我们可以选用 broccoli-merge-trees 模块来将两个或多个子节点合并成一个 Broccoli 节点，以便最终生成输出文件。
const MergeTrees = require('broccoli-merge-trees')
const trees = new MergeTrees([outputNode])3. 保存文件
最后一步，我们将处理好的文件保存到指定位置。
const fse = require('fs-extra')
fse.removeSync('output')
fse.copySync(trees, 'output')示例
下面是一个示例，演示如何将 src 中的两个 JS 文件合并，然后将其保存为 dist/bundle.js 文件：
-- -------------------- ---- ------- ----- ------- - -------------------------- ----- --------------- - ------------------------------------ ----- ---------- - ------------------------------- ----- --- - ------------------- -- -- --- ---- -- ---------- -- ----- --------- - -------------- - -------- ----------- -- -- ---------------- ----- ---------- - -------------------------- - ----------- ------------ ------- ---- -------- ----- -- -- ------ -------- -- ----- ----- - --- ------------------------ -- -- ---- -------------------- ---- -- ---------------------- ------------------- -------
总结
通过使用 broccoli-concat-filenames，我们可以更加方便快捷地对文件进行合并操作，而不需要安装繁琐的构建工具。同时，Broccoli 也提供了更加灵活、高效的构建方案。因此，我们可以根据实际需求，选用适当的工具来简化我们的前端开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52c4