gulp:如何在不刷新的情况下更新浏览器(仅适用于css更改)

Question

我已经设置了gulp,以便在我进行更改时浏览器重新加载.但是,对于css更改,我希望浏览器更新而不刷新,但我不知道如何做到这一点.对于我目前的设置,我使用了本教程:

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());
});

Answer 1

你需要livereload.changed(files)在发生变化时打电话.要做到这一点,请参阅gulp-watch doc.

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