css - 如何使用 gulp-live 服务器连接 server.notify 和 ['sass' ]？

Question

我似乎无法在我的 gulp 设置中既重新加载服务器又运行 sass。如果我保存我的 styles.scss 文件两次，一切正常。当我只保存一次时，服务器重新加载但 sass 不运行。

我曾尝试将“sass”任务作为“服务”的依赖项来运行，但这让事情变得更糟。有人可以指出我正确的方向吗？

//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. watch 任务开始编译 sass 并且服务器用旧的重新加载页面css(太快了)
3. 最终的 css 已编译

如果您随后第二次保存 scss，这一切都会再次发生，现在一切正常，因为 css 在第一次运行时已刷新。

您应该在服务任务中查看 css 文件。这样，流程将是:

1. scss 改变了
2. watch任务开始编译sass
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);
});