配置gulp-usemin打包src内容，如何避免dist生成src子文件夹？

问题背景 #

现有项目结构：

├── gulpfile.js
├── output.txt
├── package-lock.json
├── package.json
└── src
   ├── assets
   |  ├── css
   |  ├── img
   |  ├── js
   |  └── pages
   └── index.html

执行现有Gulp构建任务后，dist目录会嵌套src子文件夹，不符合需求：

├── dist
|  └── src
|     ├── assets
|     └── index.html
├── ...（原项目文件）

需求：将src文件夹内的所有内容直接输出到dist根目录，同时处理assets/pages下的HTML文件。

解决方案 #

核心是调整gulp.src的base配置项，将其设置为./src，这样Gulp会保留src内部的目录结构，而非将整个src目录复制到dist中。同时需要确保任务能覆盖所有需要处理的文件（包括pages下的HTML）。

修改后的Gulp任务代码 #

// 图片压缩任务
gulp.task("imagemin", function () {
    return gulp
        .src("./src/assets/img/*", { base: "./src" })
        .pipe(
            imagemin({
                optimizationLevel: 1, // 修正原代码拼写错误：optmizationLevel → optimizationLevel
                progressive: true,
                interlaced: true
            })
        )
        .pipe(gulp.dest("dist/"));
});

// 资源合并压缩任务
gulp.task("usemin", function () {
    return gulp
        .src("./src/**/*.html", { base: "./src" }) // 匹配src下所有HTML文件（含pages子目录）
        .pipe(
            flatmap(function (stream, file) {
                return stream.pipe(
                    usemin({
                        css: [cleanCss(), rev()],
                        html: [
                            function () {
                                return htmlmin({
                                    collapseWhitespace: true
                                });
                            }
                        ],
                        js: [uglify(), rev()],
                        inlinejs: [uglify()],
                        inlinecss: [cleanCss(), "concat"]
                    })
                );
            })
        )
        .pipe(gulp.dest("dist/"));
});

gulp.task("build", gulp.series("clean", gulp.parallel("imagemin", "usemin")));

关键修改点说明 #

• base参数调整：将两个任务中gulp.src的base从.改为./src，Gulp会以src目录为基准，仅保留其内部的文件结构输出到dist。
• HTML文件匹配范围扩大：usemin任务的src路径改为./src/**/*.html，确保能处理assets/pages下的所有HTML文件。
• 修正拼写错误：原imagemin配置中的optmizationLevel修正为optimizationLevel，避免功能异常。

执行修改后的build任务后，dist目录结构会变为：

├── dist
|  ├── assets
|  |  ├── css
|  |  ├── img
|  |  ├── js
|  |  └── pages
|  └── index.html
├── ...（原项目文件）

内容的提问来源于stack exchange，提问作者Ítalo Rissardi