javascript Gulp watch - 按顺序执行任务（同步）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22082641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gulp watch - execute tasks in order (synchronous)
提问by Lee
I have a series of tasks to be run from a watcher but I can get them to fire in order:
我有一系列任务要从观察者那里运行，但我可以让它们按顺序启动：
Here is the gulp tasks and watcher.
这是 gulp 任务和观察者。
gulp.task('app_scss', function(){
return gulp.src(appScssDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_vendor_css', function(){
return gulp.src(appProviderCssDir + '/*.css')
.pipe(minifyCSS({ keepSpecialComments: 0 }))
.pipe(concat('app_vendor.css'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_build_css', function(){
return gulp.src(appBuilderDir + '/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest(targetCssDir));
});
gulp.task('watch', function () {
gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});
gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);
So when I update a scss file it should compile them create a single css file. Then the build task concats the file with the vendor files. But every time I save a file its always one step behind. See the video as an example: http://screencast.com/t/065gfTrY
所以当我更新一个 scss 文件时，它应该编译它们创建一个单独的 css 文件。然后构建任务将文件与供应商文件连接起来。但每次我保存文件时，它总是落后一步。以视频为例：http: //screencast.com/t/065gfTrY
I have renamed the tasks, changed the order in the watch callback etc.
我重命名了任务，更改了手表回调中的顺序等。
Am I making a obvious mistake?
我犯了一个明显的错误吗？
回答by vsync
With GULP 3 I use run-sequencepackage to help run tasks in sequence and not in parallel. This is how I configure my watchtasks, for example:
在 GULP 3 中，我使用run-sequence包来帮助按顺序而不是并行运行任务。这就是我配置watch任务的方式，例如：
var gulp = require('gulp'),
runSequence = require('run-sequence');
gulp.task('watch', function() {
gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});
The above example shows a typical watchtask which will hook the gulp.watchmethod with files which to be listened when changed, and with a callback function to run when change was detected. The runSequencefunction is then called (within the callback of of a certain watch) with a list of tasks to run in a synchronous manner, unlike the default way which runs tasks in parallel.
上面的例子展示了一个典型的watch任务，它会将gulp.watch方法与更改时要侦听的文件挂钩，并在检测到更改时运行回调函数。runSequence然后调用该函数（在某个 的回调中watch），其中包含以同步方式运行的任务列表，这与并行运行任务的默认方式不同。
回答by AntouanK
Gulp starts all tasks at the 'same' time, unless you declare dependencies ( or make streams pipe one to the other ).
Gulp 在“同一”时间启动所有任务，除非您声明依赖项（或使流通过管道连接到另一个）。
So for example, if you want task app_build_cssto wait for tasks app_scssand app_vendor_cssto complete, declare the dependencies,
因此，例如，如果您希望任务app_build_css等待任务app_scss并app_vendor_css完成，请声明依赖项，
gulp.task('app_scss', function(){
return gulp.src(appScssDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_vendor_css', function(){
return gulp.src(appProviderCssDir + '/*.css')
.pipe(minifyCSS({ keepSpecialComments: 0 }))
.pipe(concat('app_vendor.css'))
.pipe(gulp.dest(appBuilderDir));
});
gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
return gulp.src(appBuilderDir + '/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest(targetCssDir));
});
gulp.task('watch', function () {
gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});
gulp.task('default', ['app_build_clean', 'app_build_css', 'watch']);
Check the Gulp.task() docs
回答by CTS_AE
Gulp v4
吞咽 v4
Now that Gulp v4 has been out for nearly over a year (released at the end of 2017) it offers some great ways to sequence tasks using their library called bach.
现在 Gulp v4 已经发布将近一年多（于 2017 年底发布），它提供了一些使用名为 bach 的库对任务进行排序的好方法。
https://github.com/gulpjs/bach
https://github.com/gulpjs/bach
Note: I would recommend moving to Gulp v4 since v3 had some security vulnerabilities [I'm not sure if those have been patched now].
注意：我建议改用 Gulp v4，因为 v3 有一些安全漏洞 [我不确定现在是否已修补]。
Quick Example
快速示例
Gulp v4 introduces gulp.seriesand gulp.parallel, this allows you to create tasks and choose which run in series, parallel, or mixed as shown below.
Gulp v4 引入了gulp.series和gulp.parallel，这允许您创建任务并选择串行、并行或混合运行，如下所示。
Explanation: This will run the scssand jstasks in parallel, once those are complete it will then run the watchtask because they're in series.
说明：这将并行运行scss和js任务，一旦完成，它将运行任务，因为它们是串联的。watch
const defaultTasks = gulp.series(
gulp.parallel(scss, js),
watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';
module.exports = {
default: defaultTasks,
scss,
js
}
Extended Example
扩展示例
Here's a stripped down example of what my gulp file may look like.
这是我的 gulp 文件外观的精简示例。
const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');
const paths = {
scss: [
'public/stylesheets/*.scss'
],
js: [
'public/js/*.js'
]
};
const scss = () => {
return gulp.src(paths.scss)
.pipe(gulpScss)
.pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';
const js = () => {
return gulp.src(paths.js)
.pipe(gulpBabel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';
const watch = () => {
gulp.watch(paths.scss, scss);
gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';
const defaultTasks = gulp.series(
gulp.parallel(scss, js),
watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';
module.exports = {
default: defaultTasks,
scss,
js
}
