多端浏览器同步调试工具：browserSync与webpack的结合

天气越来越冷，我刚买的毛线手套在今中午骑ofo单车时候都快有点顶不住了，问我为什么中午出去骑单车，因为我和我哥哥约了一顿宽板凳火锅。很久没吃火锅了，果断骑车20分钟去约饭，回来时候心满意足，边骑车边想，不如做一套针对ofo共享单车的共享车锁密码应用，每次使用完单车后顺手上传车牌号和密码，反正每辆车都是固定密码的，以后大家用车就可以先通过车牌查询有无对应的密码共享出来，这才是真正的共享经济嘛。哈哈，不过这种事也就是想想罢了，就像当初12306网站的登录注册都存在着sql注入漏洞，但是也没有人敢去搞一搞，有些事还是想想就够了。酒足饭饱，回到工位，还是趁热乎把昨天说的尽快落实一下吧...

1. 先说说使用背景

说起前端开发，不得不说现在如火如荼的移动端H5，从朋友圈广泛传播的各种酷炫活动页到现在各大App应用中内嵌的移动端H5网页，都属于移动端网页的开发。但是作为一名前端开发者，实际在开发移动端页面的时候，真机调试是一个很头疼的问题，因为移动端页面不像PC端页面那样能直接用电脑浏览器双击打开 *.html 文件来浏览调试，最最笨的方法就是将正在开发中的文件通过数据线从电脑拷贝到手机，然后手机打开html文件预览。当然这种非人类的办法效率实在是极其低下也很难以启齿...所以我们要想一个办法，能做到十分省时省力的就能在手机上预览甚至调试到我们正在开发的移动端页面。
记得去年毕业进入我的上家公司，当时的我一问三不知，我的导师组长引领了我一年的成长之路，这一年多我学会了很多，很感激这一年来公司给我提供的成长环境，和那一堆给予我帮助的同事。言归正传，刚来公司首先要做的就是熟悉公司的开发模式，经过组长给我的讲解，我明白了我们的大概开发流程，我们的工程框架用的是fis || grunt，我们在本地开发并编译好代码文件，同时会运行一个脚本，在每次保存本地代码时，脚本会把编译好的代码文件push到我们每个人配置好的开发机服务器上，同时对应一个个人测试域的url，在内网里访问这个url就可以访问我们正在开发的页面，这样就实现了边开发，手机通过一个url就可以实时边访问页面了。但是这种很大工程化流程在我们自己私下想搭环境时候就不好搞了，最起码我搞不来。
因为当时我们的是用git进行代码管理的，所以我又想可以通过git来同步我的代码，生成一个url来访问，就是每次还得git push上传代码，也是有点繁琐。
后来现在的同事给我推荐了browserSync，一头雾水的我查了一下，不查不知道，一查惊呆了，世间还有这等神器！官网首页的几句话就把我深深吸引住了，如获至宝，于是研究了一下，起初不依赖什么框架就是在外面单纯的跑脚本，没问题，很强大，后来又把它集成到了gulp里，但是后来我决定放弃刚用了一次的gulp，转投webpack，幸运的是，webpack也很强大地支持browserSync，喜大普奔。
好了，废话了这么多，其实在webpack中使用browserSync也很简单，就是在上篇文章《webpack从安装到起飞》中提到的webpack.config.js中配置一下就好了，那么我们先从头说一下browserSync是个什么东东。

2. 初识browserSync

正如标题所说，它是一个省时的浏览器同步测试工具，借用一下官方的介绍：

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

Browsersync

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

Browsersync

看到这里，我们就知道了，是它，是它，就是它，它就是我一直在寻找的最优解决方案——Browsersync。

3. Browsersync的基本使用

对于Browsersync的用法，我不在用自己的话描述了，官方的文档说的很详细很好，这里就直接引用了：

1. 安装 Node.js
   BrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js 安装适用于Mac OS，Windows和Linux。

2. 安装 BrowserSync
   您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：
   npm install -g browser-sync
   您告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目(任何目录)中使用。
   当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:
   npm install --save-dev browser-sync
3. 启动 BrowserSync
   一个基本用途是，如果您只希望在对某个css
   文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：
   静态网站
   如果您想要监听.css
   文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。
   // --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/\.css"
   如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html
   文件
   // --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/\.css, \.html"// 如果你的文件层级比较深，您可以考虑使用 \\（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 browser-sync start --server --files "\\/\.css, \\/\.html"
   我们做了一个静态例子的示范，您可以下载示例包，文件您可以解压任何盘符的任何目录下，不能是中文路径。打开您的命令行工具，进入到BrowsersyncExample目录下，运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。你也可以查看Browsersync静态示例视频
   // 监听css文件 browser-sync start --server --files "css/\.css"// 监听css和html文件 browser-sync start --server --files "css/\.css, \.html"
   动态网站
   如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
   // 主机名可以是ip或域名browser-sync start --proxy "主机名" "css/\.css"
   在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
   browser-sync start --proxy "Browsersync.cn" "css/\.css"
   一点建议
   我们建议您结合gulp或grunt来使用，我们这里有详细说明Gulp文档、Grunt文档。如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync

到此为止，我们基本可以脱离或者依赖gulp||grunt来使用browsersync了，比如在gulp中，我们在gulpfiles.js中配置好了browsersync，执行gulp watch，就会直接调起browsersync服务，我们在命令行可以看到PC和移动端对应的url访问地址，值得注意的是，browsersync会默认寻找根目录下的index.html文件，有则执行，无则报错，如果我们想访问目录下的其他文件，只需要在url后面加上相应的路径地址即可。
比如：http://localhost:3000/app/index.html
那么我们如何在webpack中使用browserSync呢，官方文档只给了gulp和grunt的集成方式，接下来看看browsersync在webpack中怎么配置。

4. webpack中的browsersync

还是找到我们上一个文件项目，打开webpack.config.js备用。

依然打开命令行终端，进入项目根目录，执行
npm install browser-sync-webpack-plugin --save-dev 来安装browsersync插件
安装完毕，package.json中也显示了安装完毕后的依赖项：
"extract-text-webpack-plugin": "^1.0.1",

接下来就是配置webpack.config.js了，
首先引入插件：var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
然后再 plugins 配置项中配置：

new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        files: '',
        server: {
            //指定服务器启动根目录
            baseDir: './'
        }
})

基本这么一配置，就ok了，似不似很简单，似不似很开熏...
然后我们直接 webpack -w 就发现浏览器自动打开了，默认访问了http://localhost:3000/
我们根据要访问的文件路径，补充好url后续，就可以开心的开发了，你会发现每次一保存代码，浏览器就自动刷新，不管是PC端还是移动端，而且在一端滚动页面，另一端也会同步滚动，感觉屌爆了。
好了，这么神奇的东西就这样为我们所用了。开心。

5. 最后

这次编辑文章用的 markDown语法，简直比昨天用的富文本不能再好了，程序员写文档神器，虽然之前我组长就让我写，但是我懒啊，没写，现在还是用到了，所以说要学习的地方还是很多啊小伙子。
今天过得好快，下一个项目也要来了，坐等...
886我要准备下班了，今晚还要去健身房差点忘了…
对了，接下来会记录一下webpack+vue的组件模块化开发。