Comment exécuter les tâches Gulp séquentiellement l'une après l'autre

dans l'extrait de code comme ceci:

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"

Dans la developtâche, je veux exécuter cleanet après avoir terminé, exécuter coffeeet quand cela est fait, exécuter autre chose. Mais je ne peux pas comprendre cela. Cette pièce ne fonctionne pas. S'il vous plaît donnez votre avis.

Ce n'est pas encore une version officielle, mais la prochaine version de Gulp 4.0 vous permet de faire facilement des tâches synchrones avec gulp.series. Vous pouvez simplement le faire comme ceci:

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

J'ai trouvé un bon article de blog présentant la mise à niveau et l'utilisation de ces fonctionnalités intéressantes: migration vers gulp 4 par exemple

Par défaut, gulp exécute les tâches simultanément, sauf si elles ont des dépendances explicites. Ce n'est pas très utile pour des tâches comme clean, où vous ne voulez pas dépendre, mais vous en avez besoin pour s'exécuter avant tout le reste.

J'ai écrit le run-sequenceplugin spécifiquement pour résoudre ce problème avec gulp. Après l'avoir installé, utilisez-le comme ceci:

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

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

Vous pouvez lire les instructions complètes sur le paquet README - il prend également en charge l'exécution simultanée de certains ensembles de tâches.

Veuillez noter que cela sera (effectivement) corrigé dans la prochaine version majeure de gulp , car ils éliminent complètement l'ordre de dépendance automatique et fournissent des outils similaires àrun-sequence pour vous permettre de spécifier manuellement l'ordre d'exécution comme vous le souhaitez.

Cependant, c'est un changement majeur, il n'y a donc aucune raison d'attendre quand vous pouvez l'utiliser run-sequenceaujourd'hui.

La seule bonne solution à ce problème peut être trouvée dans la documentation de gulp qui peut être trouvée ici

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

J'ai généré une application node / gulp en utilisant le générateur Yeoman generator -gulp-webapp . Il a géré le "casse-tête propre" de cette façon (se traduisant par les tâches d'origine mentionnées dans la question):

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

run-sequence est le moyen le plus clair (au moins jusqu'à la sortie de Gulp 4.0)

Avec run-sequence , votre tâche ressemblera à ceci:

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

Mais si vous (pour une raison quelconque) préférez ne pas l'utiliser, la gulp.startméthode vous aidera :

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

Remarque: Si vous démarrez uniquement la tâche sans écouter le résultat, la developtâche se terminera plus tôt que coffee, et cela peut prêter à confusion.

Vous pouvez également supprimer l'écouteur d'événements lorsqu'il n'est pas nécessaire

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

Considérez qu'il y a aussi un task_errévénement que vous voudrez peut-être écouter. task_stopest déclenché en cas de réussite, tandis que task_errs'affiche en cas d'erreur.

Vous pouvez également vous demander pourquoi il n'y a pas de documentation officielle pour gulp.start(). Cette réponse d'un membre de gulp explique les choses:

gulp.start n'est pas documenté exprès car cela peut conduire à des fichiers de construction compliqués et nous ne voulons pas que les gens l'utilisent

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

Selon les documents Gulp:

Vos tâches s'exécutent-elles avant la fin des dépendances? Assurez-vous que vos tâches de dépendance utilisent correctement les astuces d'exécution asynchrone: prenez un rappel ou renvoyez une promesse ou un flux d'événements.

Pour exécuter votre séquence de tâches de manière synchrone:

1. Renvoyez le flux d'événements (par exemple gulp.src) gulp.taskpour informer la tâche de la fin du flux.
2. Déclarez les dépendances de tâche dans le deuxième argument de gulp.task.

Voir le code révisé:

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"

J'avais exactement le même problème et la solution s'est avérée assez facile pour moi. Modifiez simplement votre code comme suit et cela devrait fonctionner. REMARQUE: le retour avant gulp.src a fait toute la différence pour moi.

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"

essayé toutes les solutions proposées, tous semblent avoir leurs propres problèmes.

Si vous regardez réellement la source d'Orchestrator, en particulier l' .start()implémentation, vous verrez que si le dernier paramètre est une fonction, il la traitera comme un rappel.

J'ai écrit cet extrait pour mes propres tâches:

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

Je cherchais cette réponse depuis un moment. Maintenant, je l'ai dans la documentation officielle de Gulp.

Si vous souhaitez effectuer une tâche gulp lorsque la dernière est terminée, vous devez renvoyer un flux:

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

Faites simplement coffeedépendre cleanet developdépendez de coffee:

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

L'envoi est désormais en série: clean→ coffee→ develop. Notez que cleanla mise en œuvre etcoffee l'implémentation doivent accepter un rappel, "afin que le moteur sache quand cela sera fait" :

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

En conclusion, voici un modèle de gulp simple pour une cleandépendance de construction synchrone suivie par des dépendances de construction asynchrones :

//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 est assez intelligent pour fonctionner cleanexactement une fois par build, quel que soit le nombre de builddépendances dont dépend clean. Comme écrit ci-dessus, cleanest une barrière de synchronisation, alors toutes buildles dépendances de s'exécutent en parallèle, puisbuild s'exécute.

Pour moi, il n'exécutait pas la tâche minify après la concaténation car il attend une entrée concaténée et il n'a pas été généré quelques fois.

J'ai essayé d'ajouter à une tâche par défaut dans l'ordre d'exécution et cela n'a pas fonctionné. Cela a fonctionné après avoir ajouté juste un returnpour chaque tâche et obtenu la minification à l'intérieur gulp.start()comme ci-dessous.

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

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

Gulp et Node utilisent des promesses .

Vous pouvez donc faire ceci:

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

Si vous renvoyez le flux gulp, vous pouvez utiliser la then()méthode pour ajouter un rappel. Alternativement, vous pouvez utiliser le Node natif Promisepour créer vos propres promesses. Ici, j'ai l'habitude Promise.all()d'avoir un rappel qui se déclenche lorsque toutes les promesses sont résolues.

Essayez ce hack :-) Gulp v3.x Hack for Async bug

J'ai essayé toutes les méthodes "officielles" du fichier Lisezmoi, elles ne fonctionnaient pas pour moi, mais cela a fonctionné. Vous pouvez également passer à gulp 4.x mais je vous le déconseille fortement, cela casse tellement de choses. Vous pourriez utiliser une vraie promesse js, mais bon, c'est rapide, sale, simple :-) Essentiellement, vous utilisez:

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

Consultez le post!