如何一个接一个地依次运行 Gulp 任务

Question

在sn-p中是这样的：

gulp.task "coffee", ->
    gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean",->
    gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

在develop 任务中，我想运行clean，完成后，运行coffee，完成后，运行其他内容。但我无法弄清楚。这块不行。请指教。

Answer 1

默认情况下，gulp 会同时运行任务，除非它们有明确的依赖关系。这对于像 clean 这样的任务不是很有用，您不想依赖这些任务，但您需要它们在其他所有事情之前运行。

我写了the run-sequence plugin 专门用 gulp 解决这个问题。安装后，像这样使用它：

var runSequence = require('run-sequence');

gulp.task('develop', function(done) {
    runSequence('clean', 'coffee', function() {
        console.log('Run something else');
        done();
    });
});

您可以阅读软件包 README 中的完整说明——它还支持同时运行一些任务集。

请注意，这将是 (effectively) fixed in the next major release of gulp，因为它们完全消除了自动依赖排序，并提供类似于 run-sequence 的工具，允许您手动指定所需的运行顺序。

但是，这是一个重大的重大变化，所以没有理由等待您今天可以使用 run-sequence。

Answer 2

在 gulp 文档中可以找到解决这个问题的唯一好方法：

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
  // do stuff -- async or otherwise
  cb(err); // if err is not null and not undefined, the orchestration will stop, and 'two' will not run
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
  // task 'one' is done now
});

gulp.task('default', ['one', 'two']);
// alternatively: gulp.task('default', ['two']);

Answer 3

它还不是正式版本，但即将推出的 Gulp 4.0 让您可以轻松地使用 gulp.series 执行同步任务。你可以这样做：

gulp.task('develop', gulp.series('clean', 'coffee'))

我找到了一篇很好的博客文章，介绍了如何升级和使用这些简洁的功能： migrating to gulp 4 by example

Answer 4

我使用generator-gulp-webapp Yeoman 生成器生成了一个节点/gulp 应用程序。它以这种方式处理“干净的难题”（转换为问题中提到的原始任务）：

gulp.task('develop', ['clean'], function () {
  gulp.start('coffee');
});

Answer 5

run-sequence 是最清晰的方式（至少在 Gulp 4.0 发布之前）

使用运行序列，您的任务将如下所示：

var sequence = require('run-sequence');
/* ... */
gulp.task('develop', function (done) {
    sequence('clean', 'coffee', done);
});

但如果你（出于某种原因）不想使用它，gulp.start 方法会有所帮助：

gulp.task('develop', ['clean'], function (done) {
    gulp.on('task_stop', function (event) {
        if (event.task === 'coffee') {
            done();
        }
    });
    gulp.start('coffee');
});

注意： 如果你只开始任务而不听结果，develop 任务将比coffee 早完成，这可能会造成混淆。

您也可以在不需要时移除事件监听器

gulp.task('develop', ['clean'], function (done) {
    function onFinish(event) {
        if (event.task === 'coffee') {
            gulp.removeListener('task_stop', onFinish);
            done();
        }
    }
    gulp.on('task_stop', onFinish);
    gulp.start('coffee');
});

考虑还有task_err 事件你可能想听。 task_stop在成功完成时触发，而task_err在出现错误时出现。

您可能还想知道为什么没有gulp.start() 的官方文档。 gulp 成员的这个答案解释了事情：

gulp.start 故意没有记录，因为它会导致复杂的构建文件，我们不希望人们使用它

（来源：https://github.com/gulpjs/gulp/issues/426#issuecomment-41208007）

Answer 6

根据 Gulp 文档：

您的任务是否在依赖项完成之前运行？确保您的依赖任务正确使用异步运行提示：接受回调或返回承诺或事件流。

同步运行您的任务序列：

1. 将事件流（如gulp.src）返回给gulp.task通知 流何时结束的任务。
2. 在gulp.task的第二个参数中声明任务依赖。

查看修改后的代码：

gulp.task "coffee", ->
    return gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean", ['coffee'], ->
      return gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

Answer 7

我遇到了同样的问题，结果对我来说解决方案非常简单。基本上将您的代码更改为以下内容，它应该可以工作。注意：gulp.src 之前的返回对我来说意义重大。

gulp.task "coffee", ->
    return gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean",->
    return gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

Answer 8

尝试了所有建议的解决方案，似乎都有自己的问题。

如果您真正查看 Orchestrator 源代码，尤其是 .start() 实现，您会发现如果最后一个参数是一个函数，它会将其视为回调。

