深入理解Node.js中Gulp任务的程序化执行与常见陷阱

const gulp = require('gulp');
const rename = require('gulp-rename');
const inlineCSS = require('gulp-inline-css');
const clean = require('gulp-clean');
const panini = require('panini');

// 定义 Gulp 任务
gulp.task('handlebars', async 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'));
});

gulp.task('inline', async function () { // 注意这里的 async 关键字
    return gulp
        .src('dist/inline-html/*.html')
        .pipe(inlineCSS())
        .pipe(gulp.dest('dist/send-html'));
});

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

// 程序化运行 Gulp 任务的封装函数
async function gulpTaskRunner() {
    return new Promise(function (resolve, reject) {
        // 使用 gulp.series 串行执行任务
        gulp.series('clean', 'handlebars', 'inline', (done) => {
            console.log('Gulp task completed');
            resolve(); // 解决 Promise
            done(); // 通知 Gulp 任务完成
        })(); // 立即执行 gulp.series 返回的函数
    });
}

// 主应用程序逻辑
async function app() {
    console.log('start');
    await gulpTaskRunner();
    console.log('end');
}

app();

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

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

// Compile Handlebars templates
gulp.task('handlebars', function () { // 移除了 async 关键字
    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'));
});

// Clean dist folder
gulp.task('clean', function () { // 移除了 async 关键字
    return gulp.src('dist/**/*', { read: false }).pipe(clean());
});