小白学前端（一）测试同步神器browser-sync
2019-04-12 本文已影响0人
老油条爱填坑
官方介绍：
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
点我直达官方网站
神器效果预览
有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
了解完了，心动了，但是安装配置却把我搞残了，懵懵懂懂搞了两天终于配置成功，趁热打铁，记录下坑爹的问题（主要是网上搜了半天，都是只言片语，不够系统，重新把捷径梳理下）：
一、正常安装流程
- 安装node.js；
官网下载后下一步即可; - 命令行安装
npm install -g browser-sync; - 启动命令
browser-sync start --server --files "**/*.*"（注：这里一定要注意，一定要在项目目录下输出该命令，否则报错；*表示任意层级的目录下的所有文件都在监测范围内，我是在mac中测试后觉得这个的表达最省事； - 打开
localhost:3000，完成！（注：建议目录下的首页勇index.html表示，如果没设置多层目用*表示，多半出错）
当然，上面是我的安装流程，简化版，正式文档在这里点我直达官方安装教程。
二、问题汇总
- node已安装，执行
npm install -g browser-sync;卡死，原因是npm下载安装无法连接的安装源； - mac下执行
npm install -g browser-sync;报错，原因是mac权限问题； - 安装成功后，无法启动或测试成功，但出现添加服务的语句，如：
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST", location.hostname));
//]]></script>
[Browsersync] Access URLs:
----------------------------------
UI: http://localhost:3001
----------------------------------
UI External: http://localhost:3001
----------------------------------
原因有两个，一是执行时漏了server只是简写browser-sync start --files；二是没有在当前项目目录中执行语句；
三、解决方案
- 更换安装源，比如淘宝NPM镜像,更换源的执行命令
$ npm install -g cnpm --registry=https://registry.npm.taobao.org; - mac安装时真的不想玩儿了，感觉搞了半天原来官网的文档早有解释，按照官方的解决路径，首推安装npm包管理器，没成功；最后按照官方命令一步一步手工执行，成功，大概原理是因为目录和权限的问题，懵懂中，但毕竟搞定了，作为新手的成就感还是fell good！点我放大招;
- 没啥说的，按我摸索的语句执行即可，记住，在项目目录内执行哦！
