我似乎无法在我的 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']);
最佳答案
问题是您正在服务任务中查看您的 scss 文件。
所以目前的流程是这样的:
- scss 改变了
- watch 任务开始编译 sass 并且服务器用旧的重新加载页面 css(太快了)
- 最终的 css 已编译
如果您随后第二次保存 scss,这一切都会再次发生,现在一切正常,因为 css 在第一次运行时已刷新。
您应该在服务任务中查看 css 文件。这样,流程将是:
- scss 改变了
- watch任务开始编译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);
});
关于css - 如何使用 gulp-live 服务器连接 server.notify 和 ['sass' ]?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29460009/