Làm thế nào để chạy các nhiệm vụ Gulp lần lượt

trong đoạn trích như thế này:

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"

Trong developnhiệm vụ tôi muốn chạy cleanvà sau khi hoàn thành, chạy coffeevà khi hoàn thành, hãy chạy một cái gì đó khác. Nhưng tôi không thể tìm ra điều đó. Phần này không hoạt động. Xin tư vấn.

Đây chưa phải là một bản phát hành chính thức, nhưng Gulp 4.0 sắp tới cho phép bạn dễ dàng thực hiện các tác vụ đồng bộ với gulp.series. Bạn có thể chỉ cần làm như thế này:

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

Tôi tìm thấy một bài đăng blog tốt giới thiệu cách nâng cấp và sử dụng các tính năng gọn gàng đó: di chuyển sang gulp 4 bằng ví dụ

Theo mặc định, gulp chạy các tác vụ đồng thời, trừ khi chúng có phụ thuộc rõ ràng. Điều này không hữu ích cho các nhiệm vụ như clean, nơi bạn không muốn phụ thuộc, nhưng bạn cần chúng để chạy trước mọi thứ khác.

Tôi đã viết các run-sequencePlugin đặc biệt để khắc phục vấn đề này với ngụm. Sau khi bạn cài đặt nó, sử dụng nó như thế này:

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

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

Bạn có thể đọc hướng dẫn đầy đủ trên gói README - nó cũng hỗ trợ chạy đồng thời một số bộ tác vụ.

Xin lưu ý, điều này sẽ được khắc phục (một cách hiệu quả) trong bản phát hành chính tiếp theo của gulp , vì chúng loại bỏ hoàn toàn thứ tự phụ thuộc tự động và cung cấp các công cụ tương tự run-sequenceđể cho phép bạn chỉ định thủ công chạy theo cách bạn muốn.

Tuy nhiên, đó là một thay đổi lớn, vì vậy không có lý do gì để chờ đợi khi bạn có thể sử dụng run-sequencengay hôm nay.

Giải pháp tốt duy nhất cho vấn đề này có thể được tìm thấy trong tài liệu gulp có thể tìm thấy ở đây

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

Tôi đã tạo một ứng dụng nút / gulp bằng trình tạo Yeoman của trình tạo-gulp-webapp . Nó xử lý "câu hỏi hóc búa" theo cách này (dịch sang các nhiệm vụ ban đầu được đề cập trong câu hỏi):

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

chuỗi chạy là cách rõ ràng nhất (ít nhất là cho đến khi Gulp 4.0 được phát hành)

Với chuỗi chạy , nhiệm vụ của bạn sẽ như thế này:

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

Nhưng nếu bạn (vì một số lý do) không thích sử dụng nó, gulp.startphương pháp sẽ giúp :

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

Lưu ý: Nếu bạn chỉ bắt đầu tác vụ mà không nghe kết quả, developtác vụ sẽ kết thúc sớm hơn coffeevà điều đó có thể gây nhầm lẫn.

Bạn cũng có thể loại bỏ trình nghe sự kiện khi không cần thiết

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

Hãy xem xét đó cũng là task_errsự kiện bạn có thể muốn nghe. task_stopđược kích hoạt khi kết thúc thành công, trong khi task_errxuất hiện khi có một số lỗi.

Bạn cũng có thể tự hỏi tại sao không có tài liệu chính thức cho gulp.start(). Câu trả lời này từ thành viên gulp giải thích những điều:

gulp.start không có giấy tờ về mục đích vì nó có thể dẫn đến các tệp xây dựng phức tạp và chúng tôi không muốn mọi người sử dụng nó

