gulp：如何在不刷新的情况下更新浏览器（仅适用于 css 更改）

我已经设置了 gulp，以便在进行更改时浏览器会重新加载。但是，对于 css 更改，我希望浏览器无需刷新即可更新，但我不知道如何执行此操作。对于我当前的设置，我使用了this教程：

var debug = require('gulp-debug'),
    connect = require('gulp-connect'),
    watch = require('gulp-watch'),
    livereload = require('gulp-livereload');

gulp.task('webserver', function () {
    connect.server({
        livereload: true,
        root: ['demo/']
    });
});

gulp.task('livereload', function () {
    gulp.src(['index.html', 'resources/**/*.js'])
        .pipe(watch(['resources/**/*.html', 'index.html']))
        //.pipe(debug({verbose: true}))
        .pipe(connect.reload());
});

gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('resources/**/*.scss', ['css']);
});

在我的 css 任务中我也调用

.pipe(livereload());

有什么建议我需要修改，以便在不刷新的情况下进行 css 更新吗？

更新：这是我的 css 任务（有点简化）：

gulp.task('css', function () {
    ...
    return gulp.src('demo.scss')
        .pipe($.sass({
            errLogToConsole: true
        }))
        .pipe(gulp.dest('./target/')
        .pipe(livereload());
});

你需要打电话livereload.changed(files)当改变发生时。要做到这一点请参阅gulp-watch 文档.

watch('**/*.js', function (files) {
  livereload.changed(files)
});