我有以下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
当然我可以合并这些并更改文件一次并使浏览器同步一次?
谢谢
1 回答
您可以尝试在
serve
脚本中包含BrowserSync --reload-debounce选项/标志,并在适当的时候提供短暂的延迟(以毫秒为单位) .