2

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
Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
ingoBe
  • 57
  • 6
  • 2
    `function () {` what about giving these functions a name? `function myFunctionName () {`. They're both anonymous at the moment – evolutionxbox Aug 03 '21 at 10:04
  • @evolutionxbox thank you. Unfortunately this doesn't work either. – ingoBe Aug 03 '21 at 10:06
  • @ingoBe i think i have the answer, please try that. i'm using gulp v4 and it showing the task name in console. so give it a try. posting answer in a minute – Gulam Hussain Aug 03 '21 at 10:11
  • @evolutionxbox I misunderstood your answer at fist. Returning a named function indeed works! Thank you very much! – ingoBe Aug 03 '21 at 10:12
  • 1
    @ingoBe no worries. It was a suggestion not an answer. I'll let Gulam answer it if they like --- also please do not edit the question with the answer (in case you felt the need to) – evolutionxbox Aug 03 '21 at 10:13

1 Answers1

3

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
}
Gulam Hussain
  • 1,591
  • 10
  • 19
  • Thank you! If I add ```return``` before gulp.src(...).pipe(...), it works and I even can omit the createHtml.displayName line. – ingoBe Aug 03 '21 at 10:36
  • Yes yes, you don't need `createHtml.displayName = "Custom Name"`. updating the answer – Gulam Hussain Aug 03 '21 at 10:39
  • 1
    I think ```return``` inside```'const createHtml = function () {}``` is necessary for this to work? Otherwise the task can't be completed. At least in my case. – ingoBe Aug 03 '21 at 10:45