0

我有以下 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

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

谢谢

4

1 回答 1

0

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

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

"scripts": {
  ...
  "serve": "browser-sync start --reload-debounce 200 ...",
  ...
}
于 2017-05-15T10:11:18.320 回答