Question

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

我已经尝试过运行＆＃39; sass＆＃39;任务作为“服务”的依赖关系。但这让事情变得更糟。有人可以指出我正确的方向吗？

//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 文件。

所以流程目前看起来像这样：

scss已更改
监视任务开始用旧编译sass和服务器重新加载页面 css（太快了）
最终css已编译

如果你第二次保存scss，这一切都会再次发生，现在就可以了，因为在第一次运行时刷新了css。

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

scss已更改
监视任务开始编译sass
最终css已编译
服务器任务使用新的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);
});

如何使用gulp-live服务器连接server.notify和[＆＃39; sass＆＃39;]？

1 个答案: