Gulp 4 sass forget to signal async completion

Question

I am trying to build my sass with gulp sass and i get the error:

The following tasks did not complete: build, gulpSass Did you forget to signal async completion?

function sass() {
  return gulp.src(paths.sass)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(buildDir));
}

gulp.task('build', gulp.series(
  clean,
  sass,
  html,
  images
));

What is the problem?

Answer 1

Although I cannot see the rest of your code, the problem most likely has to do with a naming collission. I assume you are aliasing the gulp plugin as sass. If you did this then there are two variables using the same name.

var sass = require('gulp-sass');
function sass() { ... }

The latter overrides the first. So when you call gulp.task('build', gulp.series(...,sass,...)); It's assuming you're calling the last function. Which has no return statement.

Easily solved by either renaming the alias, to something like var nodesass = require('gulp-sass'); or renaming the function.

Answer 2

series or gulp.parallel, you have to use async keyword before your function or else you can declare your function with callback as given below.

function sass(cb) {
  return gulp.src(paths.sass)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(buildDir));
cb();
}

Use this logic in your other functions as well.