Gulp 4如何将dir1、dir2目录同层打包为Zip（不含src）

嘿，我之前刚好解决过几乎一模一样的需求！不用折腾临时目录，直接通过Gulp的路径配置就能实现你要的效果，核心是利用gulp.src的base选项来控制文件在Zip包中的层级结构。

第一步：安装依赖 #

首先确保你已经安装了gulp-zip（如果没有的话）：

npm install --save-dev gulp-zip

方案一：动态设置base路径（单流实现） #

直接在一个gulp.src里匹配所有文件，通过base函数根据文件来源动态调整基准路径：

const gulp = require('gulp');
const zip = require('gulp-zip');

// 定义打包任务
function packageZip() {
  return gulp.src(
    [
      'dir1/src/**/*',   // 匹配dir1/src下的所有文件及子目录
      'dir2/**/*'        // 匹配dir2下的所有文件及子目录
    ],
    {
      // 动态设置base路径，控制压缩包中的文件层级
      base: (file) => {
        // 如果文件来自dir1/src，就把base设为dir1/src，这样打包时会去掉src目录
        if (file.path.includes('dir1/src')) {
          return 'dir1/src';
        }
        // 其他文件（来自dir2）的base设为根目录，直接放在Zip包的顶层
        return './';
      }
    }
  )
  .pipe(zip('final-package.zip'))  // 生成的Zip文件名
  .pipe(gulp.dest('./'));          // Zip包输出到项目根目录
}

// 导出任务，方便运行：gulp packageZip
exports.packageZip = packageZip;

方案二：合并两个流（更直观） #

如果觉得动态base的写法不够清晰，也可以用merge2把两个独立的流合并，每个流单独设置自己的base：

先安装merge2：

npm install --save-dev merge2

然后编写任务：

const gulp = require('gulp');
const zip = require('gulp-zip');
const merge = require('merge2');

function packageZip() {
  // 处理dir1/src的文件，base设为dir1/src，去掉src层级
  const stream1 = gulp.src('dir1/src/**/*', { base: 'dir1/src' });
  // 处理dir2的文件，base设为根目录，直接放在顶层
  const stream2 = gulp.src('dir2/**/*', { base: './' });

  // 合并两个流后打包
  return merge(stream1, stream2)
    .pipe(zip('final-package.zip'))
    .pipe(gulp.dest('./'));
}

exports.packageZip = packageZip;

效果说明 #

运行gulp packageZip后，生成的final-package.zip里的结构会是：

final-package.zip
├── [dir1/src下的所有文件和子目录]
└── [dir2下的所有文件和子目录]

完全符合你要的“同一层级且不包含src目录”的要求，而且全程不需要创建临时目录，更高效简洁。

内容的提问来源于stack exchange，提问作者chepukha