配置Gulp以反映CSS更改

Question

I'm using for the first time gulp with ASP.net Core , I'm trying to configure it so when my css files are modified those changes can be reflected automatically in my browser(Chrome) without refreshing the page with F5 . I've tried first to minify the .js files and that is working, but with livereload I must be doing something wrong because the changes are not being captured automatically and I have to press F5 in my browser. I have installed already the Chrome plugin LiveReload This is my code inside the 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");
});

And this is an image of the Task Runner in Visual Studio:

I don't like that Process terminated with code 0. within the Task Runner console, what do I need to do?

Answer 1

You can use browser-sync and create a watcher to watch your css changes and reload the page everytime anything in your css file is changed.

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