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

我想做的就是运行这些 gulp.src 异步方法，这样 test.scss 文件将在 test.css 被下一个 [复制之前编译] =17=]方法。我试过使用回调、承诺（在本例中）和 async/await，但我永远无法在新的运行上同时获得 test.css 和 testCopy.css。我明白，如果我只是将这两个 gulp.src 方法放入单独的任务中，我会得到我正在寻找的异步功能，但如果我不必每次都创建一个新任务，那将非常有帮助一次我要modify/copy一个文件。谢谢！

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

编辑：我知道在开始学习这些东西时异步狗屎会让人感到困惑，所以这里有一个使用回调而不是承诺的例子。

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 个异步任务中的方法

Run gulp methods inside a single task asynchronously

javascript

asynchronous

gulp

gulp-sass