使用 node-sass 和 autoprefixer 的 npm 脚本导致 browsersync 运行两次答案

【问题标题】：npm scripts using node-sass and autprefixer cause browser-sync to run twice使用 node-sass 和 autoprefixer 的 npm 脚本导致 browsersync 运行两次
【发布时间】：2017-10-13 09:30:15
【问题描述】：

我有以下 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 运行并更改了文件，然后 autoprefixer 运行并更改了相同的文件。（以下输出以确保完整性）

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

我当然可以合并这些并更改一次文件并让浏览器同步触发一次吗？

谢谢

【问题讨论】：

标签： bash node-sass autoprefixer npm-scripts

【解决方案1】：

您可以尝试在您的 serve 脚本中包含 BrowserSync --reload-debounce 选项/标志，并提供适当的短延迟（以毫秒为单位）。

--reload-debounce 限制 browser:reload 事件可以发送到连接的客户端的频率

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

【讨论】：