在完成所有文件的 gulp 任务后运行代码

Question

所以我一直在尝试 Gulp，看看它在速度方面与 Grunt 相比如何，结果给我留下了深刻的印象，但我有一件事我不知道如何在 Gulp 中做。

所以我有这个 gulp 任务来缩小 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));
});

buildMetaData 对象具有我需要的自定义功能，以及为什么我不能使用像 gulp-changed 这样的插件。我想弄清楚的是如何（如果可能的话）在缩小完成处理所有文件并成功运行后运行代码块。使用 gulp 可以实现这样的事情吗？

Answer 1

你可以只做一个依赖html-minify的任务：

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

您还可以在html-minify 任务中侦听流end 事件：

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);
  });
});

Answer 2

您还可以将两个流与event-stream 合并。此示例使用 yargs 从命令行获取输入，构建配置，然后将两者合并：

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() { });
  });

除了标准的之前的任务，您还可以等待之前的任务完成。当您需要将参数传递给 before 任务（gulp 目前不支持）时，这很有用：

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

gulp('build', tasks.build);

Answer 3

GULP V3

使用依赖任务：

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

虽然主任务在所有依赖任务之后开始，但它们（依赖任务）将并行运行（一次全部），所以不要假设任务会按顺序开始/结束（ md 和 js 在 qr 之前并行运行）。

如果您想要几个任务的确切顺序并且不想拆分它们，您可以使用 async 和 await 来实现：

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

在 gulp 4 中，旧的依赖模式被删除了，你会得到这个错误：

AssertionError [ERR_ASSERTION]: Task function must be specified

相反，您必须使用 gulp.parallel 和 gulp.series（提供正确的任务执行）：

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

更多详情请访问https://github.com/gulpjs/gulp/blob/4.0/docs/API.md