如何在Gulp 4中使用async/await

How to use async/await with Gulp 4?

本文关键字：async await Gulp      更新时间：2023-09-26

我正在尝试这样做：

gulp.task("test", async () => {
    return gulp.src("**/*.scss")
        .pipe(print((filePath) => `File: ${filePath}`));
});

（打印为吞咽打印）

但它给出了以下内容：

[22:08:43] Starting 'test'...
[22:08:43] Finished 'test' after 12 ms
[22:08:43] File: src'app'styles'app.scss
[22:08:43] File: src'app'styles'test.scss

即在打印消息之前完成。

我正在使用Gulp 4（我认为是alpha 2）和TypeScript（1.8.0-dev.20151204）

生成的（ES6）代码如下所示：

gulp.task("test", () => __awaiter(this, void 0, Promise, function* () {
    return gulp.src("**/*.scss")
        .pipe(print((filePath) => `File: ${filePath}`));
}));

其中__awaiter为：

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promise, generator) {
    return new Promise(function (resolve, reject) {
        generator = generator.call(thisArg, _arguments);
        function cast(value) { return value instanceof Promise && value.constructor === Promise ? value : new Promise(function (resolve) { resolve(value); }); }
        function onfulfill(value) { try { step("next", value); } catch (e) { reject(e); } }
        function onreject(value) { try { step("throw", value); } catch (e) { reject(e); } }
        function step(verb, value) {
            var result = generator[verb](value);
            result.done ? resolve(result.value) : cast(result.value).then(onfulfill, onreject);
        }
        step("next", void 0);
    });
};

有可能做到这一点吗？我想在我的任务函数中使用await，但如果不将函数标记为异步，我就无法做到这一点。

我可能遗漏了一些显而易见的东西。

我能够在这里和这里的帮助下完成这项工作。

gulp.task("test", async () => {
    await new Promise((resolve, reject) => {
        gulp.src("**/*.scss")
            .pipe(print((filePath) => `File: ${filePath}`))
            .on("end", resolve);
    });
});

在我的实际任务中，我不得不使用finish事件而不是end事件（请参阅上面的第二个链接）。

目前还不清楚这一切是如何运作的，但我认为这是一个大致的问题：

  1. Gulp函数是异步的，所以需要等待它们，但由于它们不是承诺，所以必须将它们封装在一个函数中
  2. 为了解决promise，您需要监听end或finish事件，哪一个取决于最后一个管道返回的内容

另一个似乎有效的选项是resume()，然后是on("end")，在通常需要finish的情况下。这可能是因为这个。我不确定哪种选择更好。

我很想了解更多，所以如果你能简单地解释这一点，请随时发表评论或发布答案。

编辑：您也可以返回promise，而不是等待它。

基于@glen-84的答案，我找到了我的解决方案，虽然没有什么不同，但也不一样。

不知怎的，对于任务的正确答案，我在直接使用parallel/series时遇到了一些问题，再次导致did you signal async completion错误可能是由我在代码中监督的错误引起的

基于承办人自述中的这个例子：

taker.task('task3', function(){
  return new Promise(function(resolve, reject){
    // do things
    resolve(); // when everything is done
  });
});

我已经使用了这种结构，它似乎适用于task和series/parallel:

function someTask() {
    return new Promise(async (resolve, reject) => {
        await prepareSomethingAsync()
        gulp.src(somePath)
            .pipe(doingSomething())
            .pipe(await doingSomethingBasedOnAsyncResult())
            .on('finish', resolve)
            .on('error', reject)
    })
}
// e.g.: gulp.task('Some Name', someTask)
// e.g.: gulp.series(someTask)
// e.g.: gulp.parallel([someTask, someTask])
相关文章：