本文主要是介绍browser-sync的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
您还在为本地的静态页面在手机上浏览而烦恼么？
您还在为页面代码修改了手机上不能实时刷新而苦恼么？
那就看看browser-sync吧
官网地址：http://www.browsersync.cn/#install
browser-sync使用环境必须依赖于node（这里不介绍node的安装了）
在静态页面的使用：
1.命令行 npm install browser-sync -g
2.命令行找到你对应文件的目录，例如你的文件在 E盘 test目录，html目录下的index.html
需要进入到E:\test\html，命令行输入browser-sync start --server --files "index.html";即可启动服务
默认启动地址为http://localhost:3000，只需要在浏览器输入http://localhost:3000/index.html即可访问
手机端访问可将localhost改成同局域网上的ip地址。
3.改动一下index.html的代码，保存，自动刷新了，是不是很方便，再也不用担心改代码还一个个手动刷新了
注意：可以监听某个目录下的所有特定文件，如browser-sync start --server --files "css/*.css"
* 如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件
// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"动态网站
如果您已经有其他本地服务器环境,例如我用webstorm打开静态页面就会自己挂载在它的内置服务器上
例如的我：http://localhost:8000/Vue/shareCard/activity.html
这里的8000端口是我自己在webstorm上设置的，默认好像是63342，5位数的端口在移动端页面打不开，所有我自己
修改为了8000，修改步骤（webstorm File=>setting=>build,execution,Deployment=>Debugger=>port）
这时候命令行可以这样输入：browser-sync start --proxy "你同局域网电脑ip或者域名" --files "文件"
我的给大家参考：1.browser-sync start --proxy "172.22.200.86:8000/" --files "activity.html"
这时候电脑自动打开localhost:3000/我们需要手动加上'/Vue/shareCard/activity.html'即可访问
2.browser-sync start --proxy "172.22.200.86:8000/Vue/shareCard" --files "activity.html"
这时候电脑自动打开localhost:3000/Vue/shareCard/"我们需要手动加上'activity.html'即可访问
总结：其实browser-sync在这里就起到一个代理的作用，用它启动的3000端口的服务器代理我们本地服务器
这篇关于browser-sync的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
