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等插件。我想弄清楚的是，在minify完成后如何（如果可能的话）运行一段代码处理所有文件并且它成功运行。 gulp可以这样吗？

Answer 1

您可以创建一个取决于html-minify的任务：

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

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

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

使用依赖项任务：

int

尽管主任务在所有相关任务之后开始，但它们（相关任务）将并行运行（全部一次），所以请不要假定任务将按顺序启动/完成（ md和js在qr之前并行运行）。

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

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

GULP V4

在gulp 4中，旧的依赖模式已删除，您将收到此错误：

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.parallel和gulp.series（它们可以正确执行任务）：

AssertionError [ERR_ASSERTION]: Task function must be specified

有关更多详细信息，请访问https://github.com/gulpjs/gulp/blob/4.0/docs/API.md

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

3 个答案:

GULP V3

GULP V4