Schluck 4.0: Aufgaben in Serie

Question

Ich versuche, eine Reihe von Aufgaben in Serie zu führen, das ist einer nach dem anderen in Gulp 4.0, aber wenn ich meine dritte Aufgabe hinzufügen, bricht mein Schluck Code.

gulp.task('concat-js', (done) => { 
     gulp.src([ 
     'app1.js', 
     'app2.js', 
     ]) 
     .pipe(concat("app.js")) 
     .pipe(gulp.dest('build')) 
     done(); 
    }); 

    gulp.task('concat-css', (done) => { 
     gulp.src([ 
     '.styles1.css', 
     '.style2.css' 
     ]) 
     .pipe(concat("app.css")) 
     .pipe(gulp.dest('build')) 
     done(); 
    }); 

    gulp.task('minify-js', (done) => { 
     gulp.src('./build/app.js') 
     .pipe(uglify()) 
     .pipe(gulp.dest('./build/')) 
     done(); 
    }) 

    //this works & creates /build with the app.js & app.css files 
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css',, (done) => { 
     done(); 
    })); 

Wenn ich die Build-Ordner löschen alle über & Versuch starten eine andere Aufgabe (minfy-js) Zugabe, nicht meine dritte Aufgabe & die Build-Ordner erstellt nicht erhalten auch.

//File not found with singular glob: /Users/user/myapp/build/app.js 
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css', 'minify-js', (done) => { 
     done(); 
    })); 

Answer 1

Die Art und Weise, wie Sie die asynchrone Beendigung Ihrer Tasks signalisieren, ist falsch. Lesen Sie this answer für einen Überblick über die verschiedenen Möglichkeiten, wie Sie asynchrone Vervollständigung im Schluck signalisieren können.

Grundsätzlich sind alle Streams, die Sie über gulp.src() erstellen, asynchron. Das bedeutet, dass Sie den Stream erstellen und Ihr Code sofort zurückgibt. Die eigentliche Verarbeitung des Streams startet jedoch nur nach Sie beenden die Task-Funktion. Damit Schluck weiß, dass Sie einen Stream verwenden und warten müssen, bis der Stream die Verarbeitung beendet hat, müssen Sie return den Stream von Ihrer Aufgabe senden.

Sie tun etwas ganz anderes. Sie rufen eine Callback-Funktion done auf, die eine andere Möglichkeit darstellt, die Beendigung asynchroner Tasks zu signalisieren. Das ist jedoch in diesem Fall völlig falsch, denn wenn Sie die Callback-Funktion done aufrufen, hat der von Ihnen erstellte Stream noch nicht einmal begonnen zu verarbeiten.

Das bedeutet Schluck denkt, dass Ihre concat-js Aufgabe abgeschlossen ist, obwohl der Code in Ihrer Aufgabe nicht einmal wirklich gestartet wurde. Wenn also die Aufgabe ausgeführt wird, wurde Ihre ./build/app.js Datei noch nicht erstellt. Boom. Error.

Um dies zu beheben immer return die Ströme von Ihren Aufgaben:

gulp.task('concat-js',() => { 
    return gulp.src([ 
     'app1.js', 
     'app2.js', 
    ]) 
    .pipe(concat("app.js")) 
    .pipe(gulp.dest('build')) 
}); 

gulp.task('concat-css',() => { 
    return gulp.src([ 
     '.styles1.css', 
     '.style2.css' 
    ]) 
    .pipe(concat("app.css")) 
    .pipe(gulp.dest('build')) 
}); 

gulp.task('minify-js',() => { 
    return gulp.src('./build/app.js') 
    .pipe(uglify()) 
    .pipe(gulp.dest('./build/')) 
}) 

gulp.task('build-production-static-resource', gulp.series(
    'concat-js', 'concat-css', 'minify-js' 
));