gulp：如何更新浏览器而不刷新（仅适用于css更改） [英] gulp: how to update the browser without refresh (for css changes only)

问题描述

我设置了gulp，以便在我进行更改时重新加载浏览器。但是，对于CSS更改，我希望浏览器更新而不刷新，但我不知道如何执行此操作。对于我目前的设置，我已经使用这个教程：

  var debug = require（'gulp-debug'），$ b $ connect = require（' gulp-connect'），
 watch = require（'gulp-watch'），
 livereload = require（'gulp-livereload'）; 
 
 gulp.task（'webserver'，function（）{
 connect.server（{
 livereload：true，
 root：['demo /'] 
}）; 
}）; 
 $ b gulp.task（'livereload'，function（）{
 gulp.src（['index.html'，'resources / ** / *。js']）
.pipe（watch（['resources / ** / *。html'，'index.html']））
 //.pipe(debug({verbose：true}））
 .pipe （connect.reload（））; 
}）; 
 $ b 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（））; 
}）; 
  livereload.changed（files）     code>发生变化时，请参阅 gulp-watch doc 。
  watch（'** / *。js'，函数（文件）{
 livereload.changed（文件）
}）; 
  
 
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']);
});
In my css task I also call
.pipe(livereload());
Any suggestions what I need to modify so css updates happen without a refresh ?

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

解决方案
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更改）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！