Gulp - Async Completion with a Loop

Question

I'm working with a Gulp file. In this file, I have two functions that perform two separate tasks. These functions are called using the following:

gulp.task('build', gulp.parallel(buildJs, buildCss));

When the build task is executed, I receive the following error:

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

My buildCss function is defined like this:

const files= [
    { input:'core.scss', output:'core.css' },
    { input:'theme.scss', output:'theme.css' },
    { input:'controls.scss', output:'controls.css'}
];

function buildCss() {
    files.forEach(function(f) {
        return gulp.src(`./scss/${f.input}`)
            .pipe(sass())
            .pipe(concat(f.output))
            .pipe(gulp.dest('./'))
        ;
    });
}

I suspect that each iteration of the loop is spinning up it's own thread. So, Gulp never knows when buildCss is finished. Which means, somehow, I need to know when all of the .css files are generated and call something. I'm unsure how to do the last piece if my understanding is correct though.

How do I address async completion of items in a loop in Gulp?

Thank you!

See also https://stackoverflow.com/a/62366493/836330 for info on gulp and forEach. — Mark, Mar 23 '21 at 18:53

score 3 · Accepted Answer · answered Mar 23 '21 at 17:54

You can use .on('end') and create a Promise for each task, and then check that all promises went ok, sth like this should work:

function buildCss() {
  return Promise.all(files.map(task => {
    return new Promise((resolve,reject) => {
      return gulp.src(`./scss/${task.input}`)
        .pipe(sass())
        .pipe(concat(task.output))
        .pipe(gulp.dest('./'))
        .on('end', () => resolve())
        ;
    });
  }));
}

Gulp - Async Completion with a Loop

1 Answers1