啄木鸟软件测试培训网：www.3testing.comphp
什么是browsersync？css
browsersync能够实时监控代码文件的修改（html、css、js、less等等），文件被保存发生变化的时候browsersync能够自动刷新页面，免去手动F5的麻烦步骤。更重要的是，browsersync利用nodejs的特性建立一个临时的可访问的服务器，方便在局域网内使用手机，平板电脑等其余移动设备进行实时的调试。html
sync-demo.gif前端
scroll-demo.gifnode
如何安装browsersync？python
1.安装nodejslinux
https://nodejs.org 登陆nodejs官方网站下载最新的nodejs，不管是mac os windows或者linux nodejs都有很好的安装方式。npm
2.安装browsersyncjson
打开命令提示符或者terminal输入windows
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的监听命令。
顾翔凡言：
想作软件测试，最好先去作两到五年开发
啄木鸟软件测试培训中心，主打五门课：
初级：
1，你也想成为软件测试工程师吗～软件测试基础教程
中级：
2，软件测试工程师必须掌握的技能～软件测试设计方法实战。
高级：
3，让你的程序跑得更快～软件性能测试
4，让你找出更多的bug～探索式软件测试
5，让用户迷上你的产品～用户体验式测试
本文分享自微信公众号 - 软件测试培训（iTestTrain）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。