如何在Gulp任务中根据HTML文件重命名Zip压缩包

我来帮你搞定这个问题！其实不用纠结gulp-filenames，直接用Node.js内置的fs模块就能轻松实现需求——先定位dist目录里的唯一HTML文件，再用它的名字来命名最终的Zip包。下面是完整的实现方案：

1. 确保依赖安装到位 #

首先确认你已经安装了gulp和gulp-zip，如果没有的话，执行以下命令：

npm install gulp gulp-zip --save-dev

2. 编写Gulp任务代码 #

在你的gulpfile.js里写入以下内容：

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

gulp.task('zip-dist', function(done) {
  // 读取dist目录下的所有文件
  const distFiles = fs.readdirSync('./dist');
  
  // 过滤出所有HTML文件（用户说唯一，所以取第一个即可）
  const htmlFile = distFiles.find(file => path.extname(file) === '.html');
  
  // 异常处理：如果没找到HTML文件或者找到多个，提示用户
  if (!htmlFile) {
    console.error('❌ dist目录中未找到HTML文件！');
    done();
    return;
  }
  if (distFiles.filter(file => path.extname(file) === '.html').length > 1) {
    console.error('❌ dist目录中存在多个HTML文件，无法确定Zip包命名！');
    done();
    return;
  }
  
  // 提取HTML文件名（去掉后缀）作为Zip包名称
  const zipFileName = `${path.basename(htmlFile, '.html')}.zip`;
  
  // 执行压缩任务
  return gulp.src('./dist/**/*')
    .pipe(zip(zipFileName))
    .pipe(gulp.dest('./')); // 把Zip包输出到项目根目录，你可以改成其他路径
});

3. 运行任务 #

在终端执行以下命令，就能生成以HTML文件名命名的Zip包了：

gulp zip-dist

关键逻辑说明 #

• 用fs.readdirSync同步读取dist目录的文件列表，这样能确保我们在执行压缩前拿到HTML文件名
• 通过path.extname过滤出HTML文件，再通过长度判断确保唯一性
• 用path.basename去掉HTML文件的后缀，拼接成Zip包的名称
• gulp.src('./dist/**/*')确保dist目录下的所有文件（包括子目录里的）都被压缩进去

这个方案比用gulp-filenames更直接，而且不用额外依赖第三方包，稳定性也更高～

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