Gulp watch - ausführen Aufgaben um (synchron)

Question

Ich habe eine Reihe von Aufgaben von einem Beobachter ausgeführt werden, aber ich kann sie um Feuer zu erhalten:

Hier wird die große Schluck Aufgaben und Beobachter sind.

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']); 

Also, wenn ich eine scss-Datei aktualisieren, sollte sie kompilieren sie eine einzige CSS-Datei erstellen. Dann erstellt die Build-Aufgabe die Datei mit den Herstellerdateien. Aber jedes Mal, wenn ich eine Datei speichere, bleibt sie immer einen Schritt zurück. Sehen Sie das Video als Beispiel: http://screencast.com/t/065gfTrY

Ich habe die Aufgaben umbenannt, die Reihenfolge, in der Uhr Rückruf geändert usw.

Bin ich einen offensichtlichen Fehler zu machen?

Answer 1

Gulp startet alle Aufgaben zur gleichen Zeit, es sei denn, Sie deklarieren Abhängigkeiten (oder leiten die Pipes miteinander).

So zum Beispiel, wenn Sie Aufgabe wollen app_build_css für Aufgaben warten app_scss und app_vendor_css abzuschließen, erklären die Abhängigkeiten,

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üfen Sie die Gulp.task() docs

Answer 2

Mit GULP 3 I run-sequence Paket verwenden helfen Führen Sie die Aufgaben nacheinander und nicht parallel aus. Dies ist, wie ich meine watch Aufgaben konfigurieren, 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 eine typische watch Aufgabe, die die gulp.watch Methode mit Dateien Haken, die gehört zu werden, wenn geändert, und mit einer Callback-Funktion ausgeführt werden, wenn Änderung wurde festgestellt. Die runSequence-Funktion wird dann (innerhalb des Callbacks einer bestimmten watch) mit einer Liste von Tasks aufgerufen, die auf synchrone Weise ausgeführt werden, im Gegensatz zur Standardmethode, die Tasks parallel ausführt.