Erreur Gulp : Les tâches suivantes n'ont pas été effectuées : Avez-vous oublié de signaler l'achèvement asynchrone ?

Question

J'ai les éléments suivants gulpfile.js que j'exécute via la ligne de commande. message gulp :

var gulp = require('gulp');

gulp.task('message', function() {
  console.log("HTTP Server Started");
});

Je reçois le message d'erreur suivant :

[14:14:41] Using gulpfile ~\Documents\node\first\gulpfile.js
[14:14:41] Starting 'message'...
HTTP Server Started
[14:14:41] The following tasks did not complete: message
[14:14:41] Did you forget to signal async completion?

J'utilise gulp 4 sur un système Windows 10. Voici la sortie de gulp --version :

[14:15:15] CLI version 0.4.0
[14:15:15] Local version 4.0.0-alpha.2

Answer 1

Comme votre tâche peut contenir du code asynchrone, vous devez signaler à gulp la fin de l'exécution de votre tâche (= "achèvement asynchrone").

Dans Gulp 3.x, vous pouviez vous en sortir sans faire cela. Si vous ne signaliez pas explicitement l'achèvement asynchrone, Gulp supposait simplement que votre tâche était synchrone et qu'elle était terminée dès que la fonction de la tâche revenait. Gulp 4.x est plus strict à cet égard. Vous pouvez consulter le site doivent signaler explicitement l'achèvement de la tâche.

Vous pouvez le faire dans six façons :

1. Retourner un Stream

Ce n'est pas vraiment une option si vous essayez seulement d'imprimer quelque chose, mais c'est probablement le mécanisme de complétion asynchrone le plus fréquemment utilisé puisque vous travaillez généralement avec des flux gulp. Voici un exemple (plutôt artificiel) qui le démontre pour votre cas d'utilisation :

var print = require('gulp-print');

gulp.task('message', function() {
  return gulp.src('package.json')
    .pipe(print(function() { return 'HTTP Server Started'; }));
});

La partie importante ici est le return déclaration. Si vous ne retournez pas le flux, gulp ne peut pas déterminer quand le flux est terminé.

2. Retourner un Promise

C'est un mécanisme beaucoup plus adapté à votre cas d'utilisation. Notez que, la plupart du temps, vous n'aurez pas à créer l'objet Promise vous-même, il sera généralement fourni par un paquetage (par exemple, l'application fréquemment utilisée del renvoie un Promise ).

gulp.task('message', function() { 
  return new Promise(function(resolve, reject) {
    console.log("HTTP Server Started");
    resolve();
  });
});

Utilisation de async/await La syntaxe peut être simplifiée encore davantage. Toutes les fonctions marquées async renvoient implicitement une Promise, de sorte que la méthode suivante fonctionne également (si vos la version de node.js le supporte ):

gulp.task('message', async function() {
  console.log("HTTP Server Started");
});

3. Appelez la fonction de rappel

C'est probablement le moyen le plus simple pour votre cas d'utilisation : gulp passe automatiquement une fonction de rappel à votre tâche comme premier argument. Il suffit d'appeler cette fonction lorsque vous avez terminé :

gulp.task('message', function(done) {
  console.log("HTTP Server Started");
  done();
});

4. Renvoyer un processus de l'enfant

C'est surtout utile si vous devez invoquer un outil en ligne de commande directement parce qu'il n'y a pas de wrapper node.js disponible. Cela fonctionne pour votre cas d'utilisation mais évidemment je ne le recommanderais pas (surtout parce qu'il n'est pas très portable) :

var spawn = require('child_process').spawn;

gulp.task('message', function() {
  return spawn('echo', ['HTTP', 'Server', 'Started'], { stdio: 'inherit' });
});

5. Retourner un RxJS Observable .

Je n'ai jamais utilisé ce mécanisme, mais si vous utilisez RxJS, il pourrait être utile. C'est un peu exagéré si vous voulez juste imprimer quelque chose :

var of = require('rxjs').of;

gulp.task('message', function() {
  var o = of('HTTP Server Started');
  o.subscribe(function(msg) { console.log(msg); });
  return o;
});

6. Retourner un EventEmitter

Comme la précédente, je l'inclus pour des raisons d'exhaustivité, mais ce n'est pas vraiment quelque chose que vous utiliserez à moins que vous n'utilisiez déjà un système de gestion de l'information. EventEmitter pour une raison quelconque.

gulp.task('message3', function() {
  var e = new EventEmitter();
  e.on('msg', function(msg) { console.log(msg); });
  setTimeout(() => { e.emit('msg', 'HTTP Server Started'); e.emit('finish'); });
  return e;
});

Answer 2

Un problème avec Gulp 4 .

Pour résoudre ce problème, essayez de modifier votre code actuel :

gulp.task('simpleTaskName', function() {
  // code...
});

par exemple en ceci :

gulp.task('simpleTaskName', async function() {
  // code...
});

ou dans ceci :

gulp.task('simpleTaskName', done => {
  // code...
  done();
});

Answer 3

Vous devez faire une chose :

• Add async avant la fonction.

  const gulp = require('gulp');

  gulp.task('message', async function() { console.log("Gulp is running..."); });

Answer 4

ÇA A MARCHÉ !

Dernière mise à jour le 18 février 2021, J'ai trouvé le problème après avoir utilisé la solution ci-dessus puis je l'ai résolu en utilisant la solution suivante à la place pour la version de gulp suivante.

Fichier : Package.json

...,
"devDependencies": {
        "del": "^6.0.0",
        "gulp": "^4.0.2",
      },
...

Fichier : gulpfile.js Exemple

const {task} = require('gulp');
const del = require('del');

async function clean() {
    console.log('processing ... clean');

    return del([__dirname + '/dist']);
}

task(clean)
...

Version aînée

gulp.task('script', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('css', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('default', gulp.parallel(
        'script',
        'css'
  )
);

Answer 5

J'ai eu la même erreur en essayant d'exécuter un programme très simple. SASS/CSS construire.

Ma solution (qui peut résoudre cette même erreur ou des erreurs similaires) a été simplement d'ajouter done comme paramètre dans la fonction de la tâche par défaut, et de l'appeler à la fin de la tâche par défaut :

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function (f) {
            return f.base;
        }))
});

gulp.task('clean', function() {
})

gulp.task('watch', function() {
    gulp.watch('*.scss', ['sass']);
})

gulp.task('default', function(done) { // <--- Insert `done` as a parameter here...
    gulp.series('clean','sass', 'watch')
    done(); // <--- ...and call it here.
})

J'espère que cela vous aidera !