node.js 在对所有文件完成 gulp 任务后运行代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24600052/
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
Run code after gulp task done with all files
提问by ryanzec
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.
所以我一直在尝试 Gulp，看看它在速度方面与 Grunt 相比如何，结果给我留下了非常深刻的印象，但我有一件事情我不知道如何在 Gulp 中做。
So I have this gulp task to minify HTML:
所以我有这个 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));
});
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?
buildMetaData 对象具有我需要的自定义功能以及为什么我不能使用像 gulp-changed 这样的插件。我想弄清楚的是如何（如果可能的话）在 minify 完成处理所有文件并成功运行后运行代码块。gulp 可以实现这样的事情吗？
回答by Ben
You could just make a task which depends on html-minify:
你可以做一个依赖于的任务html-minify：
gulp.task('other-task', ['html-minify'], function() {
//stuff
});
You could also listen for the stream endevent inside the html-minifytask:
您还可以侦听任务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);
});
});
回答by Rimian
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:
您还可以使用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() { });
});
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):
除了标准任务之前，您还可以等待上一个任务完成。当您需要将参数传递给 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);
回答by Ali
GULP V3
吞咽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).
虽然主任务在所有依赖任务之后启动，但它们（依赖任务）将并行运行（一次全部），所以不要假设任务将按顺序启动/完成（md 和 js 在 qr 之前并行运行）。
If you want exact order for several tasks and don't want to split them you can use async & await to achieve this:
如果您想要几个任务的确切顺序并且不想拆分它们，您可以使用 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
吞咽V4
in gulp 4 the old dependency pattern is removed and you will get this error:
在 gulp 4 中，旧的依赖模式被删除，你会得到这个错误：
AssertionError [ERR_ASSERTION]: Task function must be specified
instead you must use gulp.parallel and gulp.series (which provides correct execution of tasks):
相反，您必须使用 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();
}));
for more detail visit https://github.com/gulpjs/gulp/blob/4.0/docs/API.md
有关更多详细信息，请访问https://github.com/gulpjs/gulp/blob/4.0/docs/API.md
