在前端开发中，我们经常需要将多个 JavaScript 或 CSS 文件合并成一个文件，以减少网络请求次数，从而达到优化页面加载速度的目的。其实实现这一功能并不难，只需要借助 Node.js 的一个常用工具 gulp 和它的一个插件 gulp-concat 就可以轻松实现。不过，它的默认合并方式是按照文件名的字典序排序的，并不一定符合实际业务中的需求。这时候，我们就需要一个 npm 包 gulp-concat-modified 来帮助我们实现自定义文件合并顺序，以满足实际业务需求。
安装
我们首先需要在项目中安装 gulp 和 gulp-concat-modified，通过终端执行以下命令：
npm install gulp gulp-concat-modified --save-dev
使用方法
安装完成后，在项目中新建一个 gulpfile.js 文件，并将以下代码添加其中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------------------
---------------------- ---------- -
------ -------------------
--------------
------ -
------------
---------
------
-
---
----------------------------
---
----------------------- ---------- -
------ ---------------------
--------------
------ -
------------
-------
-
---
-----------------------------
---
-------------------- ------------------------ ---------------以上代码将会合并 js 和 css 目录下的所有文件，并将合并后的文件输出到 dist 目录下的 js 和 css 目录中。
配置项
gulp-concat-modified 允许我们配置多项参数，以满足不同的业务需求。具体配置项如下：
order
用于配置文件合并的顺序。
.concat({
order: [
'jquery.js',
'vue.js',
'*.js'
]
})以上配置将会先合并 jquery.js，然后是 vue.js，最后是其他所有 js 文件。
注：'*.js' 表示除 jquery.js 和 vue.js 外的所有 js 文件。
newLine
用于配置合并后的文件的换行符。
.concat({
newLine: '\r\n'
})以上配置将会使用 Windows 的 CRLF 换行符。如果想使用 Unix/Linux 的 LF 换行符，则可以将配置改为以下代码：
.concat({
newLine: '\n'
})注：如果不配置该项，则使用系统默认的换行符。
separator
用于配置文件之间的分隔符。
.concat({
separator: '\n\n'
})以上配置将会在每个文件的结尾加上两个换行符。如果想在文件之间加上其他字符作为分隔符，则可以将配置改为以下代码：
.concat({
separator: ' // 分隔符\n'
})注：如果不配置该项，则使用系统默认的分隔符。
transformPath
用于配置文件路径的转换函数。
.concat({
transformPath: function(filepath) {
return 'js/' + filepath;
}
})以上配置将会在合并前将每个文件的路径加上 'js/' 前缀。如果想将文件路径转换为其他字符串，则可以将配置改为以下代码：
.concat({
transformPath: function(filepath) {
return 'src/' + filepath.replace(/\.js$/, '.min.js');
}
})注：如果不配置该项，则不进行任何转换。
总结
通过上述步骤，我们可以轻松地使用 gulp-concat-modified 这个 npm 包实现自定义顺序的文件合并功能，以满足不同业务需求。同时，gulp-concat-modified 也为我们提供了多项可配置的选项，以更加灵活地满足不同项目的需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e0551