GulpJS:Livereload不刷新Sass更改(适用于JS更改)

GulpJS:Livereload不刷新Sass更改(适用于JS更改),gulp,livereload,Gulp,Livereload,我的gulpfile监视Sass文件的更改,然后应该触发lr服务器的刷新。监视事件工作正常,因为每次更改都会编译Sass,但是浏览器不会刷新。我正在使用gulpruby-sass编译sass 我有一个几乎相同的任务,监视JS文件,然后启动浏览器刷新,这很好 下面是(节略的)gulpfile.js。我已经包括了任务脚本,因为它目前的工作方式与样式任务应该做的相同 var gulp = require('gulp'); var sass = require('gulp-ruby-sass'); va

我的gulpfile监视Sass文件的更改,然后应该触发lr服务器的刷新。监视事件工作正常,因为每次更改都会编译Sass,但是浏览器不会刷新。我正在使用gulpruby-sass编译sass

我有一个几乎相同的任务,监视JS文件,然后启动浏览器刷新,这很好

下面是(节略的)gulpfile.js。我已经包括了任务脚本,因为它目前的工作方式与样式任务应该做的相同

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var bourbon = require('node-bourbon').includePaths;
var newer = require('gulp-newer');
var lr = require('tiny-lr');
var lrserver = lr();
var refresh = require('gulp-livereload');

gulp.task('scripts', ['vendorScripts', 'libScripts'], function () {
    return gulp.src([paths.js])
        .pipe(newer(paths.destJS + '/script.js'))
        .pipe(concat('script.js'))
        .pipe(gulp.dest(paths.destJS))
        .pipe(refresh(lrserver));
});

gulp.task('styles', function () {
    return gulp.src(paths.sass)
        .pipe(newer(paths.destCSS))
        .pipe(sass({loadPath: require('node-bourbon').includePaths}))
        .pipe(gulp.dest(paths.destCSS))
        .pipe(refresh(lrserver));
});

gulp.task('watch', function () {
    gulp.watch(paths.jsAll, ['scripts']);
    gulp.watch(paths.sass, ['styles']);
    gulp.watch(paths.html, ['html']);
    gulp.watch([paths.img, '!' + paths.app + '/**/images/sprites{,/**}'], ['images']);
    gulp.watch(paths.sprites, ['sprites']);
});

我已尝试删除较新的插件和bourbon require节点,但对这个问题没有任何影响。

作为一种解决方法,回应soenguy的评论:

创建一个新任务,该任务本身首先调用
样式
任务:

gulp.task('goRefresh', ['styles'], function () {
    return gulp.src([paths.app], { read: false })
        .pipe(refresh(lrserver));
});
然后,对于
监视任务,将Sass监视更改为:

gulp.watch(paths.sass, ['goRefresh']);

这远不是一个理想的解决方案,但至少浏览器刷新工作正常。

您是否尝试过在不使用
watch
的情况下重新执行sass任务,并尝试过在使用和不使用livereload的情况下运行
gulp styles
?首先检查是否工作正常。
watch
工作正常,因为正确的CSS正在获得输出。运行
gulp styles
会再次生成正确的CSS,但浏览器不会刷新(但不会刷新,因为
service
任务(未显示)未启动)。我不明白为什么会出现此问题。有一件事我会尝试,即使它不是完美的,但可能会起作用,那就是监视css文件并构建一个特定的任务,只用于重新加载。编译sass文件时,css会发生更改,然后可以启动
livereload
。除非其他人有更好的(有效的)解决方案,否则这可能会起作用。这是我想到的第一个诀窍,但你可以四处寻找其他人来实现这一点(比如用
gulp调用
scripts
任务。例如,在样式任务结束时启动
)。你的解决方法现在就可以了。。非常奇怪的问题!感谢您的帮助。请使用工作解决方案回答您自己的问题,以便其他遇到相同问题的人可以轻松解决。当然,在其他人真正知道如何修复之前,这只是一个暂时的解决方案。谢谢,不客气。