The following tasks did not complete. Did you forget to signal async completion? Syntax question

Question

There are gulp files

gulpfile.js

const gulp = require('gulp');
const {path} = require('./gulp/config/path.js');
const {plugins} = require('./gulp/config/plugins.js');
/*
import gulp from "gulp";
import {path} from "./gulp/config/path.js";
import {plugins} from "./gulp/config/plugins.js";
*/

global.app = {
    isBuild: process.argv.includes('--build'),
    isDev: !process.argv.includes('--build'),
    path: path,
    gulp: gulp,
    plugins: plugins
}

// Имрорт задач
const copy = require("./gulp/tasks/copy.js");
const reset = require("./gulp/tasks/reset.js");
const html = require("./gulp/tasks/html.js");
const server = require("./gulp/tasks/server.js");
const scss = require("./gulp/tasks/scss.js");
const js = require("./gulp/tasks/js.js");
const images = require("./gulp/tasks/images.js");
const {otfToTtf, ttfToWoff, fontsStyle} = require("./gulp/tasks/fonts.js");
const svgSprive = require("./gulp/tasks/svgSprive.js");
const zip = require("./gulp/tasks/zip.js");
const ftp = require("./gulp/tasks/ftp.js");

/*
import {copy} from "./gulp/tasks/copy.js";
import {reset} from "./gulp/tasks/reset.js";
import {html} from "./gulp/tasks/html.js";
import {server} from "./gulp/tasks/server.js";
import {scss} from "./gulp/tasks/scss.js";
import {js} from "./gulp/tasks/js.js";
import {images} from "./gulp/tasks/images.js";
import {otfToTtf, ttfToWoff, fontsStyle} from "./gulp/tasks/fonts.js";
import {svgSprive} from "./gulp/tasks/svgSprive.js";
import {zip} from "./gulp/tasks/zip.js";
import {ftp} from "./gulp/tasks/ftp.js";
*/

function watcher() {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.images, images);
}

// export {svgSprive}

const fonts = gulp.series(otfToTtf, ttfToWoff, fontsStyle);

const mainTasks = gulp.series(fonts, gulp.parallel(copy, html, scss, js, images));

const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));
const build = gulp.series(reset, mainTasks, svgSprive);
const deployZIP = gulp.series(reset, mainTasks, zip);
const deployFTP = gulp.series(reset, mainTasks, ftp);

/*
export {dev}
export {build}
export {deployZIP}
export {deployFTP}
*/

module.exports = { svgSprive, dev, build, deployZIP, deployFTP};

gulp.task('default', dev);

reset.js

/*import {
    deleteAsync
} from "del"*/

const del = require('del');

const reset = () => {
    async () => {
        const deletedPaths = await del(app.path.clean);
     
        // console.log('Deleted files and directories:\n', deletedPaths.join('\n'));
    }   
    
    // deleteAsync(app.path.clean)
}

module.exports = reset;

As a result of running the gulp command, 2 red messages fly out: The following tasks did not complete. Did you forget to signal async completion?.

https://i.sstatic.net/Er6SA.png

Please tell me how to fix these messages.

Googled and found The following tasks did not complete. Did you forget to signal async completion?, but I use a slightly different syntax. I tried to use gulp.task('default', dev); instead of gulp.task('default', async dev);, but it underlines async dev in red.

I'm trying to run gulp without errors and I'm waiting for help with the syntax to solve the problem.

Answer 1

Read about the gulp task async completition: https://gulpjs.com/docs/en/getting-started/async-completion/

My preference is to use async and promisify everything in gulp - tasks, streams and so on.

At a glance your watcher doesn't report any async completion:

function watcher() {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.images, images);
}

You should use either callback or return a promise:

function watcher(done) {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.images, images);
    done();
}

or

async function watcher() {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.images, images);
}

or

function watcher() {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.images, images);
    return Promise.resolve();
}

Make sure all your other tasks follow the same logic.

About your reset(). You define an async function in the body and it does nothing, I guess your reset() could look like:

const reset = async () => {
    const deletedPaths = await del(app.path.clean);
    console.log('Deleted files and directories:\n', deletedPaths.join('\n'));
}