前言
在前端开发中，经常需要将多个 CSS 或 JavaScript 文件合并成一个文件以减少网络请求次数，提高性能。而 gulp-concat-same 是一个能够将同名文件合并的 Gulp 插件，能够进一步减少合并后文件的体积。本文介绍了 gulp-concat-same 的安装与使用方法。
开始
安装
在安装之前，需要确保以下软件已安装：
- Node.js 和 npm（https://nodejs.org/en/）
命令行中使用以下命令进行安装：
npm install gulp-concat-same --save-dev
使用
在 Gulpfile.js 中引入插件：
var gulp = require('gulp');
var concatSame = require('gulp-concat-same');然后在任务中使用插件：
-- -------------------- ---- -------
-------------------- ---------- -
------ --------------------------
-------------------
----------------------------
---
------------------- ---------- -
------ ----------------------------
-------------------
-----------------------------
---在上面的代码中，gulp.src('src/js/**/*.js') 会匹配所有在 src/js 目录及其子目录下的 JavaScript 文件；而 gulp.src('src/css/**/*.css') 则匹配所有 CSS 文件。concatSame() 会将同名文件合并成一个文件，输出到 dist/js 和 dist/css 目录中。
为了更好地理解，下面是一个示例：
假设在 src/js 目录下有这么两个文件：
- common.base.js
- common.home.js
在运行 gulp.task('scripts') 后，会在 dist/js 目录下生成一个文件 common.js，包含两个文件的内容。
参数
gulp-concat-same 还提供了以下参数，可以根据需要设置：
cwd：设置匹配的目录。默认为process.cwd()。例如：cwd: 'src'。suffix：合并后文件名的后缀。默认为空字符串。例如：suffix: '-all'。extname：合并后文件的扩展名。默认为原文件的扩展名。例如：extname: '.min.js'。
例如：
gulp.task('scripts', function() {
return gulp.src('js/**/*.js', {cwd: 'src'})
.pipe(concatSame({suffix: '-all', extname: '.min.js'}))
.pipe(gulp.dest('dist/js'));
});在上面的代码中，通过 cwd: 'src' 将匹配目录设置为 src/js；通过 suffix: '-all' 将合并后文件的文件名设置为 common-all.min.js。
结论
本文介绍了 gulp-concat-same 的安装与使用方法，并提供了示例代码。该插件可以很方便地将同名文件合并成一个文件，减少合并后文件的体积，提高网页性能。因此，建议在前端项目中使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671981e8991b448e36dd