CODEWITHSUNDEEP
typescripttypesgulp
Dulux-Oz
Dulux-Oz

Reputation: 35

Gulp (via ts-node) Returning 'void' But Expects 'Task' - Type 'Task' Not Found

Could someone please help a poor (gulp/typescript) noob with a typescript-&-gulp.js-related issue?

So I'm running the latest versions of everything (node, ts-node, gulp, ts, @types/gulp, etc). Gulp is running under/via ts-node (so with a gulpfile.ts instead of gulpfile.js) and I'm getting the following error:

error TS2345: Argument of type 'Promise<void>' is not assignable to parameter of type 'Task'.
Type 'Promise<void>' is not assignable to type 'TaskFunction'.
Type 'Promise<void>' provides no match for the signature '(done: TaskCallback): void | EventEmitter | ChildProcess | Stream | Observable<any> | PromiseLike<any>'.

My (relevant) code is:

gulp.parallel(
    subTask("directory_1"),
    subTask("directory_2")
);

async function subTask(sDirectory:string){
    await gulp.src("src/"+sDirectory+"/*.*")
        // Stuff happens here like linting, transpiling, uglifing, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    return;
}

The code works when I explicitly hard code the directory-strings into subTask (ie having two copies of the subTask => subTask_1 and subTask_2) but not when I parametrize subTask.

I understand that I'm returning a void promise from subTask and gulp is expecting a type of Task (being a derivative of TaskFunction), but I can't work out what type to give to subTask (giving subTask a type of Task results in error TS2304: Cannot find name 'Task'; similarly for type TaskFunction).

So what am I doing wrong? And, more importantly, how do I fix it (ie can I please have some example code that'll fix my issue).

Any help would be greatly appreciated - thanks.

Cheers

Dulux-Oz

Upvotes: 0

Views: 117

Answers (2)

Dulux-Oz
Dulux-Oz

Reputation: 35

So, the answer given by @goto-0 is 99% correct (and thank you very much @goto-0). However, once I had refactored as suggested I ended up with a Did you forget to signal async completion? error.

The full, working solution is to make the sub-function inside subTask an asyncronous function:

function subTask(sDirectory:string) {
    return async function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Stuff happens here like linting, transpiling, uglifing, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

So, all now good :-)

Upvotes: 0

GOTO 0
GOTO 0

Reputation: 47702

There are two issues with your function: the first one is that it returns nothing, the other one is that it is declared as async. While gulp streams work asynchronously, they are not promises, so they don't have to be awaited, and without await there is no need for async.

So I would suggest that you change your function to this:

function subTask(sDirectory:string) {
    return function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Stuff happens here like linting, transpiling, uglifing, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

The rest of your code should be fine.

Upvotes: 1

Related Questions