在单个任务中异步运行gulp方法

Question

var gulp = require('gulp');
var gutil = require('gulp-gutil');
var sass = require('gulp-sass');
var rename = ('gulp-rename');
gulp.task('test', function() {
function compileSass() {
return new Promise(function(resolve, reject) {
gulp.src('test.scss')
.pipe(sass())
.pipe(gulp.dest('.'))
.on('end', resolve());
});
}
compileSass().then(function(result) {
gulp.src('test.css')
.pipe(rename('testCopy.css'))
.pipe(gulp.dest('.'));
})
.catch(function(error) {
gutil.log(error);
});    
});

我所要做的就是异步运行这些gull.src方法，以便在下一个gull.sc方法复制test.css之前编译test.scss文件。我尝试过使用回调、promise(在本例中(和async/await，但我永远无法在新的运行中同时使用test.css和testCopy.css。我知道，如果我只是把这两个gull.src方法放在不同的任务中，我就会得到我想要的异步功能，但如果我不必每次修改/复制文件时都做一个新任务，这将非常有帮助。谢谢

Answer 1

var gulp = require('gulp');
var gutil = require('gulp-gutil');
var sass = require('gulp-sass');
var rename = ('gulp-rename');
gulp.task('test', function() {
function compileSass() {
return new Promise(function(resolve, reject) {
gulp.src('test.scss')
.pipe(sass())
.pipe(gulp.dest('.'))
.on('end', resolve); // changed resolve() to just resolve
});
}
compileSass().then(function(result) {
gulp.src('test.css')
.pipe(rename('testCopy.css'))
.pipe(gulp.dest('.'));
})
.catch(function(error) {
gutil.log(error);
});    
});

我设法找到了我的问题。。。我只需要将resolve((更改为resolve。老实说，我真的不确定为什么这样做有效，但现在有效了。如果你出于任何原因想使用resolve((，我试着把它放在一个同样有效的箭头函数中：

.on('end', () => resolve() );
// OR
.on('end', function() {
resolve();
});
// OR
.on('end', resolve);

编辑：我知道当开始学习这些东西时，异步的大便会让人困惑，所以这里有一个使用回调而不是promise的例子。

function compileSass(callback) {
gulp.src('test.scss')
.pipe(sass())
.pipe(gulp.dest('.'))
.on('end', callback);
}
compileSass(function() {
gulp.src('test.css')
.pipe(rename('testCopy.css'))
.pipe(gulp.dest('.'));
});

Answer 2

我不知道你是否有一个更复杂的管道计划，但这不仅仅适用于你：

gulp.task('test', function() {
return gulp.src('test.scss')
.pipe(sass())
.pipe(gulp.dest('.'))
.pipe(rename('testCopy.css'))
.pipe(gulp.dest('.'));
});

我错过了什么？