(nguồn: https://github.com/gulpjs/gulp/issues/426#issuecomment-41208007 )

Theo các tài liệu Gulp:

Các nhiệm vụ của bạn đang chạy trước khi các phụ thuộc hoàn thành? Đảm bảo rằng các tác vụ phụ thuộc của bạn được sử dụng chính xác bằng các gợi ý chạy async: thực hiện cuộc gọi lại hoặc trả lại lời hứa hoặc luồng sự kiện.

Để chạy chuỗi nhiệm vụ của bạn một cách đồng bộ:

1. Trả lại luồng sự kiện (ví dụ gulp.src) gulp.taskđể thông báo cho nhiệm vụ khi luồng kết thúc.
2. Khai báo các phụ thuộc nhiệm vụ trong đối số thứ hai của gulp.task.

Xem mã sửa đổi:

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"

Tôi đã có vấn đề chính xác như vậy và giải pháp hóa ra khá dễ dàng đối với tôi. Về cơ bản thay đổi mã của bạn để sau đây và nó sẽ hoạt động. LƯU Ý: sự trở lại trước khi gulp.src tạo ra sự khác biệt cho tôi.

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"

đã thử tất cả các giải pháp đề xuất, tất cả dường như có vấn đề của riêng họ.

Nếu bạn thực sự nhìn vào nguồn dàn nhạc, đặc biệt là việc .start()triển khai bạn sẽ thấy rằng nếu tham số cuối cùng là một hàm thì nó sẽ coi nó như một cuộc gọi lại.

Tôi đã viết đoạn trích này cho các nhiệm vụ của riêng tôi:

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

Tôi đã tìm kiếm câu trả lời này trong một thời gian. Bây giờ tôi đã nhận nó trong tài liệu chính thức.

Nếu bạn muốn thực hiện một nhiệm vụ gulp khi hoàn thành nhiệm vụ cuối cùng, bạn phải trả về một luồng:

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

Đơn giản chỉ cần coffeephụ thuộc cleanvà developphụ thuộc vào coffee:

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

Công văn bây giờ là nối tiếp: clean→ coffee→ develop. Lưu ý rằng cleanviệc triển khai và coffeethực hiện phải chấp nhận một cuộc gọi lại, "để động cơ biết khi nào nó sẽ được thực hiện" :

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

Tóm lại, bên dưới là mẫu gulp đơn giản cho đồng bộ cleantheo sau là phụ thuộc bản dựng không đồng bộ :

//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 đủ thông minh để chạy cleanchính xác một lần mỗi lần build, bất kể buildphụ thuộc vào bao nhiêu phụ thuộc clean. Như đã viết ở trên, cleanlà một rào cản đồng bộ hóa, sau đó tất cả các buildphụ thuộc của nó chạy song song, sau đó buildchạy.

Đối với tôi, nó không chạy tác vụ minify sau khi ghép vì nó mong đợi đầu vào được nối và nó không được tạo ra một số lần.

Tôi đã thử thêm vào một tác vụ mặc định theo thứ tự thực hiện và nó không hoạt động. Nó hoạt động sau khi thêm chỉ một returncho mỗi nhiệm vụ và nhận được sự thu nhỏ bên trong gulp.start()như bên dưới.

/**
* 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']); 

Nguồn http://schickling.me/synyncous-t task-gulp /

Gulp và Node sử dụng lời hứa .

Vì vậy, bạn có thể làm điều này:

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

Nếu bạn trả về luồng gulp, bạn có thể sử dụng then()phương thức để thêm một cuộc gọi lại. Thay phiên, bạn có thể sử dụng nguồn gốc của Node Promiseđể tạo lời hứa của riêng bạn. Ở đây tôi sử dụng Promise.all()để có một cuộc gọi lại kích hoạt khi tất cả các lời hứa được giải quyết.

Hãy thử bản hack này :-) Gulp v3.x Hack vì lỗi Async

Tôi đã thử tất cả các cách "chính thức" trong Readme, chúng không hiệu quả với tôi nhưng điều này đã làm. Bạn cũng có thể nâng cấp lên gulp 4.x nhưng tôi thực sự khuyên bạn không nên, nó phá vỡ quá nhiều thứ. Bạn có thể sử dụng một lời hứa js thực sự, nhưng này, nó nhanh, bẩn, đơn giản :-) Về cơ bản bạn sử dụng:

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

Kiểm tra bài!