問題描述

我已設置 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)
});

這篇關于gulp:如何在不刷新的情況下更新瀏覽器(僅適用于 css 更改)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！