Qu'en est-il de cette combinaison de gulp-concat et de lazypipe qui provoque une erreur en utilisant gulp 4?

Question

Je suis mise à niveau de Gulp 3 à 4, et je suis en cours d'exécution dans une erreur:

The following tasks did not complete: build 
Did you forget to signal async completion? 

Je comprends ce qu'il dit, mais ne peut pas comprendre pourquoi ce code déclenche il.

Erreur ou non, la tâche se termine (les fichiers sont concaténés et écrits dans dest). L'exécution du même code sans lazypipe n'entraîne aucune erreur et la suppression de la concaténation dans lazypipe corrige également l'erreur.

Envelopper le tout dans quelque chose qui crée un flux (comme fusionner-stream) résout le problème. Je suppose que quelque chose à propos de l'interaction entre gulp-concat et lazypipe empêche un flux d'être renvoyé correctement.

est ici la tâche (simplifiée):

gulp.task('build', function() { 
    var dest = 'build'; 

    var buildFiles = lazypipe() 
     .pipe(plugins.concat, 'cat.js') // Task will complete if I remove this 
     .pipe(gulp.dest, dest); 

    // This works 
    // return gulp.src(src('js/**/*.js')) 
    //  .pipe(plugins.concat('cat.js')) 
    //  .pipe(gulp.dest(dest)); 

    // This doesn't (unless you wrap it in a stream-making function) 
    return gulp.src(src('js/**/*.js')) 
     .pipe(buildFiles()); 
}); 

Tout conseil apprécié!

Answer 1

Ceci est un known issue lorsque vous utilisez lazypipe avec gulp 4 et il ne va pas être réparé dans un avenir proche. Citation de cette question:

OverZealous commented on 20 Dec 2015
As of now, I have no intention of making lazypipe work on Gulp 4.

Pour autant que je peux dire ce problème est causé par le fait que Gulp 4 utilise async-done qui a ceci à dire au sujet de son soutien de flux:

Note: Only actual streams are supported, not faux-streams; Therefore, modules like event-stream are not supported.

Lorsque vous utilisez lazypipe() comme le dernier tuyau ce que vous obtenez est un flux qui n'a pas beaucoup de propriétés que vous avez habituellement lorsque vous travaillez avec des flux dans Gulp. Vous pouvez voir par vous-même en vous connectant les flux:

// console output shows lots of properties 
console.log(gulp.src(src('js/**/*.js')) 
    .pipe(plugins.concat('cat.js')) 
    .pipe(gulp.dest(dest))); 

// console output shows much fewer properties 
console.log(gulp.src(src('js/**/*.js')) 
    .pipe(buildFiles())); 

C'est probablement la raison pour laquelle gulp considère le deuxième flux à un « faux-stream » et ne détecte pas correctement lorsque le flux est terminé.

Votre seule option à ce stade est une sorte de solution de contournement. La solution la plus simple (qui ne nécessite pas de paquets supplémentaires) est de simplement ajouter une fonction de rappel cb à votre tâche et écouter l'événement 'end':

gulp.task('build', function(cb) { 
    var dest = 'build'; 

    var buildFiles = lazypipe() 
    .pipe(plugins.concat, 'cat.js') 
    .pipe(gulp.dest, dest); 

    gulp.src(src('js/**/*.js')) 
    .pipe(buildFiles()) 
    .on('end', cb); 
}); 

Vous pouvez également ajouter de .pipe() après buildFiles() devrait résoudre ce problème, même celui qui ne fait pas vraiment quelque chose comme gutil.noop():

var gutil = require('gulp-util'); 

gulp.task('build', function() { 
    var dest = 'build'; 

    var buildFiles = lazypipe() 
    .pipe(plugins.concat, 'cat.js') 
    .pipe(gulp.dest, dest); 

    return gulp.src(src('js/**/*.js')) 
    .pipe(buildFiles()) 
    .pipe(gutil.noop()); 
});