1. 安装 Node.js

BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js
安装适用于Mac OS,Windows和Linux

2. 安装 BrowserSync

您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:

npm install -g browser-sync

您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。

当然您也可以结合gulpjsgruntjs构建工具来使用,在您需要构建的项目里运行下面的命令:

npm install --save-dev browser-sync

3. 启动 BrowserSync

一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:

静态网站

如果您想要监听.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"

我们做了一个静态例子的示范,您可以下载示例包,文件您可以解压任何盘符的任何目录下,不能是中文路径。打开您的命令行工具,进入到BrowsersyncExample目录下,运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。你也可以查看Browsersync静态示例视频

// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"

动态网站

如果您已经有其他本地服务器环境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"

一点建议

我们建议您结合gulp或grunt来使用,我们这里有详细说明Gulp文档Grunt文档。如果您还没有使用gulp或grunt,那么可以通过以上方式创建Browsersync

更多请查看:Browser Sync官网

【Nodejs】HTML 实时同步(类似Vue实时同步刷新文件->浏览器)的更多相关文章

  1. 实时同步inotify+rsync

    目的,要求 nfs储存服务器与backup备份服务器,数据同步,万一nfs储存服务器挂了,数据还在 实时同步备份软件服务 1)inotify 实时同步软件 2)sersync 实时同步软件 实时同步原 ...

  2. centos 配置rsync+inotify数据实时同步2

    一.Rsync服务简介 1. 什么是Rsync 它是一个远程数据同步工具,它在同步文件的同时,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“rsync算法”来使本地和远程两个主机 ...

  3. 5、Sersync实时同步实战

    1.实时同步概述 1.什么是实时同步, 只要当前目录发生变化则会触发一个事件,事件触发后将变化的目录同步至远程服务器. 2.为什么要实时同步, 保证数据的连续性, 减少人力维护成本, 解决nfs单点故 ...

  4. centos文件实时同步inotify+rsync

    我的应用场景是重要文件备份 端口:873,备份端打开即可 下载地址:https://rsync.samba.org/ftp/rsync/src/ 服务端和客户端要保持版本一致 网盘链接:https:/ ...

  5. sersync/lsyncd实时同步

    第一章 sersync/lsync实时同步 1.1 实时同步服务原理/概念 1)需要部署好rsync守护进程服务,实现数据传输 2)需要部署好inotify服务,实现目录中数据变化监控 3)将rsyn ...

  6. 搭建WEB、NFS共享、sersync实时同步以及全网定时备份服务流程

    本次实验的主要目的: 1.搭建web服务,使用nfs服务共享的/data目录挂载到web站点目录上. 2.nfs服务器与backup服务器使用sersync实时同步/data目录中的文件. 3.bac ...

  7. 利用inotify和rsync服务实现数据实时同步

    文件定时同步的实现: 利用rsync结合cron计划任务实现: rsync -av --delete /data/ 10.0.0.12:/back -a:保留文件属性 -v:显示过程 -delete: ...

  8. vue中的watch方法 实时同步存储数据

    watch 监视模式里面有个独特的方法handler 注意要加上deep: true.deep为true时,当对象的key值改变时也监听 当值发生改变被watch监视到触发了事件 开始执行handle ...

  9. 基于nodejs将mongodb的数据实时同步到elasticsearch

    一.前言 因公司需要选用elasticsearch做全文检索,持久化存储选用的是mongodb,但是希望mongodb里面的数据发生改变可以实时同步到elasticsearch上,一开始主要使用ela ...

随机推荐

  1. 一文带你学会国产加密算法SM4的vue实现方案

    前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案.没有看过的小伙伴可以看一下这篇文章. https://www.cnblogs.com/jichi/p/12907453.html 本篇 ...

  2. ql的python学习之路-day5

    文件操作 文件操作流程: 1.打开文件得到文件句柄并赋值变量 2.通过句柄对文件进行操作 3.关闭文件 打开的只是储存在计算机里的文件对象,必须赋值一个变量才能操作,变量通常用f表示,赋值f的文件对象 ...

  3. 最短路径——floyd算法代码(c语言)

    最短路径问题 昨天自己试了试写一下dijkstra的算法博客 dijkstra链接在这← 今天来更floyd算法,感觉非常简单果然暴力才是解决一切的王道 一.总体思想 floyd算法就是每一次从邻接矩 ...

  4. 读懂操作系统(x64)之堆栈帧(过程调用)

    前言 上一节内容我们对在32位操作系统下堆栈帧进行了详细的分析,本节我们继续来看看在64位操作系统下对于过程调用在处理机制上是否会有所不同呢? 堆栈帧 我们给出如下示例代码方便对照汇编代码看,和上一节 ...

  5. Kappa(cappa)系数只需要看这一篇就够了,算法到python实现

    1 定义 百度百科的定义: 它是通过把所有地表真实分类中的像元总数(N)乘以混淆矩阵对角线(Xkk)的和,再减去某一类地表真实像元总数与被误分成该类像元总数之积对所有类别求和的结果,再除以总像元数的平 ...

  6. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

  7. 【JVM】堆区域的一个详细了解并附带调优案例

    话不多说,直接撸图: 1>Eden中通过可达性分析,存活下来的对象直接通过复制算法移动到From区域中,此时该对象的分代年龄加1: 2>当下一次虚拟机进行[Minor GC]时,会同时对[ ...

  8. JAVA反射整理总结

    //1.通过对象获取            Person p=new Person();            Class c=p.getClass();                //2.通过类 ...

  9. corosync+pacemaker实现httpd高可用

    corosync+pacemaker 官方网址 https://clusterlabs.org/ 一.开源高可用了解 OPEN SOURCE HIGH AVAILABILITY CLUSTER STA ...

  10. 浅谈spring依赖注入

    了解依赖注入 前言 先了解下控制反转--转自知乎的国哥 如果一个类A 的功能实现需要借助于类B,那么就称类B是类A的依赖,如果在类A的内部去实例化类B,那么两者之间会出现较高的耦合,一旦类B出现了问题 ...