小白学前端（一）测试同步神器browser-sync

官方介绍：

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

点我直达官方网站

神器效果预览

有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。

了解完了，心动了，但是安装配置却把我搞残了，懵懵懂懂搞了两天终于配置成功，趁热打铁，记录下坑爹的问题（主要是网上搜了半天，都是只言片语，不够系统，重新把捷径梳理下）：

一、正常安装流程

1. 安装node.js；官网下载后下一步即可;
2. 命令行安装npm install -g browser-sync;
3. 启动命令browser-sync start --server --files "**/*.*"（注：这里一定要注意，一定要在项目目录下输出该命令，否则报错；*表示任意层级的目录下的所有文件都在监测范围内，我是在mac中测试后觉得这个的表达最省事；
4. 打开localhost:3000，完成！（注：建议目录下的首页勇index.html表示，如果没设置多层目用*表示，多半出错）

当然，上面是我的安装流程，简化版，正式文档在这里点我直达官方安装教程。

二、问题汇总

1. node已安装，执行npm install -g browser-sync;卡死，原因是npm下载安装无法连接的安装源；
2. mac下执行npm install -g browser-sync;报错，原因是mac权限问题；
3. 安装成功后，无法启动或测试成功，但出现添加服务的语句，如：

<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；二是没有在当前项目目录中执行语句；

三、解决方案

1. 更换安装源，比如淘宝NPM镜像,更换源的执行命令$ npm install -g cnpm --registry=https://registry.npm.taobao.org;
2. mac安装时真的不想玩儿了，感觉搞了半天原来官网的文档早有解释，按照官方的解决路径，首推安装npm包管理器，没成功；最后按照官方命令一步一步手工执行，成功，大概原理是因为目录和权限的问题，懵懂中，但毕竟搞定了，作为新手的成就感还是fell good！点我放大招;
3. 没啥说的，按我摸索的语句执行即可，记住，在项目目录内执行哦！

---

欢迎交流关注 老油条爱填坑，还有不少职场好文等你分享！