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

我的gulpfile监视Sass文件的更改，然后应该为lr服务器启动刷新。由于每次更改都会编译Sass，因此Watch事件工作正常，但浏览器并不令人耳目一新。我正在使用gulp-ruby-sass来编译Sass。GulpJS：Livereload不会刷新Sass更改（适用于JS更改）

我有一个几乎相同的任务，观看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']); 
});

我试图消除双方新插件和节点波旁需要但在这个问题上没有任何影响。

来源

2014-06-06 Fisu

您是否尝试过重做没有'watch'的sass任务，并试图在没有livereload的情况下运行'gulp styles'？首先检查这个工作是否正常。 – soenguy

'watch'正常工作，因为正确的CSS正在输出。运行'gulp-styles'会再次生成正确的CSS，但浏览器不会刷新（但不会执行，因为'serve'任务（未显示）未启动）。 – Fisu

我看不出为什么你会遇到问题。我会尝试的一件事，即使它不是完美的，但可能工作是观看的CSS文件，并建立一个特定的任务只用于重新加载。当你编译sass文件时，css被改变，然后你可以激活'livereload'。在别人有更好的（和工作解决方案）之前，这可能会完成这项工作。这是我想到的第一个技巧，但是你可以环顾其他人使其工作（例如，在样式任务结束时用'gulp.start'回调'scripts'任务）。 – soenguy

作为一种变通方法，以响应soenguy的评论：

创建新任务本身首先调用styles任务：

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

那么对于watch任务改变萨斯手表：

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

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

来源

2014-06-06 09:59:41 Fisu

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

回答

相关问题