配置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