Gulp 任务未同步运行

Question

我正在尝试通过 bower 安装软件包，安装完成后，我希望将文件从 dist 文件夹移动到其父文件夹，然后删除 dist 文件夹。但不知何故，它无法正常工作。

var gulp = require('gulp'),
    bower = require('gulp-bower'),
    del = require('del'),
    fs = require('fs'),
    path = require('path'),
    merge = require('merge-stream');
    vinylPaths = require('vinyl-paths');
    runSequence = require('run-sequence');

var appPath="./www";
var folders = getFolders(appPath);

/* Function to get folders present in www */
function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('clean', function (){
    var tasks = folders.map(function(folder) {
       return gulp.src(path.join(appPath, folder))
            .pipe(vinylPaths(del))
    });
});

/* Gulp task to run bower install */
gulp.task('bower', ['clean'], function() {
    return bower({cmd: "install"});

});

/* Gulp task to copy files from dist folder to their parent folders */
gulp.task('moveFiles', ['bower'], function (){
    var tasks = folders.map(function(folder) {
        console.log("FOLDER", folder);
        return gulp.src(path.join(appPath, folder, '/dist/**/*'))
            .pipe(gulp.dest(path.join(appPath, folder )));

    });
    return tasks;
});

/* Gulp task to clean the dist folder after files have been copied  */
gulp.task('delete-dist-folder', ['moveFiles'], function () {
    var tasks = folders.map(function(folder) {
           return gulp.src(path.join(appPath, folder, '/dist'))
                .pipe(vinylPaths(del))
    });
    return tasks;
});

gulp.task('default', ['delete-dist-folder']);

这是我写到现在的。 凉亭之后，其余两个任务不运行。但如果我单独运行它们，它们就可以正常工作。

我无法弄清楚这里出了什么问题。任何帮助将不胜感激。

Answer 1

问题在于您返回数组 事件流。查看您的delete-dist-folder 任务。你 return tasks 和 tasks 是通过在数组上调用 .map 创建的。所以tasks 是一个（事件流的）数组。

Gulp 不知道如何处理您的数组，并假设您的任务是同步的。只有 3 种方法可以将任务标记为异步：1）返回偶数流； Gulp 将等待流结束，2）返回一个承诺； Gulp 将等待 promise 被解决或拒绝，或者 3) 声明你的任务回调接受一个参数，当你的任务完成时你将调用该参数； Gulp 将等待回调被调用。事件流数组与这些选项中的任何一个都不对应。

Gulp wiki suggest using merge-stream 从一个任务返回多个流。从merge-stream的代码来看，假设你将merge-stream导入为merge，你可以做到return merge.apply(undefined, tasks)。

侧节点：在您的 clean 任务中，您忘记返回一个值。

Answer 2

不久前我在嵌套任务时遇到了类似的问题（需要在另一个任务中执行一项任务）。所以为了解决这个问题并按顺序运行任务，我使用了run-sequence。

您似乎已经安装了run-sequence。以这种方式使用它：

runSequence = require('run-sequence');

    gulp.task('default', function(callback) {
      runSequence('clean', 'bower', 'moveFiles', 'delete-dist-folder',
                 callback);
    });

希望这对您有所帮助。您可以参考this 寻求任何帮助。 在gulp 4.0 之前，这是一个临时解决方案，其中包括配置您的任务并行或顺序运行的选项。