npm scripts 助力前端开发,实时刷新

browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器。

node-sass来实时编译scss文件。

parallelshell来异步执行npm script命令。

先安装上述的node工具

npm install -g 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\""
}

需要注意的是工具browser-sync监控的文件之间需要用", "隔开,否则监控失效。

二、运行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/

关于本文如您有任何想法和意见,欢迎与我们联系,邮箱地址zhi@uqugu.com
您对本文有什么看法,喜欢或者不喜欢都可以发表意见。