Run code after gulp task done with all files

Question

So I have been trying out Gulp to see how it compares to Grunt as far as speed and I am pretty impressed with the results but I have one thing I don't know how to do in Gulp.

So I have this gulp task to minify HTML:

gulp.task('html-minify', function() {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  return gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));
});

The buildMetaData object has custom functionality that I need and why I can't use plugins like gulp-changed. What I am trying to figure out is how (if possible) to run a block of code after the minify is done process all files and it run successfully. Is something like this possible with gulp?

I would be really surprised and dissappointed if Gulp itself did not emit an event after all tasks were completed.. — Alexander Mills, Jan 06 '16 at 08:03

score 77 · Accepted Answer · answered Jul 07 '14 at 16:31

You could just make a task which depends on html-minify:

gulp.task('other-task', ['html-minify'], function() {
  //stuff
});

You could also listen for the stream end event inside the html-minify task:

gulp.task('html-minify', function(done) {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  var stream = gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));

  stream.on('end', function() {
    //run some code here
    done();
  });
  stream.on('error', function(err) {
    done(err);
  });
});

You could do `stream.on('error', done);` to simplify it a minuscule amount. No need to create another anonymous function. — Colin, May 03 '15 at 20:03
The magic in [option 1] is that calling 'other-task' will automatically run 'html-minify', wait for it to finish, before running itself. Thanks! — Edwin Chua, Sep 07 '18 at 06:25

score 3 · Answer 2 · answered Feb 16 '15 at 23:33

You can also merge two streams with with event-stream. This example takes input from the command line with yargs, builds a config and then merges the two:

var enviroment = argv.env || 'development';
gulp('build', function () {
    var config = gulp.src('config/' + enviroment + '.json')
      .on('end', function() { gutil.log(warn('Configured ' + enviroment + ' enviroment.')); })
      .pipe(ngConstant({name: 'app.config'}));
    var scripts = gulp.src('js/*');
    return es.merge(config, scripts)
      .pipe(concat('app.js'))
      .pipe(gulp.dest('app/dist'))
      .on('error', function() { });
  });

As well as the standard before tasks, you can also wait for a previous task to complete. This is useful when you need to pass arguments to the before task (which gulp does not currently support):

var tasks = {
  before: function(arg){
    // do stuff
  },
  build: function() { 
    tasks.before(arg).on('end', function(){ console.log('do stuff') });
  }
};

gulp('build', tasks.build);

Ali · Answer 3 · 2018-10-08T14:39:14.890

GULP V3

Using dependency tasks:

gulp.task('qr-task', ['md-task', 'js-task'], function() {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
});

Although main task starts after all of dependent tasks but they (dependent tasks) will run in parallel (all at once), so don't assume that the tasks will start/finish in order (md and js run in parallel before qr).

If you want exact order for several tasks and don't want to split them you can use async & await to achieve this:

function Async(p) {
   return new Promise((res, rej) => p.on('error', err => rej(err)).on('end', () => res()));
}

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

  await Async(gulp.src(src + '/*.md')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.js')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.qr')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));
});

GULP V4

in gulp 4 the old dependency pattern is removed and you will get this error:

AssertionError [ERR_ASSERTION]: Task function must be specified

instead you must use gulp.parallel and gulp.series (which provides correct execution of tasks):

gulp.task('qr-task', gulp.series('md-task', 'js-task', function(done) {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
  done();
}));

for more detail visit https://github.com/gulpjs/gulp/blob/4.0/docs/API.md

Run code after gulp task done with all files

3 Answers3

GULP V3

GULP V4

Linked