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);
    });    
});

我要做的就是异步运行这些gulp.src方法，以便在test.css被下一个gulp.src方法复制之前，将编译test.scss文件。我已经尝试过使用回调，promise（在此示例中）和async / await，但是我永远无法在全新运行时一起获得test.css和testCopy.css。我知道，如果仅将这两个gulp.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（），我都尝试将其放在箭头函数中，该函数同样有效：

.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('.'));
});

我想念什么？

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

2 个答案: