一、准备
nodejs安装教程:https://blog.csdn.net/FED_AF/article/details/105747632)
二、安装
npm install -g browser-sync
三、用法
# 启动监听服务器,执行前要先切换到项目路径,**代表递归监听,--no-open启动时不触发默认浏览器
browser-sync start --no-open --server --files "**/*.html, **/*.css, **/*.js"
# browser-sync start --server --files "**" 监听当前路径下所有文件
# browser-sync start --server --files "**/*.html" 监听当前路径下所有html文件
# browser-sync start --server --files "**" --index "src/index.html" 监听当前路径下所有文件,并指定当前路径/src/index.html为索引文件(入口)
[Browsersync] Access URLs:
----------------------------------------
Local: http://localhost:3000 /*本地监听*/
External: http://192.168.188.128:3000 /*外部监听*/
----------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
[Browsersync] Reloading Browsers...
之后就可以在通过3000端口访问项目了。
四、补充
- 启动browser-sync前要切换到项目根路径
- 远程访问的话记得browser-sync端关闭防火墙或开放TCP3000端口
- 通过3001端口访问browser-sync的配置页面
- 项目主页默认是index.html
- 多终端同步还没玩过
- 官方文档说支持IE8+,实测不支持IE8
- 后来发现webpack的devserver完全可以取代browser-sync,但比起devserver,browser-sync配置简单,且容易上手