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/