时间戳

首页 > 解决方案 > 在单个任务中异步运行 gulp 方法

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

问题描述

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 文件。我尝试过使用回调、承诺（在本例中）和异步/等待，但我永远无法在新运行时将 test.css 和 testCopy.css 放在一起。我知道，如果我只是将这两个 gulp.src 方法放入单独的任务中，我将获得我正在寻找的异步功能，但如果我不必每次都创建一个新任务，那将非常有帮助想要修改/复制文件。谢谢！

标签： javascriptasynchronousgulpgulp-sass

解决方案

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

推荐阅读