如何按顺序运行 gulp 任务？答案

【问题标题】：how to run gulp tasks in order?如何按顺序运行 gulp 任务？
【发布时间】：2017-11-03 01:31:23
【问题描述】：

我正在尝试通过运行任务将所有 css 文件合并到一个已发布的 css 文件中：

gulp.task('task one', () => {  
    gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));
});

之后，因为输出的css文件中的字体路径不正确，所以需要修改路径。

gulp.task('task two', () => {
    var urlAdjuster = require('gulp-css-url-adjuster');

    //change font path for released css files
    gulp.src([releasePath + "/*.css"])
        .pipe(urlAdjuster({
            replace: ['../../fonts', '../fonts'],
        }))
        .pipe(gulp.dest(releasePath + "/"));
);

为了实现它，我需要一个一个地分别运行这两个任务。我怎样才能按顺序运行这两个任务并将它们放在一个任务中。

我尝试过： series = require('gulp-series'); ----不工作

gulp.task('task two', ['task one'], function () {
    // Gulp. src (...
});

-----不工作

---更新------------------------------------------- ------------- 我使用了 return 但它现在正在工作。实际代码是：

function procHTMLForRelease(stream, file) {
    gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));

}

function processRelease() {


    // Grab all html files in the folder.
    // Loop over them, process them, then spit em out.
    gulp.src([paths.Source + "/*.html"])
        .pipe(foreach(procHTMLForRelease))
        .pipe(gulp.dest(paths.Release));

    // Process image files
    gulp.src([paths.Source + "images/*.*"])
        .pipe(gulp.dest(paths.Release + "images/"));

    // Copy font files
    gulp.src([paths.html + "fonts/*.*", paths.html + "fonts/*/*.*"])
        .pipe(gulp.dest(paths.release + "/fonts/"));


}  



gulp.task('task one', () => { return processRelease();
});

【问题讨论】：

你原来的代码和更新的完全不一样，怎么回事？

标签： gulp gulp-concat gulp-task

【解决方案1】：

gulp.task('task two', ['task one'], function () {
    // gulp.src( ...
});

这是正确的，它将task one 设置为task two 的依赖项。但是，要使其正常工作，task one 需要 return。

gulp.task('task one', () => {  
    return gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));
});

【讨论】：

@lofihelsinki 我用过“return”，但它并没有真正起作用，请参阅我的更新
您必须将每个gulp.src 放入它自己的任务中并返回gulp.src，就像我的回答一样。如果您只是在gulp.src 前面添加return，您的原始示例应该可以工作。您的更新示例没有任何依赖项，因此它不起作用。

【解决方案2】：

您可以像这样修改更新后的代码，使其成为return。

gulp.task('taks one', function () {

    // Grab all html files in the folder.
    // Loop over them, process them, then spit em out.
    var one = gulp.src([paths.Source + "/*.html"])
        .pipe(foreach(procHTMLForRelease))
        .pipe(gulp.dest(paths.Release));

    // Process image files
    var two = gulp.src([paths.Source + "images/*.*"])
        .pipe(gulp.dest(paths.Release + "images/"));

    // Copy font files
    var three = gulp.src([paths.html + "fonts/*.*", paths.html + "fonts/*/*.*"])
        .pipe(gulp.dest(paths.release + "/fonts/"));

   // Return
   return [ one, two, three];

});

函数内的任务将异步运行，但您可以创建另一个函数来依赖所有正在完成的任务。

gulp.task('task two', ['task one'], function () {
    // Gulp. src (...
});

【讨论】：

【解决方案3】：

对于遇到相同问题并正在寻找解决方案的任何人：这是我要解决的问题： https://www.npmjs.com/package/run-sequence

例如：

// This will run in this order:
// * build-clean
// * build-scripts and build-styles in parallel
// * build-html
// * Finally call the callback function
gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

【讨论】：