Gulp 4 task: "Did you forget to signal async completion?"

[pablodenadai]

Setup

λ gulp -v
[10:52:08] CLI version 1.0.0
[10:52:08] Local version 4.0.0-alpha.2

del v2.1.0
Windows 7

Tasks

var del = require('del');
function clean() {
    return del(['docs', 'coverage', 'build', 'release']);
}

function build() {
    return gulp.series(
        clean
    );
}

gulp.task(build);

Error

λ gulp build
[10:52:22] Using gulpfile C:\project\gulpfile.js
[10:52:22] Starting 'build'...
[10:52:22] The following tasks did not complete: build
[10:52:22] Did you forget to signal async completion?

Am I missing something?

[SamVerschueren]

I think this is an issue with Gulp@4. del returns a promise which should be handled correctly by Gulp. Not sure if this is still the case in Gulp@4.

[TrySound]

@ghpabs Try to define clean function as task.

[pablodenadai]

@TrySound I did. No luck.

I managed to fix it by setting up my task as per below:

gulp.task('build', gulp.series(
    clean
));

[TrySound]

@ghpabs Oh I understood. You should return result of call generated function like

function build() {
    return gulp.series(
        clean
    )();
}

[Healforgreen]

Setup:

CLI version: 0.4.0
Local version: 4.0.0-alpha.2

I'm experiencing the same problem when I define a gulp.series task with an array of sub-tasks:

gulp.task('build', gulp.series([
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
]);

I'll try wrapping all the sub-tasks into a function like @ghpabs did, but gulp.series should be able to work like this anyway.

[TrySound]

@Nocomm I'm sure that named tasks should be defined as tasks not functions. I mean if you pass strings in gulp.series you should define that tasks not only functions.

[Healforgreen]

My problem turned out to be totally unrelated to this, sorry.

However, I think this

gulp.task('build', gulp.series([
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
]));

can also include a list

gulp.task('build', gulp.series(
    'copyBowerFiles',
    'copyBootstrapFiles',
    'injectIntoIndex'
));

instead of an array. Both syntaxes work fine.

[quoniammm]

My suggestion is:

var del = require('del');
function clean(cb) {
    del(['docs', 'coverage', 'build', 'release']);
    cb();
}

gulp.task('build', gulp.series(clean));

[schnittstabil]

@QuoniamYIF That doesn't work, del is async, thus cb() is called to early…

See Sample gulpfile.js (v3) and Sample gulpfile.js (v4) for working examples.

Personally I use this:

// gulp v3
gulp.task('clean', del.bind(null, ['docs', 'coverage', 'build', 'release']));

// gulp v4
exports.clean = del.bind(null, ['docs', 'coverage', 'build', 'release']);

See Function.prototype.bind() - Partially applied functions (currying) for details.

[AquilaSagitta]

I did this to solve the issue. Idk why it works it just works

export const build = (done) => {
    gulp.series(clean, gulp.parallel(styles, scripts))(done);
};

[slsriehl]

@AquilaSagitta's solution worked for me. It seems like this issue arises anytime you have a task or subtask that runs multiple functions, because JavaScript is asynchronous. So any task that calls more than one function needs to call done, which will wait for all the tasks to finish & then exit that block of the promise.

Under the hood I suspect that calling gulp returns a promise, and each task requires a promise resolve or reject because recent versions of node require explicit promise resolutions, probably to do with supporting async/await syntax. In a task that only calls one function, returning the function seems to suffice.

So in @AquilaSagitta's example, it's probably either styles or scripts in gulp.parallel that needs to call done. I THINK that every gulp method automatically returns the gulp promise on complete, but gulp.parallel might not? -- so it could be gulp.parallel throwing the promise error.

Here's where the error arose for me:

gulp.task('prod', gulp.parallel(['compile-min-css', 'concat-min-js', 'vend']));

vend threw the error, and prod also threw the error, because its return value depends on the return values of its children. Vend looked like this:

gulp.task('vend', () => {

  //bootstrap
  bootstrapSrc('css', '');
  bootstrapSrc('js', '/vendor');

  //font-awesome
  // faSrc('css');
  faSrc('fonts');

  //jquery & popper
  jsOnlyVend(`jquery`);
  jsOnlyVend(`popper.js`);
});

And the fix was to add the done parameter to vend & call it at the end.

gulp.task('vend', (done) => {

  //bootstrap
  bootstrapSrc('css', '');
  bootstrapSrc('js', '/vendor');

  //font-awesome
  // faSrc('css');
  faSrc('fonts');

  //jquery & popper
  jsOnlyVend(`jquery`);
  jsOnlyVend(`popper.js`);

  done();
});

[standiki]

Was having same error but after proper reading of the above solution it worked for me, below is my code.

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

// A function to help grab the css file

gulp.task('shop', function(resolve){
gulp.src('css/shop.css')
// Pipe the content of the css file into autoprefixer
.pipe(autoprefixer())
.pipe(gulp.dest('build'))

resolve();

//Calling the function param which is "resolve" did the magic
});

[TrySound]

@agilestrings You should return stream so task could track its state. Calling resolve like you did does not actually solve the problem. Stream continue do the work.

gulp.task('shop', function(){
  return gulp.src()
})