GulpJS：Livereload 不刷新 Sass 更改（适用于 JS 更改）答案

【问题标题】：GulpJS: Livereload not refreshing for Sass changes (works for JS changes)GulpJS：Livereload 不刷新 Sass 更改（适用于 JS 更改）
【发布时间】：2014-06-06 17:59:41
【问题描述】：

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

我有一个几乎相同的任务，它监视 JS 文件然后触发浏览器刷新，这工作正常。

以下是（删节的）gulpfile.js。我已经包含了任务 scripts，因为它目前的工作方式与 styles 任务应该做的一样。

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

我已尝试删除 newer 插件和 node-bourbon 要求，但对这个问题没有任何影响。

【问题讨论】：

您是否尝试过在没有 watch 的情况下重新执行 sass 任务并尝试在使用和不使用 livereload 的情况下运行 gulp styles ？首先检查这是否工作正常。
watch 工作正常，因为正确的 CSS 正在获得输出。运行gulp-styles 再次生成正确的CSS，但浏览器没有刷新（但它不会这样做，因为serve 任务（未显示）没有启动）。
我不明白你为什么会遇到这个问题。我会尝试的一件事，即使它不完美但可能有用，就是查看 css 文件并仅为重新加载构建特定任务。当你编译 sass 文件时，css 会改变，然后你可以触发livereload。在其他人有更好的（和有效的解决方案）之前，这可能会起作用。这是我想到的第一个技巧，但您可以四处寻找其他人来完成这项工作（例如，在样式任务结束时使用 gulp.start 回调 scripts 任务）。
您的解决方法现在有效.. 非常奇怪的问题！感谢您的帮助。
请使用有效的解决方法回答您自己的问题，以便遇到相同问题的其他人可以轻松解决。当然，这只是一个临时解决方案，直到其他人真正知道如何解决它。谢谢，不客气。

标签： gulp livereload

【解决方案1】：

作为一种解决方法，响应 soenguy 的 cmets：

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

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

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

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

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

【讨论】：