Скрипты npm, использующие node-sass и autprefixer, запускают синхронизацию браузера дважды

Question

У меня есть следующие настройки скриптов npm, чтобы выполнять все мои scss и js linting, компиляцию и сборку. Они работают, однако, кажется, есть место для улучшения.

"scripts": {
  "lint-scss": "stylelint ./styles/**/*.scss --cache --syntax scss",
  "scss": "node-sass --omit-source-map-url --recursive --output-style compressed --output ./styles ./styles",
  "autoprefixer": "postcss --use autoprefixer --replace ./styles/style.css --no-map",
  "build:css": "yarn run lint-scss --silent | yarn run scss --silent | yarn run autoprefixer --silent",
  "serve": "browser-sync start --https --no-notify --proxy 'project.local' --files './styles/**/*.css, ./views/**/*.php, ./**/*.html, !node_modules/**/*.html'",
  "watch:css": "onchange './styles/**/*.scss' -- yarn run build:css --silent",
  "watch:all": "parallelshell 'yarn run serve --silent' 'yarn run watch:css --silent'",
  "postinstall": "yarn run watch:all --silent"
}

В настоящее время, когда я наблюдаю за изменениями и сохраняю файл scss, синхронизация браузера запускается дважды. Это происходит из-за того, что node-sass работает и изменяет файл, затем запускается автоматический префикс и изменяет тот же файл. (Вывод ниже для полноты)

Rendering Complete, saving .css file...
Wrote CSS to /Users/Matt/Sites/Project/styles/style.css
Wrote 1 CSS files to /Users/Matt/Sites/Project/styles
[BS] File event [change] : styles/style.css
✔ Finished styles/style.css (192ms)
[BS] File event [change] : styles/style.css

Конечно, я могу объединить их и изменить файл один раз и запустить синхронизацию браузера один раз?

Спасибо

Answer 1

Вы можете попробовать включить опцию / флаг BrowserSync --reload-debounce в свой serve сценарий и предоставить короткую задержку в зависимости от обстоятельств в миллисекундах.

--reload-debounce Ограничьте частоту, с которой браузер: события перезагрузки могут передаваться подключенным клиентам

"scripts": {
  ...
  "serve": "browser-sync start --reload-debounce 200 ...",
  ...
}