求助：如何用gulp-usemin为每个子目录生成对应index.html文件

嘿，我看到你作为前端新手在使用gulp-usemin时遇到了子目录输出的问题，这其实是个很常见的路径配置小疏忽，我来帮你搞定它！

问题根源 #

你当前的usemin任务里，所有处理后的HTML文件都被输出到./dist根目录，后面的文件会直接覆盖前面的，所以最终只留下最后一个子目录的index.html。要实现每个子目录的文件对应输出到dist的同名子目录，关键是调整gulp.dest()的输出路径。

看你这段代码：

gulp.task('usemin', ['deleteDistFolder'], function() {
  for (var i = 0; i < slide.length; i++) {
    gulp
      .src('./' + presentationName + '/' + slide[i] + '/*.html')
      .pipe(usemin({
        css: [function() {return rev()}, function() {return cssnano()}],
        js: [function() {return rev()}, function() {return uglify()}]
      }))
      .pipe(gulp.dest("./dist")); // 所有文件都挤到dist根目录，必然覆盖
  }
});

这里的gulp.dest("./dist")是问题核心，所有子目录的index.html都往同一个地方输出，自然会被覆盖。

解决方案 #

把输出路径改成./dist/' + slide[i]，这样每个子目录的处理结果会乖乖跑到dist对应的子文件夹里。另外，原代码的for循环在gulp异步任务里容易出现问题，建议改用map结合Promise.all来确保所有子任务都能完成：

修改后的usemin任务：

gulp.task('usemin', ['deleteDistFolder'], function() {
  const useminTasks = slide.map(folder => {
    return gulp
      .src(`./${presentationName}/${folder}/*.html`)
      .pipe(usemin({
        css: [rev, cssnano], // 直接传函数引用，代码更简洁
        js: [rev, uglify]
      }))
      .pipe(gulp.dest(`./dist/${folder}`)); // 输出到对应子目录
  });
  return Promise.all(useminTasks); // 确保所有子任务都执行完成
});

顺带一提，你的optimizeImages任务也有同样的异步问题，一起改了更稳妥：

gulp.task('optimizeImages', function() {
  const imageTasks = slide.map(folder => {
    return gulp
      .src(`./${presentationName}/${folder}/images/*`)
      .pipe(imagemin({
        progressive: true,
        interlaced: true,
        multipass: true,
      }))
      .pipe(gulp.dest(`./dist/${folder}/images`));
  });
  return Promise.all(imageTasks);
});

完整修改后的gulpfile.js #

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    del = require('del'),
    usemin = require('gulp-usemin'),
    rev = require('gulp-rev'),
    cssnano = require('gulp-cssnano'),
    uglify = require('gulp-uglify'),
    browserSync = require('browser-sync').create();

var slide = ['TestFolder1', 'TestFolder2', 'TestFolder3'];
var presentationName = 'CLM';

gulp.task('deleteDistFolder', function() {
  return del('./dist');
});

gulp.task('optimizeImages', function() {
  const imageTasks = slide.map(folder => {
    return gulp
      .src(`./${presentationName}/${folder}/images/*`)
      .pipe(imagemin({
        progressive: true,
        interlaced: true,
        multipass: true,
      }))
      .pipe(gulp.dest(`./dist/${folder}/images`));
  });
  return Promise.all(imageTasks);
});

gulp.task('usemin', ['deleteDistFolder'], function() {
  const useminTasks = slide.map(folder => {
    return gulp
      .src(`./${presentationName}/${folder}/*.html`)
      .pipe(usemin({
        css: [rev, cssnano],
        js: [rev, uglify]
      }))
      .pipe(gulp.dest(`./dist/${folder}`));
  });
  return Promise.all(useminTasks);
});

gulp.task('build', ['deleteDistFolder', 'optimizeImages', 'usemin']);

额外小 tips #

1. 用ES6模板字符串（`包裹）替代繁琐的字符串拼接，代码可读性提升不少
2. 直接传递函数引用（比如rev而不是function() {return rev()}），简化代码同时避免不必要的匿名函数
3. 用Promise.all处理多个异步任务，能确保gulp正确跟踪所有任务的完成状态，不会出现任务提前结束导致文件缺失的情况

现在运行gulp build，就能得到你想要的dist目录结构啦，每个子目录的index.html都会乖乖待在对应的dist子文件夹里～

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