Come eseguire le attività di Gulp in sequenza una dopo l'altra

nello snippet in questo modo:

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"

Nel developcompito voglio correre cleane dopo che è finito, corri coffeee quando fatto, esegui qualcos'altro. Ma non riesco a capirlo. Questo pezzo non funziona. Si prega di avvisare.

Non è ancora una versione ufficiale, ma la prossima versione di Gulp 4.0 consente di eseguire facilmente attività sincrone con gulp.series. Puoi semplicemente farlo in questo modo:

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

Ho trovato un buon post sul blog che introduce come aggiornare e utilizzare quelle funzionalità pulite: migrare a gulp 4 con l'esempio

Per impostazione predefinita, gulp esegue le attività contemporaneamente, a meno che non abbiano dipendenze esplicite. Questo non è molto utile per attività come clean, in cui non si desidera dipendere, ma è necessario che vengano eseguite prima di ogni altra cosa.

Ho scritto il run-sequenceplugin appositamente per risolvere questo problema con gulp. Dopo averlo installato, utilizzalo in questo modo:

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

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

Puoi leggere le istruzioni complete sul pacchetto README - supporta anche l'esecuzione di alcuni set di attività contemporaneamente.

Si noti che questo sarà risolto (in modo efficace) nella prossima versione principale di gulp , poiché eliminano completamente l'ordinamento automatico delle dipendenze e forniscono strumenti simili run-sequenceper consentire all'utente di specificare manualmente l'ordine di esecuzione come desiderato.

Tuttavia, questo è un grande cambiamento, quindi non c'è motivo di aspettare quando puoi usarlo run-sequenceoggi.

L'unica buona soluzione a questo problema si trova nella documentazione gulp che può essere trovata qui

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

Ho generato un'app nodo / gulp usando il generatore Yeoman generator -gulp-webapp . Ha gestito il "enigma pulito" in questo modo (traducendo nei compiti originali menzionati nella domanda):

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

la sequenza di esecuzione è il modo più chiaro (almeno fino al rilascio di Gulp 4.0)

Con la sequenza di esecuzione , l'attività sarà simile alla seguente:

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

Ma se tu (per qualche ragione) preferisci non usarlo, il gulp.startmetodo ti aiuterà :

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

Nota: se si avvia un'attività solo senza ascoltare il risultato, l' developattività terminerà prima di coffeee ciò potrebbe creare confusione.

È inoltre possibile rimuovere il listener di eventi quando non è necessario

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

Considera che c'è anche un task_errevento che potresti voler ascoltare. task_stopviene attivato al termine, mentre task_errviene visualizzato in caso di errore.

Potresti anche chiederti perché non esiste una documentazione ufficiale per gulp.start(). Questa risposta del membro di Gulp spiega le cose:

gulp.start non è documentato apposta perché può portare a file di build complicati e non vogliamo che le persone lo utilizzino

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

Secondo i documenti di Gulp:

Le attività sono in esecuzione prima del completamento delle dipendenze? Assicurarsi che le attività di dipendenza stiano utilizzando correttamente i suggerimenti per l'esecuzione asincrona: accettare una richiamata o restituire un flusso di promesse o eventi.

Per eseguire la sequenza di attività in modo sincrono:

1. Riporta il flusso di eventi (ad es. gulp.src) Agulp.task Per informare l'attività di quando termina il flusso.
2. Dichiarare le dipendenze delle attività nel secondo argomento di gulp.task.

Vedi il codice rivisto:

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"

Avevo lo stesso identico problema e la soluzione si è rivelata abbastanza facile per me. In sostanza, modifica il codice nel modo seguente e dovrebbe funzionare. NOTA: il ritorno prima di gulp.src ha fatto la differenza per me.

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"

provato tutte le soluzioni proposte, tutte sembrano avere problemi propri.

Se si esamina effettivamente l'origine dell'orchestrator, in particolare il .start() implementazione, si vedrà che se l'ultimo parametro è una funzione, lo tratterà come un callback.

Ho scritto questo frammento per i miei compiti:

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

Stavo cercando questa risposta per un po '. Ora l'ho preso nella documentazione ufficiale di gulp.

Se si desidera eseguire un'attività gulp al termine dell'ultima, è necessario restituire uno stream:

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 fare coffeeaffidamento cleane developdipendere da coffee:

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

La spedizione è ora seriale: clean→ coffee→ develop. Si noti che cleanl'implementazione e coffeel'implementazione devono accettare un callback, "in modo che il motore sappia quando verrà eseguito" :

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

In conclusione, di seguito è riportato un semplice modello gulp per un sincrono cleanseguito da dipendenze di build asincrone :

//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 è abbastanza intelligente da funzionare cleanesattamente una volta per build, indipendentemente da quante builddipendenze dipendono clean. Come scritto sopra, cleanè una barriera di sincronizzazione, quindi tutte buildle dipendenze vengono eseguite in parallelo, quindi buildviene eseguita.

Per me non stava eseguendo l'attività di minimizzazione dopo la concatenazione in quanto prevede input concatenati e non è stato generato alcune volte.

Ho provato ad aggiungere un'attività predefinita in ordine di esecuzione e non ha funzionato. Ha funzionato dopo aver aggiunto solo un returnper ogni attività e ottenere la minificazione all'interno gulp.start()come di seguito.

/**
* 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 usano le promesse .

Quindi puoi farlo:

// ... 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 si restituisce il flusso gulp, è possibile utilizzare il then()metodo per aggiungere un callback. In alternativa, puoi usare il nativo di Node Promiseper creare le tue promesse. Qui uso Promise.all()una callback che si attiva quando tutte le promesse si risolvono.

Prova questo trucco :-) Gulp v3.x Hack for Async bug

Ho provato tutti i modi "ufficiali" nel Readme, non hanno funzionato per me, ma questo ha funzionato. Puoi anche aggiornare a gulp 4.x ma ti consiglio vivamente di non farlo, si rompe così tante cose. Potresti usare una vera promessa di js, ma ehi, questo è veloce, sporco, semplice :-) In sostanza usi:

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

Dai un'occhiata al post!