Como executar tarefas Gulp sequencialmente, uma após a outra

no trecho como este:

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"

Na developtarefa que quero executar, cleane depois que estiver pronto, execute coffeee, quando terminar, execute outra coisa. Mas não consigo descobrir isso. Esta peça não funciona. Por favor informar.

Ainda não é um lançamento oficial, mas o Gulp 4.0 a seguir permite executar tarefas síncronas com facilidade com o gulp.series. Você pode simplesmente fazer assim:

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

Encontrei um bom post sobre como atualizar e fazer uso desses recursos legais: migrando para o gulp 4 por exemplo

Por padrão, o gulp executa tarefas simultaneamente, a menos que tenham dependências explícitas. Isso não é muito útil para tarefas como clean, nas quais você não deseja depender, mas precisa que elas sejam executadas antes de tudo.

Eu escrevi o run-sequenceplugin especificamente para corrigir esse problema com o gulp. Depois de instalá-lo, use-o assim:

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

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

Você pode ler as instruções completas no pacote README - ele também suporta a execução de alguns conjuntos de tarefas simultaneamente.

Observe que isso será (efetivamente) corrigido na próxima versão principal do gulp , pois eles eliminam completamente a ordem automática de dependência e fornecem ferramentas semelhantes arun-sequence para permitir que você especifique manualmente a ordem de execução como desejar.

No entanto, essa é uma grande mudança, por isso não há razão para esperar quando você pode usar run-sequencehoje.

A única boa solução para esse problema pode ser encontrada na documentação do gulp, que pode ser encontrada aqui

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

Eu criei um aplicativo node / gulp usando o gerador Yeoman do generator-gulp-webapp . Ele lidou com o "enigma limpo" dessa maneira (traduzindo para as tarefas originais mencionadas na pergunta):

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

A sequência de execução é a maneira mais clara (pelo menos até o Gulp 4.0 ser lançado)

Com a sequência de execução , sua tarefa ficará assim:

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

Mas se você (por algum motivo) preferir não usá-lo, o gulp.startmétodo ajudará :

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

Nota: Se você iniciar a tarefa apenas sem ouvir o resultado, a developtarefa será concluída mais cedo coffeee isso pode ser confuso.

Você também pode remover o ouvinte de eventos quando não for necessário

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

Considere que também há um task_errevento que você pode querer ouvir. task_stopé acionado na conclusão bem-sucedida, enquanto task_erraparece quando há algum erro.

Você também pode se perguntar por que não há documentação oficial para gulp.start(). Esta resposta do membro gulp explica o seguinte:

gulp.start não é documentado de propósito porque pode levar a arquivos de compilação complicados e não queremos que as pessoas o usem

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

De acordo com os documentos Gulp:

Suas tarefas estão sendo executadas antes que as dependências sejam concluídas? Verifique se as tarefas de dependência estão usando corretamente as dicas de execução assíncrona: receba um retorno de chamada ou retorne uma promessa ou fluxo de eventos.

Para executar sua sequência de tarefas de forma síncrona:

1. Retorne o fluxo de eventos (por exemplo gulp.src) para gulp.taskpara informar a tarefa de quando o fluxo termina.
2. Declare dependências de tarefas no segundo argumento de gulp.task.

Veja o código revisado:

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"

Eu estava tendo exatamente o mesmo problema e a solução acabou sendo muito fácil para mim. Altere basicamente o seu código para o seguinte e ele deve funcionar. NOTA: o retorno antes do gulp.src fez toda a diferença para mim.

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"

tentei todas as soluções propostas, todas parecem ter problemas próprios.

Se você realmente procurar a fonte do Orchestrator, particularmente a .start()implementação, verá que, se o último parâmetro for uma função, ele será tratado como um retorno de chamada.

Eu escrevi este trecho para minhas próprias tarefas:

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

Eu estava procurando por essa resposta por um tempo. Agora eu peguei isso na documentação oficial do gulp.

Se você deseja executar uma tarefa gulp quando a última estiver concluída, você deve retornar um fluxo:

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

Basta fazer coffeedepender cleane developdepender de coffee:

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

A expedição agora é serial: clean→ coffee→ develop. Observe que cleana implementação e coffeea implementação devem aceitar um retorno de chamada "para que o mecanismo saiba quando será feito" :

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

Em conclusão, abaixo está um padrão simples de gulp para um síncrono cleanseguido por dependências de construção assíncronas :

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

O Gulp é inteligente o suficiente para executar cleanexatamente uma vez por build, independentemente de quantas builddependências dependam clean. Como escrito acima, cleané uma barreira de sincronização, então todas buildas dependências são executadas em paralelo e depois buildexecutadas.

Para mim, não estava executando a tarefa minify após a concatenação, pois espera uma entrada concatenada e não foi gerada algumas vezes.

Tentei adicionar a uma tarefa padrão em ordem de execução e ela não funcionou. Funcionou depois de adicionar apenas um returnpara cada tarefa e obter a minificação dentro, gulp.start()como abaixo.

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

Fonte http://schickling.me/synchronous-tasks-gulp/

Gulp e Node usam promessas .

Então você pode fazer isso:

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

Se você retornar o fluxo gulp, poderá usar o then()método para adicionar um retorno de chamada. Como alternativa, você pode usar o nativo do Node Promisepara criar suas próprias promessas. Aqui eu uso Promise.all()para ter um retorno de chamada que é acionado quando todas as promessas são resolvidas.

Tente este hack :-) Gulp v3.x Hack for Async bug

Eu tentei de todas as maneiras "oficiais" no Leiame, elas não funcionaram para mim, mas funcionou. Você também pode atualizar para o gulp 4.x, mas eu recomendo que não, pois quebra muitas coisas. Você pode usar uma promessa js real, mas, ei, isso é rápido, sujo, simples :-) Basicamente, você usa:

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

Confira o post!