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

Answer 2

gulp-livereload

可能需要chrome extension

Answer 3

我遇到了同样的问题，我解决了。

我发现在gulp-connect中使用嵌入式livereload支持是不受控制的。

所以，我试图让livereload独立工作。

只需在没有livereload的情况下设置gulp-connect配置，并使用指定的主机选项调用livereload.listen（大多数情况下应该是'localhost'）。喜欢

livereload.listen({ host: 'localhost' });

然后观看您要检测的文件。喜欢

var changedFile = null;

gulp.task("livereload", function(cb){
    return gulp.src(changedFile)
        .pipe(plumber())
        .pipe(livereload());
});

gulp.watch(['*.css']).on('change', function(file) {
  changedFile = file.path;
  // run specific task according to the given file's extension
  // gulp.start(['livereload']);
});

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

3 个答案: