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端口的服务器代理我们本地服务器