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

2022-01-12 00:00:00 javascript gulp

我已设置 gulp，以便在我进行更改时重新加载浏览器.但是，对于 css 更改，我希望浏览器在不刷新的情况下更新，但我不确定如何执行此操作.对于我当前的设置，我使用了 this 教程:

I've setup gulp such that the browser reloads when I make changes. However, for css changes I want the browser to update without refresh, but I'm not sure how to do this. For my current setup I've used this tutorial:

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 任务中，我也调用了

In my css task I also call

.pipe(livereload());

有什么建议我需要修改以便 css 更新无需刷新即可发生吗?

Any suggestions what I need to modify so css updates happen without a refresh ?

更新:这是我的 css 任务(有点简化):

UPDATE: Here is my css task (a bit simplified):

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

推荐答案

发生变化时需要调用livereload.changed(files).为此，请参阅 gulp-watch文档.

You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc.

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

相关文章