如何使用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); 
});