How to assign a name to an anonymous gulp (v4) task

Question

I am using gulp for the first time now and followed the recommendation of gulp and exported my gulp tasks.

It is running and the results are as expected. However on my console, the tasks are listed as.

How can I assign a name to exported gulp tasks?

I have been trying to follow different approaches, such as functionName.displayName = "Custom Name"; before exporting the module, but nothing worked.

Sample gulp file.

const gulp = require('gulp');
const createHtml = require('./scripts/createHtml');
...

module.export = {
    default: gulp.series(createHtml())
}

createHtml module

const gulp = require('gulp');
...

const createHtml = function () {
    return function () {
        return gulp
            .src('./src/pages/**/*.+(html)')
            ... 
            .pipe(gulp.dest('./build/')))
    };
}
createHtml.displayName = "Custom Name";

module.exports = createHtml;

gulp output

[11:38:50] Using gulpfile ~/Documents/.../gulpfile.js
[11:38:50] Starting 'default'...
[11:38:50] Starting '<anonymous>'...
[11:38:50] Finished '<anonymous>' after 10 ms
[11:38:50] Starting '<anonymous>'...
[11:38:50] Starting '<anonymous>'...
[11:38:50] Finished '<anonymous>' after 24 ms
[11:38:50] Finished '<anonymous>' after 42 ms
...

I am using the following versions:

• gulp v4.0.2
• node v15.2.0
• macOS 11.5.1

Answer 1

No need to return a function from createHtml function. you are returning anonymous function and that anonymous is being executed in gulp.series() call, that's why task name is anonymous.

You need to pass named function to gulp.series .

Try this -

const gulp = require('gulp');
...

const createHtml = function () {
     return gulp.src('./src/pages/**/*.+(html)')
     ... 
    .pipe(gulp.dest('./build/')))
}

module.exports = createHtml;

Then in your gulp file

const gulp = require('gulp');
const createHtml = require('./scripts/createHtml');
...

module.export = {
    default: gulp.series(createHtml);// pass the function reference here
}