GulpJS: Sass更改不刷新肝脏(用于JS更改)

Question

我的gulpfile监视Sass文件的更改，然后会为lr服务器触发刷新。监视事件运行良好，因为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']);
});

我已经尝试删除更新的插件和节点波旁要求，但它对这个问题没有任何影响。

Answer 1

作为一种解决办法，在回应soenguy的评论时：

创建一个新任务，它本身首先调用styles任务：

gulp.task('goRefresh', ['styles'], function () {
    return gulp.src([paths.app], { read: false })
        .pipe(refresh(lrserver));
});

然后，对于watch任务，将Sass更改为：

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

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