Gulp/Typescript/Async/Await Code Not Working

Summary: Tying to understand why the below Gulp.js(v4)/Typescript code using async/await is not descending into the 2nd-tier functions.

So I'm using the most up-to-date npm downloads of all the relevant software (see list below) on a Windows 10 machine. I'm expecting all five console.log statements to show up in the results, along with the file (robots.txt) to be copied to the "test" directory, but as can be seen from the results its not happening (the robots.txt file is not being copied either). I'm read the entire Gulp website plus a bunch of Tutorials (even those that use the old gulp.task() methods which have been depreciated), and for the record I've been researching this for a week now - while I'm relatively new to TS and Gulp I've got over 20 years of coding experience in a number of different languages, so I'm not a complete newbie.

Everything I've read from all the official sources tells me my code should work, but it doesn't, so obviously I'm missing something (probably something glaringly obvious), so I'm turning to me fellow devs for help/advice.

Please note: I'm not looking for the "old" way of doing this, or by using callbacks, etc - I know how to do that. What I'm looking for why this code isn't working - my goal is to understand what's happening, not to be a "cargo-cult dev".

(In advance) Thanks for the help.

Software versions

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

My Code

gulp.ts - yes, I'm aware there are no TS types in this code

"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;
}

Output

[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

CodePudding user response：

You are not using gulp.series correctly. If you read the docs carefully, the series function returns a composed operation (a function). You are only defining the series but not executing it. The await you've added everywhere does nothing because those functions don't return promises.

to make what you have behave as "expected"

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;
}

CodePudding user response：

Thanks for the above answer - I appreciate it.

However, as I said in my question, I wasn't after a solution using callbacks.

Your answer does, however, contain the kernel of the explanation I was after, and so I did actually work this out (with some input from a couple of friends). Our solution (which uses async/await) is below, provided for those who would like to know:

"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