我为自己的任务编写了这个 sn-p：

  gulp.task( 'task1', () => console.log(a) )
  gulp.task( 'task2', () => console.log(a) )
  gulp.task( 'task3', () => console.log(a) )
  gulp.task( 'task4', () => console.log(a) )
  gulp.task( 'task5', () => console.log(a) )

  function runSequential( tasks ) {
    if( !tasks || tasks.length <= 0 ) return;

    const task = tasks[0];
    gulp.start( task, () => {
        console.log( `${task} finished` );
        runSequential( tasks.slice(1) );
    } );
  }
  gulp.task( "run-all", () => runSequential([ "task1", "task2", "task3", "task4", "task5" ));

Answer 9

我一直在寻找这个答案。现在我在官方 gulp 文档中得到了它。

如果你想在最后一个完成后执行 gulp 任务，你必须返回一个流：

gulp.task('wiredep', ['dev-jade'], function () {
    var stream = gulp.src(paths.output + '*.html')
        .pipe($.wiredep())
        .pipe(gulp.dest(paths.output));

    return stream; // execute next task when this is completed
});

// First will execute and complete wiredep task
gulp.task('prod-jade', ['wiredep'], function() {
    gulp.src(paths.output + '**/*.html')
        .pipe($.minifyHtml())
        .pipe(gulp.dest(paths.output));
});

Answer 10

只需让coffee 依赖于clean，而develop 依赖于coffee：

gulp.task('coffee', ['clean'], function(){...});
gulp.task('develop', ['coffee'], function(){...});

Dispatch 现在是串行的：clean → coffee → develop。注意clean 的实现和coffee 的实现必须接受回调，"so the engine knows when it'll be done"：

gulp.task('clean', function(callback){
  del(['dist/*'], callback);
});

总之，下面是一个简单的 gulp 模式，用于同步 clean 后跟异步构建依赖项：

//build sub-tasks
gulp.task('bar', ['clean'], function(){...});
gulp.task('foo', ['clean'], function(){...});
gulp.task('baz', ['clean'], function(){...});
...

//main build task
gulp.task('build', ['foo', 'baz', 'bar', ...], function(){...})

Gulp 足够聪明，可以在每个 build 运行一次 clean，无论 build 的依赖项中有多少依赖于 clean。如上所述，clean 是一个同步屏障，那么build 的所有依赖项并行运行，然后build 运行。

Answer 11

对我来说，它在连接后没有运行 minify 任务，因为它需要连接输入并且有时没有生成。

我尝试按执行顺序添加到默认任务，但没有成功。在为每个任务添加一个return 并在gulp.start() 中进行缩小后，它就起作用了，如下所示。

/**
* Concatenate JavaScripts
*/
gulp.task('concat-js', function(){
    return gulp.src([
        'js/jquery.js',
        'js/jquery-ui.js',
        'js/bootstrap.js',
        'js/jquery.onepage-scroll.js',
        'js/script.js'])
    .pipe(maps.init())
    .pipe(concat('ux.js'))
    .pipe(maps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

/**
* Minify JavaScript
*/
gulp.task('minify-js', function(){
    return gulp.src('dist/js/ux.js')
    .pipe(uglify())
    .pipe(rename('ux.min.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('concat', ['concat-js'], function(){
   gulp.start('minify-js');
});

gulp.task('default',['concat']); 

来源http://schickling.me/synchronous-tasks-gulp/

Answer 12

Gulp 和 Node 使用 promises。

所以你可以这样做：

// ... require gulp, del, etc

function cleanTask() {
  return del('./dist/');
}

function bundleVendorsTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

function bundleAppTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

function tarTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

gulp.task('deploy', function deployTask() {
  // 1. Run the clean task
  cleanTask().then(function () {
    // 2. Clean is complete. Now run two tasks in parallel
    Promise.all([
      bundleVendorsTask(),
      bundleAppTask()
    ]).then(function () {
      // 3. Two tasks are complete, now run the final task.
      tarTask();
    });
  });
});

如果返回 gulp 流，可以使用 then() 方法添加回调。或者，您可以使用 Node 的原生 Promise 创建自己的 Promise。在这里，我使用Promise.all() 来设置一个回调，当所有承诺都解决时触发。

Answer 13

要等着看任务是否完成然后剩下的，我是这样处理的：

gulp.task('default',
  gulp.series('set_env', gulp.parallel('build_scss', 'minify_js', 'minify_ts', 'minify_html', 'browser_sync_func', 'watch'),
    function () {
    }));

荣誉：https://fettblog.eu/gulp-4-parallel-and-series/

Answer 14

我发现一个接一个地执行任务的非常简单有效的解决方案（当一个任务完成时，将启动第二个任务）（仅提供一个示例）是：
gulp.task('watch', () =>
gulp.watch(['src/**/*.css', 'src/**/*.pcss'], gulp.series('build',['copy'])) );
这意味着当您需要在second-task 之前运行first-task 时，您需要在方括号中编写第二个任务（在这种情况下为copy）。
注意
任务外部应该有圆括号（直到您希望它们同时发生）

Answer 15

试试这个技巧 :-) Gulp v3.x Hack for Async bug

我尝试了自述文件中的所有“官方”方法，它们对我不起作用，但确实如此。您也可以升级到 gulp 4.x，但我强烈建议您不要升级，它会破坏很多东西。你可以使用真正的 js 承诺，但是，这很快，很脏，很简单 :-) 基本上你使用：

var wait = 0; // flag to signal thread that task is done
if(wait == 0) setTimeout(... // sleep and let nodejs schedule other threads

查看帖子！