Gulp/Typescript/Async/Await 代码不起作用 - 为什么？答案

【问题标题】：Gulp/Typescript/Async/Await Code Not Working - Why?Gulp/Typescript/Async/Await 代码不起作用 - 为什么？
【发布时间】：2022-01-22 14:57:42
【问题描述】：

总结：理解为什么下面使用 async/await 的 Gulp.js(v4)/Typescript 代码没有下降到第二层函数。

所以我在 Windows 10 机器上使用所有相关软件的最新 npm 下载（参见下面的列表）。我希望所有五个 console.log 语句都会显示在结果中，以及要复制到“test”目录的文件（robots.txt），但从结果中可以看出它没有发生（机器人.txt 文件也没有被复制）。我阅读了整个 Gulp 网站以及一堆教程（即使是那些使用已被贬值的旧 gulp.task() 方法的教程），并且为了记录，我已经研究了一周 - 而我我对 TS 和 Gulp 比较陌生，我有 20 多年的多种不同语言的编码经验，所以我不是一个完整的新手。

我从所有官方资料中读到的所有内容都告诉我我的代码应该可以工作，但它没有，所以很明显我遗漏了一些东西（可能是一些非常明显的东西），所以我求助于我的开发伙伴帮助/建议。

请注意：我不是在寻找这样做的“旧”方式，或者使用回调等 - 我知道如何做到这一点。我正在寻找为什么这段代码不起作用 - 我的目标是了解正在发生的事情，而不是成为一个“狂热的开发者”。

（提前）感谢您的帮助。

软件版本

npm v8.3.0
Gulp v4.0.2
Gulp-cli v2.3.0
Typescript v4.5.3
@types/gulp V4.0.9
ts-node v10.4.0

我的代码

gulp.ts - 是的，我知道这段代码中没有 TS 类型

"use strict";
import * as gulp from "gulp";

async function robotsTask(){
  console.log("got to robotsTask start");
  await gulp.src("source/robots.txt")
    .pipe(gulp.dest("test"));
  console.log("got to robotsTask end");
  return;
}

export default async function startHere(){
  console.log("got to startHere start");
  function testFn() {console.log("got to testFn");};
  await gulp.series(
    testFn,
    robotsTask
  );
  console.log("got to startHere end");
  return;
}

输出

[16:41:20] Requiring external module ts-node/register
[16:41:23] Using gulpfile C:\Build_Environment\gulpfile.ts
[16:41:23] Starting 'default'...
got to startHere start
got to startHere end
[16:41:23] Finished 'default' after 2.17 ms

【问题讨论】：

标签： typescript async-await gulp

【解决方案1】：

您没有正确使用gulp.series。如果您仔细阅读文档，series 函数会返回一个组合操作（一个函数）。您只是定义系列而不是执行它。您在各处添加的 await 什么都不做，因为这些函数不会返回承诺。

让你的行为符合“预期”

function robotsTask(cb: any) {
  console.log('got to robotsTask start')
  gulp.src('source/robots.txt').pipe(gulp.dest('test'))
  console.log('got to robotsTask end')
  cb()
}

function testFn(cb: any) {
  console.log('got to testFn')
  cb()
}

export default async function startHere(){
  console.log("got to startHere start");
  
  const series = gulp.series(testFn, robotsTask);

  await series((e) => {
    if (e) {
      console.log(e)
    }
  });

  console.log("got to startHere end");
  return;
}

【讨论】：

【解决方案2】：

感谢以上回答 - 我很感激。

但是，正如我在问题中所说，我并不追求使用回调的解决方案。

但是，您的回答确实包含了我所追求的解释的核心，因此我确实解决了这个问题（有几个朋友的一些意见）。我们的解决方案（使用 async/await）如下，提供给那些想知道的人：

"use strict";
import * as gulp from "gulp";

async function testFn() {console.log("got to testFn");};

async function robotsTask() {
    console.log("got to robotsTask start");
    await gulp.src("source/robots.txt")
        .pipe(gulp.dest("test"));
    console.log("got to robotsTask end");
    return;
}

const startHere = gulp.series(
    async () => console.log("got to startHere start"),
    testFn,
    robotsTask,
    async () => console.log("got to startHere end")
);

export default starHere

【讨论】：