How can I connect server.notify and ['sass'] using gulp-live server? - css

Question

I can't seem to both reload the server and run sass in my gulp setup. Everything works fine if I save my styles.scss file twice. The server reloads but sass does not run when I only save once.
I've tried to run the 'sass' task as a dependency of 'serve' but that made things worse. Can someone please point me in the right direction?
//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

The problem is that you're watching your scss files inside the serve task.
So the flow currently looks like this:
scss changed
watch task starts compiling sass AND server reloads page with old
css (too soon)
final css is compiled
If you then save scss for the second time, this all happens again and it's now OK because the css was refreshed during the first run.
You should be watching css files in the serve task. This way, the flow will be:
scss changed
watch task starts compiling sass
final css is compiled
server task reloads page with new css
So the solution is to simply change the serve task like this:
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);
});