从Node应用程序化调用gulp.series时未执行全部任务

问题根源 #

你的inline任务被跳过，核心原因是Gulp任务同时使用了async关键字和返回流，导致任务的异步状态追踪失效：

• 当任务是async函数时，Gulp会等待函数内的Promise完成才标记任务结束；
• 但你直接返回了gulp流，async函数没有等待这个流的写入操作完成就提前结束，导致inline任务启动时，handlebars生成的HTML文件还没写入到dist/inline-html目录，inline任务的src('dist/inline-html/*.html')找不到目标文件，因此直接跳过执行。

解决方案 #

有两种修复方式，选其一即可：

方式1：移除任务函数的async关键字

Gulp流本身就是异步操作，返回流就能让Gulp正确追踪任务的完成状态，不需要额外加async。修改三个任务如下：

// Compile Handlebars templates
gulp.task('handlebars', function () {
    return gulp
        .src('views/pages/*.hbs')
        .pipe(
            panini({
                root: 'views/pages',
                layouts: 'views/layouts',
                partials: 'views/partials',
            })
        )
        .pipe(
            rename(function (path) {
                path.basename += '-send';
                path.extname = '.html';
            })
        )
        .pipe(gulp.dest('dist/inline-html'));
});

// Inline CSS from app.css into compiled HTML files
gulp.task('inline', function () {
    return gulp
        .src('dist/inline-html/*.html')
        .pipe(inlineCSS())
        .pipe(gulp.dest('dist/send-html'));
});

// Clean dist folder
gulp.task('clean', function () {
    return gulp.src('dist/**/*', { read: false }).pipe(clean());
});

方式2：将Gulp流转换为Promise并等待（保留async）

如果必须使用async函数，需要把Gulp流包装成Promise，通过await等待流的结束：

// Compile Handlebars templates
gulp.task('handlebars', async function () {
    await new Promise((resolve, reject) => {
        gulp
            .src('views/pages/*.hbs')
            .pipe(
                panini({
                    root: 'views/pages',
                    layouts: 'views/layouts',
                    partials: 'views/partials',
                })
            )
            .pipe(
                rename(function (path) {
                    path.basename += '-send';
                    path.extname = '.html';
                })
            )
            .pipe(gulp.dest('dist/inline-html'))
            .on('end', resolve) // 流结束时resolve
            .on('error', reject); // 出错时reject
    });
});

// Inline CSS任务同理修改
gulp.task('inline', async function () {
    await new Promise((resolve, reject) => {
        gulp
            .src('dist/inline-html/*.html')
            .pipe(inlineCSS())
            .pipe(gulp.dest('dist/send-html'))
            .on('end', resolve)
            .on('error', reject);
    });
});

// Clean任务同理修改
gulp.task('clean', async function () {
    await new Promise((resolve, reject) => {
        gulp.src('dist/**/*', { read: false })
            .pipe(clean())
            .on('end', resolve)
            .on('error', reject);
    });
});

额外检查 #

修复后可以验证一下dist/inline-html目录是否正确生成了HTML文件，确保inline任务的源文件路径无误。

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