去年五月份接触vue的时候,保存就能看到网页显示修改的效果候真的把我惊呆了,作为一个传统的前端(PHP出身),改完一个List样式就F5,修改,F5,再修改,再F5,真的累人,即使双屏显示器,还是得F5刷新(只是不需要切换而已)。之后一段时间一直在找实时同步的工具、插件,最后找到了这个Browsersync。
前言
先看一下介绍:
前后端都可以使用,目前我监控过前端的文件,后端的没去测试,但是官方也给出方法了。
再看一下官方给出的gif:
开始
这个小工具是基于Node.js,建议升级最新稳定版的node.js -> 点击我跳转Node.js官网。
安装
全局安装(推荐):
npm install -g browser-sync
gulpjs
构建工具安装:
npm install --save-dev browser-sync
启动 BrowserSync
PS:启动后会在本地创建一个服务器的,一般是http://localhost:3000,如果是用cmd启动的就不要关掉,建议用编辑器自带的终端吧。(比如VsCode:Ctrl+~、WebStorm:Alt+F12、Hbuild X:Alt+C,其他的请自行百度或者看工具栏)
静态网站
官方给出的方法:
如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
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"
下面是我自己的方法,简单粗暴,直接 *
browser-sync start --server --files "*"
在根目录下我试了html、css、js都有效,如果有小伙伴们遇到问题,请及时留言哦。
动态网站
官方给出的方法:
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
结尾
其实现在都是前后端分离,小程序,混合APP的天下了,但是某些大型的平台网站还是离不开普通HTML(生产环境中试用,一般大型的平台都是PHP、.net、java后期混编的),去年年底我开发一个小中型的平台,经历F5的恐惧,那时并没有找到BrowserSync这个工具,直接用Node.js开启一个服务器,就不需要用../了,直接用/,但是还避不开F5的麻烦,直到今年找到新的工作,才发现BrowserSync的存在,感谢BrowserSync的开发者❤❤❤。
如果有遇到问题的小伙伴请在下面留言哦!!!
原文链接:https://blog.langting.top/archives/36.html