Gulp 5多源文件不编译求助：JS/PHP/IMG编译失败

问题重现 #

配置Gulp 5处理多JS、PHP、图片文件时，仅单个文件的SCSS任务能正常编译生成文件；JS、图片任务日志显示执行完成，但目标目录无输出文件。尝试指定多个路径列表也无法解决问题。

环境版本 #

• Node: 23.1.0
• NPM: 10.9.1
• Gulp: 5.0
• Gulp Cli: 3.0.0

核心问题与修复步骤 #

1. 混合ES模块与CommonJS导入导致冲突 #

代码中同时使用import gulp from "gulp"和const { src, dest... } = require("gulp")，Gulp 5对ES模块支持更严格，这种混合导入会干扰流处理逻辑。

修复：统一使用ES模块解构导入Gulp方法：

import gulp from "gulp";
const { src, dest, series, parallel, watch } = gulp;

2. 错误使用async关键字包裹流任务 #

Gulp任务返回流时不需要用async修饰——async函数会自动将返回值包装为Promise，打乱Gulp对文件流完成状态的判断，导致任务提前结束但未完成文件写入。

修复：移除所有任务函数的async关键字，直接返回流。

3. 冗余的路径配置（图片任务） #

图片任务的SRC路径["src/images/**/*.{jpg,jpeg,webp,png}", "src/images/*.{jpg,jpeg,webp,png}"]存在冗余，**/*.ext已经包含当前目录下的所有对应文件，无需重复声明根目录路径。

修复：简化为src("src/images/**/*.{jpg,jpeg,webp,png}")

4. 依赖缺失检查 #

确保Babel相关依赖已正确安装：

npm install @babel/core @babel/preset-env gulp-babel --save-dev

修改后的完整代码 #

import gulp from "gulp";
import * as sass from "sass";
import gulpSass from "gulp-sass";
const scss = gulpSass(sass);
import prefix from "gulp-autoprefixer";
import cssmin from "gulp-cssmin";
import concat from "gulp-concat";
import uglify from "gulp-uglify";
import babel from "gulp-babel";
import webp from "gulp-webp";
import browserSync from "browser-sync";

// 统一从gulp导入所需方法
const { src, dest, series, parallel, watch } = gulp;

function gulpPHP() {
  return src("./dist/**/*.php").pipe(browserSync.stream());
}

function gulpScss() {
  return src("./src/scss/main.scss")
    .pipe(scss({ outputStyle: "compressed" }).on("error", scss.logError))
    .pipe(prefix())
    .pipe(dest("./dist/css/"))
    .pipe(browserSync.stream());
}

function gulpJS() {
  return src("./src/sjs/**/*.js")
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(concat("main.js"))
    .pipe(uglify())
    .pipe(dest("./dist/js/"))
    .pipe(browserSync.stream());
}

function gulpImg() {
  return src("src/images/**/*.{jpg,jpeg,webp,png}")
    .pipe(webp())
    .pipe(dest("dist/images/"))
    .pipe(browserSync.stream());
}

function gulpWatch() {
  watch("./src/scss/**/*.scss", gulpScss);
  watch("./src/sjs/**/*.js", gulpJS);
  watch("./dist/**/*.php", gulpPHP);
  watch("src/images/**/*.{jpg,jpeg,webp,png}", gulpImg);
}

function gulpSync() {
  browserSync.init({
    proxy: "damas.test",
  });
}

exports.default = series(
  gulpScss,
  gulpJS,
  gulpPHP,
  gulpImg,
  parallel(gulpWatch, gulpSync)
);

额外说明 #

Gulp 5相比旧版本在异步任务处理上有较大变化，官方推荐任务直接返回流、Promise或使用回调函数，避免用async包裹流任务——这是很多升级用户容易踩的坑。如果需要使用异步逻辑，确保任务返回的Promise能正确反映任务完成状态。

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