如何防止具有動態導入的 Gulp 任務異步執行？

Question

我想使用 gulp-imagemin 來縮小圖像。 我的 gulpfile.js 的相關部分如下所示：

const gulp = require('gulp');
// a couple more require('')s

function minifyImages(cb) {
    import('gulp-imagemin')
        .then(module => {
            const imagemin = module.default;
            gulp.src('src/img/**/*')
                .pipe(imagemin())
                .pipe(gulp.dest('img'));
            cb();
        })
        .catch(err => {
            console.log(err);
            cb();
        });
}

function buildCSS(cb) { /* ... */ }

exports.build = gulp.series(buildCSS, minifyImages);

我在這里使用動態導入的原因是因為我認為我必須 - gulp-imagemin 不支持require('')語法，當我說import imagemin from 'gulp-imagemin ，我收到一條錯誤消息“不能在模塊外使用 import 語句”。

我希望build任務僅在minifyImages完成后完成。 畢竟，我只是在最后才調用cb() ，在應該解析 promise 的位置。

但是， build似乎提前完成，而minifyImages仍在運行。 這是我得到的 output：

[21:54:47] Finished 'buildCSS' after 6.82 ms
[21:54:47] Starting 'minifyImages'...
[21:54:47] Finished 'minifyImages' after 273 ms
[21:54:47] Finished 'build' after 282 ms
<one minute later>
[21:55:49] gulp-imagemin: Minified 46 images (saved 5.91 MB - 22.8%)

如何確保任務不會提前完成，並且所有任務都按順序運行？

讓我知道我的假設是否有問題； 我對 gulp 和導入有些陌生。

Answer 1

流始終是異步的，因此如果在創建 gulp stream 之后調用cb()回調，就像在您的then處理程序中一樣，很明顯到那時 stream 還沒有完成（事實上，它甚至還沒有開始） .

當gulp.dest stream 完成時調用回調的最簡單解決方案是使用stream.pipeline ，即：

function minifyImages(cb) {
    const { pipeline } = require('stream');
    return import('gulp-imagemin')
        .then(module => {
            const imagemin = module.default;
            pipeline(
                gulp.src('src/img/**/*'),
                imagemin(),
                gulp.dest('img'),
                cb
            );
        })
        .catch(cb);
}

或者類似地，使用異步 function。

async function minifyImages(cb) {
    const { pipeline } = require('stream');
    const { default: imagemin } = await import('gulp-imagemin');
    return pipeline(
            gulp.src('src/img/**/*'),
            imagemin(),
            gulp.dest('img'),
            cb
    );
}

我看到的另一種方法是將任務拆分為兩個連續的子任務：第一個子任務導入插件模塊並將其存儲在一個變量中，第二個子任務使用前一個子任務已經加載的插件以通常的方式創建和返回 gulp stream。 然后兩個子任務可以結合gulp.series 。