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

Question

我设置了 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());
});

Answer 1

发生变化时，您需要调用livereload.changed(files)。要做到这一点，请参阅 gulp-watch doc .

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