javascript - 配置 Gulp 以反射(reflect) css 更改

Question

我第一次使用 gulp 和 ASP.net Core，我正在尝试配置它，所以当我的 css文件被修改这些更改可以自动反射(reflect)在我的浏览器 (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 的图像:

我不喜欢 Task Runner 控制台中的 Process terminated with code 0.，我需要做什么？

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