配置gulp以反映css更改

Question

我第一次使用gulp与ASP.net Core，我试图对其进行配置，因此当我的css文件被修改时，这些更改可以在我的浏览器（Chrome）中自动反映而不刷新页面F5。我已经尝试过将这些.js文件缩小并且正在工作，但是对于livereload，我必须做一些错误的事情，因为这些更改没有被自动捕获，我必须在浏览器中按F5键。 我已经安装了Chrome的插件LiveReload 这是我的代码里面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"); 
}); 

而且这是在Visual Studio中Task Runner的图像：

我不喜欢这样Process terminated with code 0.在Task Runner控制台内，我需要做什么？

Answer 1

您可以使用浏览器同步并创建一个观察器来观察您的css更改并在您的css文件中的任何内容每次更改时重新加载页面。

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