npm scripts 助力前端開發，實時刷新瀏覽器

用browser-sync或者lite-server來監控文件的改變，當文件改變時，就自動刷新瀏覽器。

用node-sass來實時編譯scss文件。

用parallelshell來異步執行npm script命令。

先安裝上述的node工具

npm install browser-sync

一、首先新建npm的package.json

package.json一般有如下的結構和選項

{
"name": "about",
"version": "1.0.0",
"scripts": {
},
"devDependencies":{

}
}

devDependencies代表依賴的node工具，scripts代表npm scripts命令。

"scripts": {
    "scss": "node-sass -w scss -o css",
    "serve": "browser-sync start --server --files \"css/*.css, *.html\"",
    "dev": "parallelshell \"npm run serve\" \"npm run scss\""
}

二、運行npm script命令

> npm run dev

• npm run serve利用node-sass監控scss文件夾中.scss、.sass文件的變化，當這類文件有變化時，就編譯到css文件夾中。

• npm run serve利用browser-sync監控.css文件，.html文件，當這類文件有變化時，就自動刷新瀏覽器。

三、還可以運行更多的npm scripts命令

例如利用typescript編譯.ts文件。

參考: https://css-tricks.com/why-npm-scripts/