【nodejs】HTML 实时同步(类似vue实时同步刷新文件->浏览器)

去年五月份接触vue的时候,保存就能看到网页显示修改的效果候真的把我惊呆了,作为一个传统的前端(PHP出身),改完一个List样式就F5,修改,F5,再修改,再F5,真的累人,即使双屏显示器,还是得F5刷新(只是不需要切换而已)。之后一段时间一直在找实时同步的工具、插件,最后找到了这个Browsersync。

前言

先看一下介绍:

【nodejs】HTML 实时同步(类似vue实时同步刷新文件->浏览器)

前后端都可以使用,目前我监控过前端的文件,后端的没去测试,但是官方也给出方法了。

再看一下官方给出的gif:

【nodejs】HTML 实时同步(类似vue实时同步刷新文件->浏览器)

开始

这个小工具是基于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

更多请访问官方网站:BrowserSync