如何使用gulp-live服務器連接server.notify和['sass']？

Question

我似乎無法重新加載服務器，並在我的gulp設置中運行sass。一切正常，如果我保存我的styles.scss文件兩次。服務器重新加載但sass不運行時，我只保存一次。

我試圖運行'sass'任務作爲'serve'的依賴關係，但這使事情變得更糟。有人可以請指點我正確的方向嗎？

//run sass 
gulp.task('sass', function() { 
    return sass('client/scss/styles.scss') 
    .on('error', function (err) { 
     console.error('Error!', err.message); 
    }) 
    .pipe(gulp.dest('client/css/')); 
}); 

//run sass again when file is updated 
gulp.task('watch', function(){ 
    gulp.watch('client/scss/*.scss', ['sass']); 
}); 

//reload server when sass file updates 
gulp.task('serve', function() { 
    var server = gls.new('server.js'); 
    server.start(); 
    gulp.watch(['client/scss/*.scss'], server.notify); 
    gulp.watch('server.js', server.start); 
}); 

//initial run 
gulp.task('default', ['serve', 'sass', 'watch']); 

Answer 1

的問題是，你正在觀看的服務任務裏你SCSS文件。

所以流目前看起來是這樣的：

1. SCSS改變
2. 手錶任務開始編制青菜和服務器重新加載頁面與舊 CSS（爲時過早）
3. 最終CSS編譯

如果您第二次保存scss，這一切都會再次發生，現在確定，因爲在第一次運行期間刷新了css。

您應該在服務任務中觀看css文件。這樣，流動將是：

1. SCSS改變
2. 手錶任務開始編制青菜
3. 最終CSS編譯
4. 服務器任務會重新加載新的CSS

因此，解決辦法頁面是簡單地改變這樣的服務任務：

gulp.task('serve', function() { 
    var server = gls.new('server.js'); 
    server.start(); 
    gulp.watch(['client/css/*.css'], server.notify); 
    gulp.watch('server.js', server.start); 
});