gulp-livereload 重新加载 CSS 不刷新整个页面

Question

我正在使用远程服务器，在任何文件更改后，它都会通过 gulp-sftp 部署到服务器。我也在使用 SASS，并有编译它的任务。

编译任务

gulp.task('compile_css',function(){
gulp.src('css/**/*.scss')

    .pipe(compass({
        config_file: 'config.rb',
        css: 'css',
        sass: 'css'
    }))

    .pipe(gulp.dest('css'))
    .pipe(sftp(sftp_config));
});

观察者

gulp.task('watch', function(){
livereload.listen();    
gulp.watch('css/**/*.scss', ['compile_css']);
gulp.watch('css/*.css*').on('change', function(file){
    gulp.src(file.path)
      .pipe(wait(1000))
      .pipe(livereload());
});
});

现在，如果我在第一个浏览器中更改任何 .scss 文件，则仅更新样式表而无需重新加载（仅加载 style.css 的新版本），然后刷新整个页面，这很烦人。你能给点建议如何避免吗？

p.s。在这种情况下使用 LiveReload 软件工作完美

Answer 1

请在您的 watch 任务中尝试以下操作。

请注意，我现在无法测试该代码段，但我认为它可以帮助您，根据 gulp-livereload docs:

gulp.task('watch', function(){
   livereload.listen();
   gulp.watch('css/**/*.scss', ['compile_css']);
   gulp.watch('css/*.css', function(file){
      livereload.changed(file)
  });
});

提示：您是否考虑过使用 Browsersync？

gulp-livereload 重新加载 CSS 不刷新整个页面

gulp-livereload reload CSS without refresh entire page

ftp

sftp

sass

gulp

gulp-livereload