Browsersync浏览器同步测试工具

学习啦在线学习网 　　browsersync可以实时监控代码文件的修改(html、css、js、less等等)，文件被保存发生变化的时候browsersync可以自动刷新页面，免去手动F5的麻烦步骤。下面是学习啦小编跟大家分享的是Browsersync浏览器同步测试工具，欢迎大家来阅读学习。

　　Browsersync浏览器同步测试工具

学习啦在线学习网 　　什么是browsersync?

学习啦在线学习网 　　browsersync可以实时监控代码文件的修改(html、css、js、less等等)，文件被保存发生变化的时候browsersync可以自动刷新页面，免去手动F5的麻烦步骤。更重要的是，browsersync利用nodejs的特性创建一个临时的可访问的服务器，方便在局域网内使用手机，平板电脑等其他移动设备进行实时的调试。

　　sync-demo.gif

　　scroll-demo.gif

学习啦在线学习网 　　如何安装browsersync?

　　1.安装nodejs

学习啦在线学习网 　　http://nodejs.org 登录nodejs官方网站下载最新的nodejs，无论是mac os windows或者linux nodejs都有很好的安装方式。

　　2.安装browsersync

　　打开命令提示符或者terminal输入

　　npm install -g browser-sync

　　进行全局安装，这样就可以在任何一个项目上使用该工具。

学习啦在线学习网 　　如何使用browsersync?

　　静态网站(前端)

　　如果是静态网站,在命令提示符的情况下直接cd到静态网站的根目录

　　browser-sync start --server --files **

学习啦在线学习网 　　browsersync就会启动并且打开默认的浏览器，显示项目学习啦在线学习网。

学习啦在线学习网 　　**表示的是监听目录下所有文件。

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

学习啦在线学习网 　　css/.css, .html表示监听css文件夹下所有的css文件，以及根目录下的所有html文件。

学习啦在线学习网 　　动态网站(后台)

学习啦在线学习网 　　如果是动态网站比如php或者python就不能用browsersync自带的服务器启动，需要使用代理模式

　　browser-sync start --proxy "主机名" "css/*.css"

学习啦在线学习网 　　browser-sync start --proxy "jianshu.com" "css/*.css"

　　配合npm开发使用

学习啦在线学习网 　　每次在使用browser-sync的时候打命令太长了非常不方便，为了方便在项目中使用可以结合package.json使用。

　　具体方法

学习啦在线学习网 　　1.进入到项目根目录

学习啦在线学习网 　　npm init

学习啦在线学习网 　　创建package.json文件。

学习啦在线学习网 　　2.打开package.json文件添加配置。

　　Paste_Image.png

学习啦在线学习网 　　在scripts里面填写

　　"dev":"browser-sync start --server --files **"

　　保存。

学习啦在线学习网 　　3.打开命令提示符进入到项目根目录

　　输入

学习啦在线学习网 　　npm run dev

学习啦在线学习网 　　就可以启动browsersync的监听命令。