如何同步运行 gulp.watch 多个任务？答案

【问题标题】：How to run gulp.watch multiple tasks synchronized?如何同步运行 gulp.watch 多个任务？
【发布时间】：2016-12-11 01:13:04
【问题描述】：

例如，下面的代码将异步运行任务，但我希望它们一个接一个地运行。所以“concat”应该先完成，然后运行“autoprefix”，然后运行“minify”。

gulp.task("watch", function ()
{
	gulp.watch("*.css", ["concat", "autoprefix", "minify"]);
});

在此示例中，我想连接我的 css 文件，然后自动添加前缀属性，然后缩小连接的文件。

但这会同时运行所有任务。

这意味着我的缩小文件（这是我想在我的 html 中使用的文件）不是最新的，因为该文件在“自动前缀”任务完成之前被缩小了。

那么如何让它们一个接一个地同步运行呢？

【问题讨论】：

How to run Gulp tasks sequentially one after the other的可能重复

标签： gulp gulp-watch

【解决方案1】：

Gulp 4.0（目前为 3.9.1）能够按顺序/系列运行任务。

https://github.com/gulpjs/gulp/blob/4.0/docs/API.md#gulpseriestasks

目前，您可以使用 run-sequence 包。

https://www.npmjs.com/package/run-sequence

【讨论】：

【解决方案2】：

只需安装npm install gulp-sequence --save-save。

const gulpSequence = require('gulp-sequence');

gulp.task("watch", function (){
gulp.watch("*.css", gulpSequence("concat", "autoprefix", "minify"));});

命令gulp watch

注意：您必须包含其他类似的 gulp。

【讨论】：

【解决方案3】：

自 Gulp 4 发布以来，本机支持此功能，无需任何依赖。我看到了一个文档链接，但不是非常简单的语法：

gulp.task("watch", function ()
{
    gulp.watch("*.css", gulp.series( concat, autoprefix, minify ) );
});

【讨论】：