Gulp Watch – Aufgaben der Reihe nach ausführen (synchron)
-
24-12-2019 - |
Frage
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?
Lösung
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
Andere Tipps
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.
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 .
erweitertes Beispiel
Hier ist ein abgestreiftes Beispiel dafür, wie meine GULP-Datei aussehen kann.
generasacodicetagpre.