Gulp 4 series执行异常：Sass任务找不到Bootstrap文件

使用Gulp 4执行以下任务时出现报错：

• 清理src与build文件夹；
• 从node_modules目录将Bootstrap的js和scss文件复制到src对应文件夹；
• 对src中的Bootstrap SCSS文件执行Sass编译，输出到build/css目录。

通过series()串行执行任务时，css任务报错提示找不到目标SCSS文件，但单独运行copy任务能成功复制文件——原本以为series会在前序任务完成后才执行后续任务。

Gulp配置代码 #

const {src, dest, series, parallel} = require('gulp'); 
const del = require('del');

const sass = require('gulp-sass')(require('sass'));
sass.compiler = require('sass');

async function clean(cb){
    console.log("starting clean"); 
    await del(["src", "build"]);
    console.log("done cleaning");
    cb();
}

function copy(cb){
    console.log("starting copying...");
    src("./node_modules/bootstrap/js/**/*").pipe(dest("./src/js/bootstrap"));
    src("./node_modules/bootstrap/scss/**/*").pipe(dest("./src/scss/bootstrap"));
    console.log("finished copying...");
    cb();
}

function css(cb){
    console.log("starting sass....");
    src('./src/scss/bootstrap/bootstrap.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./build/css'));
    console.log("sass complete");

    cb();
};

function log(cb){
    console.log("Logging....");
    cb();
}

exports.css = css;
exports.clean = clean; 
exports.copy = copy; 
exports.default = series(clean, log, copy, css);

报错信息 #

Error: File not found with singular glob: /Users/x/Sites/bootstrap5/src/scss/bootstrap/bootstrap.scss (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (/Users/x/Sites/bootstrap5/node_modules/glob-stream/readable.js:84:17)
    at Object.onceWrapper (events.js:286:20)
    at Glob.emit (events.js:198:13)
    at Glob.EventEmitter.emit (domain.js:448:20)
    at Glob._finish (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:194:8)
    at done (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:179:14)
    at Glob._processSimple2 (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:688:12)
    at /Users/x/Sites/bootstrap5/node_modules/glob/glob.js:676:10
    at Glob._stat2 (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:772:12)
    at lstatcb_ (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:764:12)
Emitted 'error' event at:
    at DestroyableTransform.EventEmitter.emit (domain.js:461:12)
    at Pumpify.emit (events.js:198:13)
    at Pumpify.EventEmitter.emit (domain.js:448:20)
    at Pumpify.Duplexify._destroy (/Users/x/Sites/bootstrap5/node_modules/duplexify/index.js:191:15)
    at /Users/x/Sites/bootstrap5/node_modules/duplexify/index.js:182:10
    at process._tickCallback (internal/process/next_tick.js:61:11)

package.json配置 #

{
  "name": "bootstrap5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.2.1"
  },
  "devDependencies": {
    "del": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "rimraf": "^3.0.2",
    "sass": "^1.54.9"
  }
}

问题根源在于copy任务的异步处理逻辑：Gulp的src和dest都是异步流操作，你直接调用cb()会导致任务在文件复制完成前就标记为结束，后续css任务启动时目标文件还没复制到位，自然找不到SCSS文件。

核心修改点 #

让copy和css任务返回流（或Promise），这样Gulp才能正确跟踪任务的完成状态，确保串行执行的顺序性。

修改后的完整配置 #

const {src, dest, series, parallel} = require('gulp'); 
const del = require('del');

const sass = require('gulp-sass')(require('sass'));
sass.compiler = require('sass');

async function clean(){
    console.log("starting clean"); 
    await del(["src", "build"]);
    console.log("done cleaning");
}

function copy() {
    console.log("starting copying...");
    // 返回合并后的流，让Gulp等待所有复制操作完成
    return parallel(
        src("./node_modules/bootstrap/js/**/*").pipe(dest("./src/js/bootstrap")),
        src("./node_modules/bootstrap/scss/**/*").pipe(dest("./src/scss/bootstrap"))
    )();
}

function css() {
    console.log("starting sass....");
    // 返回编译流，确保Gulp等待Sass处理完成
    return src('./src/scss/bootstrap/bootstrap.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(dest('./build/css'));
}

function log(cb){
    console.log("Logging....");
    cb();
}

exports.css = css;
exports.clean = clean; 
exports.copy = copy; 
exports.default = series(clean, log, copy, css);

关键说明 #

1. copy任务：通过parallel合并两个复制流并返回，Gulp会等待所有流操作完成后才标记任务结束，确保后续css任务启动时文件已复制到位。
2. css任务：返回Sass编译流，让Gulp跟踪编译过程的完成状态，避免提前结束任务。
3. clean任务：async函数本身会返回Promise，无需再调用cb()，Gulp能自动识别任务完成状态。

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