Run gulp task after completion of other task

Question

I have two sets of files, let's call them base and mods. The mods files override the base files, so when I run the gulp task related to base, I need to run the mods task directly after. My setup is something like this:

gulp.task('base',function(){
  return gulp.src('base-glob')
    .pipe(...)
    .pipe(gulp.dest('out-glob'))
});

gulp.task('mods',function(){
  return gulp.src('mods-glob')
    .pipe(...)
    .pipe(gulp.dest('out-glob'))
});

So I want to run the mods task at the completion of the base task. Note that this is not the same as defining base as a dependency of mods, because if I'm only changing mods files, I only need to run the mods task. I'd prefer not to use a plugin.

I've been reading the docs about callback functions and other suggestions of synchronous tasks, but can't seem to get my head around it.

Answer 1

I know you don't want to use a plugin, but gulp doesn't have a way to run a sequence of tasks in order without a plugin. Gulp 4 will, but in the meantime the stopgap solution is the run-sequence plugin.

gulp.task('all', function() {
  runSequence('base', 'mods');
});

This ensures that the tasks run in order as opposed to unordered dependencies.

Now setup a watch:

gulp.task('watch', function() {
    gulp.watch('base-glob', ['all']);
    gulp.watch('mods-glob', ['mods']);
});

Whenever base-glob changes, gulp will run all task, which will run the sequence base then mods.

Whenever mods-glob changes, gulp will run only mods task.

That sound about right?