Question

我的gulpfile监视Sass文件的更改，然后应该为lr服务器启动刷新。监视事件工作正常，因为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']);
});

我已尝试删除较新的插件和 node-bourbon要求，但它对此问题没有影响。

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

这远非理想的解决方案，但至少浏览器更新工作。

GulpJS：Livereload没有为Sass更改刷新（适用于JS更改）

1 个答案: