browsersync使用

SimonMa 发布于2019-08-01 16:36 / 3451人阅读

记得在学习Nodejs的时候有一个很好的Node模块吸引了我，它能对我修改的某一个css, js 或者目录的变化进行监控，然后我们可以通过浏览器来查看监听的服务下文件发生的变化！
下面我来简单的介绍一下它当然我们也可以去官网直接找对应的使用文档，官网也是讲解的非常详细的

官网地址：browsersync

下面是我对Browersync使用的一个过程，希望对新手有点用处

首先BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，也许您需要先安装一下Node.js
npm库中安装 BrowserSync :

全局安装

//Mac下全局安装请在命令前加sudo
npm install -g browser-sync

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

npm install --save-dev browser-sync

启动browsersync 也非常简单

比如我们要对这个vue项目中的index.html 及 index.js进行检测进行监测命令如下：

监控文件index.html 与index.js 文件的变化

browser-sync start --server -no-notify --file="index.html,index.js"

如果有更深层次文件的监测可以使用如下命令：

browser-sync start --server --files "**/*.css, **/*.html"

当然我们也可以对我们自己的项目开启代理监测比如php类的项目：

在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。

browser-sync start --poerxy "www.fanxiao2.net" "**/."

本文转载至范骏的博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50630.html

实时编辑

摘要：静态服务器代理你的域名或注入通过流的方式创建任务流程这样您就可以在您的任务完成后调用，所有的浏览器将被告知的变化并实时更新因为只在乎您的在编译完成后注意后调用重载。方法一使用Google Chrome DevTools 方法二工作区Browsersync 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，也许您需要先...

wenshi11019 2019-08-23 15:34 评论0 收藏0
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

摘要：打开您的命令行工具，进入到目录下，运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址，这一切都会在命令行工具里显示。自己写标签：实时刷新、免F5、 gulp + browser-sync 开门见山，首先讲明一下本文的定位吧：写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸...

villainhr 2019-08-21 10:47 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 评论0 收藏0
BrowserSync -- 你值得拥有的多浏览器测试工具

摘要：是一个同步多浏览器页面测试工具。有了它，你不用在多个浏览器间来回切换，不断刷新来看效果了。更神奇的是你在一个浏览器中滚动页面点击按钮等用户行为也会同步到每个浏览器中。官方的视频演示。 BrowserSync 是一个同步多浏览器页面测试工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...

ZweiZhao 2019-05-29 16:20 评论0 收藏0