Gulp Watch – Aufgaben der Reihe nach ausführen (synchron)

Question

Ich habe eine Reihe von Aufgaben, die von einem Beobachter ausgeführt werden müssen, aber ich kann sie in der folgenden Reihenfolge auslösen:

Hier sind die Schluckaufgaben und der Beobachter.

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

Wenn ich also eine SCSS-Datei aktualisiere, sollte sie kompiliert und eine einzige CSS-Datei erstellt werden.Anschließend verknüpft der Build-Task die Datei mit den Herstellerdateien.Aber jedes Mal, wenn ich eine Datei speichere, bleibt sie immer einen Schritt zurück.Sehen Sie sich das Video als Beispiel an: http://screencast.com/t/065gfTrY

Ich habe die Aufgaben umbenannt, die Reihenfolge im Watch-Callback geändert usw.

Mache ich einen offensichtlichen Fehler?

Answer 1

Gulp startet alle Aufgaben zur „gleichen“ Zeit, es sei denn, Sie deklarieren Abhängigkeiten (oder lassen Streams aneinander leiten).

Also zum Beispiel, wenn Sie eine Aufgabe möchten app_build_css auf Aufgaben warten app_scss Und app_vendor_css zum Vervollständigen die Abhängigkeiten deklarieren,

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_build_css', 'watch']);

Überprüf den Gulp.task()-Dokumente

Answer 2

Mit GULP 3 verwende ich Laufsequenz Paket, um die Ausführung von Aufgaben nacheinander und nicht parallel zu unterstützen.So konfiguriere ich meine watch Aufgaben, zum Beispiel:

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

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

Das obige Beispiel zeigt ein typisches Beispiel watch Aufgabe, die das fesseln wird gulp.watch Methode mit Dateien, die bei Änderungen überwacht werden sollen, und mit einer Rückruffunktion, die ausgeführt wird, wenn eine Änderung erkannt wird.Der runSequence Die Funktion wird dann aufgerufen (im Rahmen des Rückrufs einer bestimmten watch) mit einer Liste von Aufgaben, die synchron ausgeführt werden sollen, im Gegensatz zur Standardmethode, bei der Aufgaben parallel ausgeführt werden.

Answer 3

GULP V4

Nun, da GULP v4 fast über ein Jahr lang nicht mehr als ein Jahr lang ist (Ende 2017 veröffentlicht), bietet es einige großartige Möglichkeiten, um Tasks mit ihrer Bibaum namens Bach zu sequenzieren.

https://github.com/gulpjs/bach

note : Ich würde empfehlen, in Gulp V4 zu ziehen, da v3 einige Sicherheitsanfälligkeiten hatte [Ich bin mir nicht sicher, ob diese jetzt gepatcht wurden].

Schnelles Beispiel

gulp v4 stellt gulp.series und gulp.parallel ein, dadurch können Sie Aufgaben erstellen und auswählen, die in Reihe, parallel, parallel oder gemischt, wie unten gezeigt.

Erläuterung : Dadurch wird die Tasks von scss und js in parallel ausgeführt, sobald diese vollständig sind .

generasacodicetagpre.

erweitertes Beispiel

Hier ist ein abgestreiftes Beispiel dafür, wie meine GULP-Datei aussehen kann.

generasacodicetagpre.