使用node-sass和autprefixer的npm脚本导致浏览器同步运行两次

我有以下npm脚本设置来完成我所有的scss和js linting，编译和捆绑。他们工作，但似乎有改进的余地。使用node-sass和autprefixer的npm脚本导致浏览器同步运行两次

"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文件时，浏览器同步触发两次。这是由于节点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

当然我可以合并这些和更改文件一次，并且有浏览器同步火一次？

感谢

来源

2017-05-14 matt3224

你可以尝试，包括在你的serve脚本BrowserSync --reload-debounce选项/标志，并以毫秒为单位提供一个短暂的延迟适当。

--reload-debounce限制在其浏览器中的频率：重新加载事件可以被发射到连接的客户端

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

来源

2017-05-15 10:11:18 RobC

使用node-sass和autprefixer的npm脚本导致浏览器同步运行两次

回答

相关问题