配置 Gulp 以反映 CSS 更改答案

【问题标题】：Configuring Gulp to reflect css changes配置 Gulp 以反映 CSS 更改
【发布时间】：2017-02-18 20:43:14
【问题描述】：

我第一次使用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");
});

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

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

【问题讨论】：

标签： javascript css asp.net gulp asp.net-core-mvc

【解决方案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

【讨论】：