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更改）

回答

相關問題