GULP и BrowserSync не обновляет .scss на лету
Столкнулся с проблемой, имею HTML и SCSS файлы, сборка настроена, но есть следующий баг.
Если изменяю HTML (напр меняю заголовок страницы), нажимаю CTRL+S, наблюдатель видит изменения и обновляет контент в окне браузера. Ок
Если изменяю SCSS (напр меня цвет ссылки с #fff на #000), нажимаю CTRL+S, наблюдатель молчит и в окне браузер тоже тишина.
Если остановить GULP и снова запустить (терминал VS Code), то Все изменения отображаются в браузере.
Как сделать так, что бы при сохранении scss в исходниках, отлавливалось изменение и выводилось в окно браузера без принудительного перезапуска gulp?
Для информативности фрагмент gulpfile.js
import { scss } from "./gulp/tasks/scss.js";
###
function watcher(){
gulp.watch(path.watch.scss, scss);
}
###
const mainTasks = gulp.parallel(copy, html, scss, js, images);
// Построение сценариев выполнения задач
const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));
// Выполнения сценария поумолчанию
gulp.task('default', dev);
Ниже, фрагмент путей
// Получаем имя папки проекта
import * as nodePath from 'path';
const rootFolder = nodePath.basename(nodePath.resolve());
const buildFolder = `./dist`;
const srcFolder = `./src`;
export const path = {
build: {
css: `${buildFolder}/css/`
},
src: {
scss: `${srcFolder}/scss/style.scss`
},
watch: {
scss: `${srcFolder}scss/**/*.scss`
}
А это фрагмент самой задачи с пайпами:
const sass = gulpSass(dartSass);
export const scss = () => {
return app.gulp.src(app.path.src.scss, { sourcemaps: true })
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(rename({
extname: '-min.css'
}))
.pipe(app.gulp.dest(app.path.build.css))
.pipe(app.plugins.browsersync.stream());
}
В чем может быть причина? При необходимости я Апдейтну код, которого не хватает для разбора. Позволю себе напомнить, что изменения работают если gulp остановит->запустить