【问题标题】:Gulp task orderGulp 任务顺序
【发布时间】:2015-01-27 20:41:26
【问题描述】:

我在执行几个 gulp 任务时遇到了一些问题。我已经尝试了一切并遵循了文档,但似乎没有任何效果。希望有人可以提供帮助。

我要做的是进行 sass 缩小,然后将结果同步到本地 vagrant 文件夹(不是远程服务器),然后重新加载浏览器同步。

我遇到的问题是我正在与 gulp 想要一起运行所有任务的事实作斗争。我需要它们一个接一个地发生。所有任务都是独立运行的,我只是无法让它们按顺序运行。我已经尝试过回调和依赖,但我显然错过了一些东西。

我的设置很复杂,我所有的任务都在单独的 js 文件中,但我尝试将我所拥有的内容合并到这个单一的 github gist 中,以便人们可以提供帮助。感谢您的帮助。

https://gist.github.com/CodeStalker/9661725dcaf105d2ed6c

我让它工作的唯一方法是将 rsync 管道到 sass 放大的末尾,并将其包装在 gulp-if 使用 server: true 变量中,因此它仅在知道它在 a 上运行时才执行 rsync虚拟机。不理想。

【问题讨论】:

    标签: gulp rsync


    【解决方案1】:

    这是人们使用 Gulp 时经常遇到的问题,尤其是来自 Grunt 时。 Gulp 最大程度地异步,它总是想同时做尽可能多的事情。

    让任务按顺序运行的第一步是让 gulp 知道您的任务何时结束,这可以通过几种不同的方式完成。

    1) 返回一个流,gulp 将等待流的“结束”事件作为该任务完成的触发器。示例:

    gulp.task( "stream-task", function(){
      return gulp.src( srcGlob )
        .pipe(sass())
        .pipe(compressCSS())
        .pipe(gulp.dest( destGlob ));
    });
    

    2) 返回一个 Promise,gulp 将等待 Promise 进入已解决状态,然后再发出任务完成的信号。示例:(不完美,只是为了理解这一点)

    gulp.task( "promise-task", function() {
      return new Promise(function(resolve, reject){
        fs.readFile( "filename", function( err, data ){
          if( err ){ return reject(err); }
          return resolve( data );
        });
      });
    });
    

    3) 调用任务回调,如果函数不返回任何内容,但函数签名接受一个参数,则该参数将是一个回调函数,您可以调用它来指示任务完成。示例:

    gulp.task( "cb-task", function( done ){
      fs.readFile( "filename", function( err, data ){
        // do stuff, call done...
        done();
      });
    });
    

    大多数情况下,您将返回示例 1 中的流,这是典型的 gulp 任务的样子。选项 2 和 3 更适用于您正在做的事情并非真正基于流的传统 gulp 任务。

    接下来的事情是设置一个任务对另一个任务的“依赖关系”。 gulp 文档将其显示为您这样做的方式:

    gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });
    

    现在我不知道当前状态,但是这些依赖任务没有按正确的顺序运行存在一些问题。这最初是由 gulp 的依赖项之一(我相信协调器)的问题引起的。 NPM 领域的一位好心人制作了一个不错的小包,以便在解决错误时临时使用。我开始用它来安排我的任务并且没有回头。

    https://www.npmjs.com/package/run-sequence

    文档很好,所以我不会在这里详细介绍。基本上run-sequence 让您明确订购 gulp 任务,请记住,如果您没有为每个任务实现上述三个选项之一,它就不起作用。

    查看您的要点,在您的任务中添加一些缺少的返回语句可能会起到作用,但作为示例,这就是我的“开发”任务在我的工作项目中的样子......

    gulp.task( "dev", function( done ){
      runSequence(
        "build:dev",
        "build:tests",
        "server:dev",
        [
          "less:watch",
          "jscs:watch",
          "lint:watch",
          "traceur:watch"
        ],
        "jscs:dev",
        "lint:dev",
        "tdd",
        done // <-- thats the callback method to gulp let know when this task ends
      );
    });
    

    作为参考,我的“build:dev”任务是run-sequence的另一种用法

    gulp.task( "build:dev", function( done ){
      runSequence(
        "clean:dev",
        [
          "less:dev",
          "symlink:dev",
          "vendor:dev",
          "traceur:dev"
        ],
        done // <-- thats the callback method to let know when this task ends
      );
    });
    

    如果需要运行任务以将任务名称作为自己的参数添加到runSequence,如果它们不冲突,则将它们作为数组发送以使任务同时运行并加快您的构建过程。

    关于监视任务的注意事项!通常监视任务无限期地运行,因此试图从它们返回“无限”流可能会让 gulp 认为任务永远不会结束。在这种情况下,我将使用回调方法让 gulp 认为任务已完成,即使它仍在运行,类似于...

    gulp.task( "watch-stuff", function( done ){
      gulp.watch( watchGlob )
        .on( "change", function( event ){ /* process file */ });
    
      done();
    });
    

    有关监视任务以及我如何进行增量构建的更多信息,请查看我前几天写的答案Incremental gulp less build

    【讨论】:

    • 感谢您的冗长回复。在发布问题之前我已经尝试过其中的一些,但是当我将丢失的“返回”添加到流中时,流中断了。我也尝试过运行序列,但没有运气,可能是因为我似乎无法让它意识到流何时结束。
    • 我让它工作的唯一方法是将 rsync 管道到 sass 放大倍率的末尾,并将其包装在 gulp-if 使用 server: true 变量中,因此它只执行 rsync 如果它知道它在虚拟机上运行。不理想。也许我会剥离一些东西,仔细重建,看看我是否能弄清楚为什么流在添加 return 时会中断。
    • 您似乎正在使用 rsync 同步到本地虚拟机,对吗? Vagrant 的 synced_folder 设置对你不起作用有什么原因吗?
    • 是的 - 这对我来说很好,但可能不适合其他人。这个 gulp 设置是我构建的框架的一部分。我想允许使用任何本地或远程开发设置,而不仅仅是 vagrant。我是 Midas midas.jamessteel.co.uk 的作者,如果我可以让它工作,我正在尝试使用这个 rsync 功能,但我正在学习 Gulp。 Midas 可以在 github 上找到,如果你对如何改进 gulp 设置有任何想法,请随时四处寻找。 :) 我正在使用同步的 vagrant 文件夹,但想保留 node_modules 和所有内容,所以我只复制 CSS 和 JS 以及字体。
    • 那太棒了!当我找到时间时,我会四处逛逛。
    【解决方案2】:

    给你,我相信它现在应该可以工作了。如果不让我知道,我可能打错了。 Your gist fixed

    我认为您正在点击(我没有足够的声誉点来发布链接,google 问题 #96),它已在 4.x 中修复,但尚未发布 :-)。也就是说,看看这个黑客:My post about Gulp v3.x bug

    【讨论】:

      猜你喜欢
      • 2015-02-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-11
      • 1970-01-01
      • 1970-01-01
      • 2015-06-01
      • 1970-01-01
      相关资源
      最近更新 更多