在开发前端项目的时候,我们经常需要,把页面放到
服务器
中的“容器”中。比如
VueJS
,在开发VueJS
时,我们要把页面放到“服务器”中,以便我们对程序的调试。经常需要自启服务器。这样非常麻烦,不光繁琐,而且降低了开发效率。
介于此,我们可以使用browser-sync(浏览器同步测试工具)
开发模块,来帮助我们实现启动服务器
,并对项目中的html、css、js文件进行监听
,每当这些文件改动,便刷新浏览器。
这样不光解决了服务器
中运行的不便,更提高了开发效率。
0、初始化项目
npm init -y
1、安装browser-sync
npm i --save-dev browser-sync
#注意,这里是--save-dev,因为其只是开发工具
3、配置browser-sync
打开项目中的package.json
,在其中的scripts
项中添加字段如下。
"dev":"browser-sync start --server --files \"*.html, css/*.css ,js/*.js\"",
4、启动服务器
npm run dev
启动后,会自动打开首页
此时,每次修改项目中的html\css\js
文件后,浏览器都会自动刷新。并展示新的效果。