Konfigurieren Gulp zu css Änderungen

Question

Ich verwende zum ersten Mal gulp mit ASP.net Core, ich versuche es so zu konfigurieren, wenn meine css Dateien geändert werden diese Änderungen können automatisch in meinem Browser (Chrome) ohne Aktualisierung der reflektiert werden Seite mit F5. Ich habe zuerst versucht, die .js-Dateien zu minimieren und das funktioniert, aber mit Liveload muss ich etwas falsch machen, weil die Änderungen nicht automatisch erfasst werden und ich F5 in meinem Browser drücken muss. ich bereits das Plugin Chrome installiert haben LiveReload Dies ist mein Code innerhalb des gulpfile.js:

/// <binding AfterBuild='default' /> 
//to minify js and css 
var gulp = require("gulp"); 
var uglify = require("gulp-uglify"); 
var livereload = require("gulp-livereload"); 

gulp.task("default", function() { 
    return gulp.src("wwwroot/js/*.js") 
    .pipe(uglify()) 
    .pipe(gulp.dest("wwwroot/lib/_app")) 
}); 

gulp.task("watch", function() { 
    livereload.listen(); 
    gulp.watch("wwwroot/css/*.css"); 
}); 

Und das ist ein Bild des Task Runner in Visual Studio:

ich nicht, wie die Process terminated with code 0. tun innerhalb der Task Runner Konsole, was muss ich tun?

Answer 1

Sie können Browser-Sync verwenden und einen Watcher erstellen, um Ihre CSS-Änderungen zu sehen und die Seite jedes Mal neu zu laden, wenn etwas in Ihrer CSS-Datei geändert wird.

var browserSync = require('browser-sync'); 

gulp.task('css', function(){ 
    gulp.src('css/*.css') 
    .pipe(reload({stream: true})); 

}) 

gulp.task('browser-sync', function(){ 
    browserSync({ 
     server:{ 
      baseDir: "" 
     } 
    }); 
}); 

gulp.task('watch', function(){ 
    gulp.watch(['css/*.css'], ['css']); 
}); 

gulp.task('default',['css','browser-sync','watch']); //default task to run different tasks