如何依次依次运行Gulp任务

2020/09/28 20:41 · javascript ·  · 0评论

在如下代码段中:

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执行其他操作。但是我无法弄清楚。这件作品不起作用。请指教。

它不是正式版本,但是即将推出的Gulp 4.0使您可以轻松地使用gulp.series进行同步任务。您可以像这样简单地做到这一点:

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

我找到了一篇不错的博客文章,其中介绍了如何升级和使用这些简洁功能:
通过示例迁移到gulp 4

默认情况下,gulp会同时运行任务,除非它们具有明确的依赖性。对于clean您不想依赖的任务(例如)这不是很有用,但是您需要它们在其他所有任务之前运行。

专门编写run-sequence插件来解决gulp的问题。安装后,按以下方式使用它:

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

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

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

请注意,这将在gulp的下一个主要版本中(有效)修复,因为它们完全消除了自动依赖性排序,并提供了类似于run-sequence允许您手动指定运行顺序的工具

但是,这是一个重大的重大变化,因此没有理由等待run-sequence今天可以使用

可以在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']);

我使用generator-gulp-webapp Yeoman生成器生成了一个node / gulp应用程序它以这种方式处理“干净的难题”(转化为问题中提到的原始任务):

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

运行顺序是最清晰的方法(至少在Gulp 4.0发布之前)

使用run-sequence,您的任务将如下所示:

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

根据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"

我遇到了完全相同的问题,对我来说解决方案非常容易。基本上将您的代码更改为以下代码,它应该可以工作。注意: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"

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

如果您实际查看Orchestrator的源代码,尤其是.start()实现,您将看到,如果最后一个参数是一个函数,它将把它视为回调。

我为自己的任务编写了以下代码段:

  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" ));

我一直在寻找这个答案一段时间。现在,我在正式的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));
});

只需使coffee依赖clean,并develop依赖coffee

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

派遣是现在串口:clean→交通coffee→交通develop请注意,clean的实现和coffee的实现必须接受回调,“以便引擎知道何时完成”

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足够聪明,可以clean每次精确地运行一次build,无论build依赖于多少依赖项clean如上所述,它clean是一个同步屏障,然后所有build的依赖项并行运行,然后build运行。

对我来说,它没有在连接后运行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/

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()了一个在所有promise都解决时触发的回调。

试试这个技巧:-)
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

查看帖子!

本文地址:http://javascript.askforanswer.com/ruheyiciyiciyunxinggulprenwu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!