如何按顺序运行 GULP 任务

Question

我正在尝试通过运行任务将所有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 (...
});

-----不起作用

---更新--------------------------------------------------------我用过退货，但现在它正在工作。实际代码为：

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

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

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

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