Javascript 配置Gulp以反映css更改

我第一次将

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");
});

//
//缩小js和css
var gulp=需要（“gulp”）；
var uglify=需要（“吞咽uglify”）；
var livereload=需要（“吞咽livereload”）；
吞咽任务（“默认”，函数（）{
return gulp.src（“wwwroot/js/*.js”）
.管道（丑（）
.pipe（gulp.dest（“wwwroot/lib/_应用程序”））
});
狼吞虎咽任务（“监视”，函数（）{
利弗雷洛德。听（）；
狼吞虎咽的看着（“wwwroot/css/*.css”）；
});

这是Visual Studio中任务运行程序的图像：

---

我不喜欢以代码0终止的

进程。

在

任务运行程序

控制台中，我需要做什么？

您可以使用浏览器同步并创建一个监视程序来监视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