Как подключить server.notify и ['sass'] с помощью gulp-live server?

Question

Я не могу как перезагрузить сервер, так и запустить sass в настройке gulp. Все работает отлично, если я дважды сохраняю файл 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. СКС изменил
2. часы задача начинает сбор Sass И сервер перезагрузил страницу со старой CSS (слишком рано)
3. окончательный CSS компилируется

Если вы затем сохраните scss во второй раз, все это произойдет снова, и теперь все в порядке, потому что css был обновлен во время первого запуска.

Вы должны наблюдать css файлов в задании. Таким образом, поток будет:

1. СКС изменил
2. часы задача начинается составление 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); 
});