gulp: Gulp 4: Functions that return gulp.series or gulp.parallel do not allow tasks to complete

What were you expecting to happen?

I wrote up this gulp 4 code:

//reloads the browser
function reload(done){
  browserSync.reload();
  done();
}

//If running in PHP mode, convert the html files to php files before reloading
gulp.task('pug:reload', (done)=>{
  if (config.serve === 'php'){
    return gulp.series('convert-HTML', reload);
  } else {
    return gulp.series(reload);
  }
});

//The main pug task
gulp.task('pug', gulp.series(
  'pug:compile',
  'pug:reload',//the one causing the issue
));

When running in PHP mode, I expected that the main pug task would essentially equate to this:

gulp.task('pug', gulp.series(
  'pug:compile',
  gulp.series('convert-HTML', reload),
));

When running in HTML mode, I expected that the main pug task would essentially equate to this:

gulp.task('pug', gulp.series(
  'pug:compile',
  gulp.series(reload),
));

I tested putting the code inline like that just to make sure that the tasks weren’t broken. It did indeed work as expected.

What actually happened?

When I tried to run the ‘pug:reload’ task, it came up with this error:

[00:45:34] The following tasks did not complete: pug:reload
[00:45:34] Did you forget to signal async completion?

The only way I could get around this was to do this with my code:

var pugReload = gulp.series(reload);
if (config.serve === 'php') pugReload = gulp.series('convert-HTML', reload);

gulp.task('pug', gulp.series(
  'pug:compile',
  pugReload,
));

It was then able to compile successfully.

What version of gulp are you using?

[01:10:37] CLI version 1.2.2
[01:10:37] Local version 4.0.0-alpha.2

What versions of npm and node are you using?

npm: 3.10.6 node: 4.4.7

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 1
  • Comments: 18 (7 by maintainers)

Most upvoted comments

This should really be explained better in the docs, I’ve just spent a couple of hours trying to figure out how to run a basic gulp setup…

import gulp from 'gulp'
import sass from 'gulp-sass'
import pug from 'gulp-pug'

gulp.task('styles', () => {
	return gulp.src('src/sass/**/*.scss')
		.pipe(sass())
		.pipe(
			gulp.dest('./dist')
		)
})

gulp.task('markup', () => {
	return gulp.src('src/pug/**/*.pug')
		.pipe(pug())
		.pipe(
			gulp.dest('./dist')
		)
})

gulp.task('build', (done) => (
	gulp.series('styles', 'markup')(done)
))

Had I not found this issue, I’d pull all of my hair out

Ahh ok, I get it now. Thanks for the help 😃

I had a thought though. Since the main reason that the task fails is because the return function isn’t being called, I thought I would try calling it from the return statement.

Using this syntax works 😃

gulp.task('pug:reload', (done)=>{
  if (config.serve === 'php'){
    return gulp.series('convert-HTML', reload)(done);
  } else {
    return gulp.series(reload)(done);
  }
});

You can also do this with Gulp 4.

exports.build = gulp.series(styles, markup);

Try it. It should work.

gulp.series() returns an uncalled function that takes done as it’s first parameter.

Now take a look at your code

(done) => ( 
   gulp.series('styles', 'markup')(done)
)

That anonymous function is an uncalled function that takes done as it’s first parameter.

@selrond you have over complicated it.

Instead of doing this:

gulp.task('build', (done) => (
	gulp.series('styles', 'markup')(done)
))

Just do this:

gulp.task('build', gulp.series('styles', 'markup'))

That would be the more correct way to do it 😅

The return gulp.series(X, Y)(done) pattern is a bit of a hack.

Plus the documentation is not complete. We’re currently looking for sponsors to help us pay to get them written: https://opencollective.com/gulpjs

@Dan503 Yeah, a task function can return a few things to signal completion: A promise, a stream, or nothing (and you call the callback passed into the args)

You’re returning a function, which does not signal completion and that function will not be executed.