Конфигурирование Gulp для отражения изменений css

Question

Я использую в первый раз gulp с ASP.net Core, я пытаюсь настроить его, поэтому, когда мои файлы css изменены, эти изменения могут быть автоматически отображены в моем браузере (Chrome) без обновления страницы с F5. Я пробовал сначала минимизировать файлы .js, и это работает, но с помощью функции reneload я должен делать что-то неправильно, потому что изменения не фиксируются автоматически, и я должен нажать F5 в своем браузере. я установил уже плагином Chromebook-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:

мне не нравится, что 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