天氣越來(lái)越冷，我剛買(mǎi)的毛線手套在今中午騎ofo單車(chē)時(shí)候都快有點(diǎn)頂不住了，問(wèn)我為什么中午出去騎單車(chē)，因?yàn)槲液臀腋绺缂s了一頓寬板凳火鍋。很久沒(méi)吃火鍋了，果斷騎車(chē)20分鐘去約飯，回來(lái)時(shí)候心滿(mǎn)意足，邊騎車(chē)邊想，不如做一套針對(duì)ofo共享單車(chē)的共享車(chē)鎖密碼應(yīng)用，每次使用完單車(chē)后順手上傳車(chē)牌號(hào)和密碼，反正每輛車(chē)都是固定密碼的，以后大家用車(chē)就可以先通過(guò)車(chē)牌查詢(xún)有無(wú)對(duì)應(yīng)的密碼共享出來(lái)，這才是真正的共享經(jīng)濟(jì)嘛。哈哈，不過(guò)這種事也就是想想罷了，就像當(dāng)初12306網(wǎng)站的登錄注冊(cè)都存在著sql注入漏洞，但是也沒(méi)有人敢去搞一搞，有些事還是想想就夠了。酒足飯飽，回到工位，還是趁熱乎把昨天說(shuō)的盡快落實(shí)一下吧...
1. 先說(shuō)說(shuō)使用背景
說(shuō)起前端開(kāi)發(fā)，不得不說(shuō)現(xiàn)在如火如荼的移動(dòng)端H5，從朋友圈廣泛傳播的各種酷炫活動(dòng)頁(yè)到現(xiàn)在各大App應(yīng)用中內(nèi)嵌的移動(dòng)端H5網(wǎng)頁(yè)，都屬于移動(dòng)端網(wǎng)頁(yè)的開(kāi)發(fā)。但是作為一名前端開(kāi)發(fā)者，實(shí)際在開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候，真機(jī)調(diào)試是一個(gè)很頭疼的問(wèn)題，因?yàn)橐苿?dòng)端頁(yè)面不像PC端頁(yè)面那樣能直接用電腦瀏覽器雙擊打開(kāi) *.html 文件來(lái)瀏覽調(diào)試，最最笨的方法就是將正在開(kāi)發(fā)中的文件通過(guò)數(shù)據(jù)線從電腦拷貝到手機(jī)，然后手機(jī)打開(kāi)html文件預(yù)覽。當(dāng)然這種非人類(lèi)的辦法效率實(shí)在是極其低下也很難以啟齒...所以我們要想一個(gè)辦法，能做到十分省時(shí)省力的就能在手機(jī)上預(yù)覽甚至調(diào)試到我們正在開(kāi)發(fā)的移動(dòng)端頁(yè)面。
記得去年畢業(yè)進(jìn)入我的上家公司，當(dāng)時(shí)的我一問(wèn)三不知，我的導(dǎo)師組長(zhǎng)引領(lǐng)了我一年的成長(zhǎng)之路，這一年多我學(xué)會(huì)了很多，很感激這一年來(lái)公司給我提供的成長(zhǎng)環(huán)境，和那一堆給予我?guī)椭耐隆Ｑ詺w正傳，剛來(lái)公司首先要做的就是熟悉公司的開(kāi)發(fā)模式，經(jīng)過(guò)組長(zhǎng)給我的講解，我明白了我們的大概開(kāi)發(fā)流程，我們的工程框架用的是fis || grunt，我們?cè)诒镜亻_(kāi)發(fā)并編譯好代碼文件，同時(shí)會(huì)運(yùn)行一個(gè)腳本，在每次保存本地代碼時(shí)，腳本會(huì)把編譯好的代碼文件push到我們每個(gè)人配置好的開(kāi)發(fā)機(jī)服務(wù)器上，同時(shí)對(duì)應(yīng)一個(gè)個(gè)人測(cè)試域的url，在內(nèi)網(wǎng)里訪問(wèn)這個(gè)url就可以訪問(wèn)我們正在開(kāi)發(fā)的頁(yè)面，這樣就實(shí)現(xiàn)了邊開(kāi)發(fā)，手機(jī)通過(guò)一個(gè)url就可以實(shí)時(shí)邊訪問(wèn)頁(yè)面了。但是這種很大工程化流程在我們自己私下想搭環(huán)境時(shí)候就不好搞了，最起碼我搞不來(lái)。
因?yàn)楫?dāng)時(shí)我們的是用git進(jìn)行代碼管理的，所以我又想可以通過(guò)git來(lái)同步我的代碼，生成一個(gè)url來(lái)訪問(wèn)，就是每次還得git push上傳代碼，也是有點(diǎn)繁瑣。
后來(lái)現(xiàn)在的同事給我推薦了browserSync，一頭霧水的我查了一下，不查不知道，一查驚呆了，世間還有這等神器！官網(wǎng)首頁(yè)的幾句話(huà)就把我深深吸引住了，如獲至寶，于是研究了一下，起初不依賴(lài)什么框架就是在外面單純的跑腳本，沒(méi)問(wèn)題，很強(qiáng)大，后來(lái)又把它集成到了gulp里，但是后來(lái)我決定放棄剛用了一次的gulp，轉(zhuǎn)投webpack，幸運(yùn)的是，webpack也很強(qiáng)大地支持browserSync，喜大普奔。
好了，廢話(huà)了這么多，其實(shí)在webpack中使用browserSync也很簡(jiǎn)單，就是在上篇文章《webpack從安裝到起飛》中提到的webpack.config.js中配置一下就好了，那么我們先從頭說(shuō)一下browserSync是個(gè)什么東東。
2. 初識(shí)browserSync
正如標(biāo)題所說(shuō)，它是一個(gè)省時(shí)的瀏覽器同步測(cè)試工具，借用一下官方的介紹：
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面。更重要的是** Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試**。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。
Browsersync
有了它，您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來(lái)回切換，頻繁的刷新頁(yè)面。更神奇的是您在一個(gè)瀏覽器中滾動(dòng)頁(yè)面、點(diǎn)擊等行為也會(huì)同步到其他瀏覽器和設(shè)備中，這一切還可以通過(guò)可視化界面來(lái)控制。
Browsersync
看到這里，我們就知道了，是它，是它，就是它，它就是我一直在尋找的最優(yōu)解決方案——Browsersync。
3. Browsersync的基本使用
對(duì)于Browsersync的用法，我不在用自己的話(huà)描述了，官方的文檔說(shuō)的很詳細(xì)很好，這里就直接引用了：
- 安裝 Node.js
BrowserSync是基于Node.js的, 是一個(gè)Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js 安裝適用于Mac OS，Windows和Linux。
- 安裝 BrowserSync
您可以選擇從Node.js的包管理（NPM）庫(kù)中 安裝BrowserSync。打開(kāi)一個(gè)終端窗口，運(yùn)行以下命令：
npm install -g browser-sync
您告訴包管理器下載BrowserSync文件，并在全局下安裝它們，您可以在所有項(xiàng)目(任何目錄)中使用。
當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來(lái)使用，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:
npm install --save-dev browser-sync - 啟動(dòng) BrowserSync
一個(gè)基本用途是，如果您只希望在對(duì)某個(gè)css
文件進(jìn)行修改后會(huì)同步到瀏覽器里。那么您只需要運(yùn)行命令行工具，進(jìn)入到該項(xiàng)目（目錄）下，并運(yùn)行相應(yīng)的命令：
靜態(tài)網(wǎng)站
如果您想要監(jiān)聽(tīng).css
文件, 您需要使用服務(wù)器模式。 BrowserSync 將啟動(dòng)一個(gè)小型服務(wù)器，并提供一個(gè)URL來(lái)查看您的網(wǎng)站。
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄） browser-sync start --server --files "css/\.css"
如果您需要監(jiān)聽(tīng)多個(gè)類(lèi)型的文件，您只需要用逗號(hào)隔開(kāi)。例如我們?cè)偌尤胍粋€(gè).html
文件
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄） browser-sync start --server --files "css/\.css, \.html"http:// 如果你的文件層級(jí)比較深，您可以考慮使用 \\（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 browser-sync start --server --files "\\/\.css, \\/\.html"
我們做了一個(gè)靜態(tài)例子的示范，您可以下載示例包，文件您可以解壓任何盤(pán)符的任何目錄下，不能是中文路徑。打開(kāi)您的命令行工具，進(jìn)入到BrowsersyncExample目錄下，運(yùn)行以下其中一條命令。Browsersync將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開(kāi)你的瀏覽器后訪問(wèn)http://localhost:3000地址，這一切都會(huì)在命令行工具里顯示。你也可以查看Browsersync靜態(tài)示例視頻
// 監(jiān)聽(tīng)css文件 browser-sync start --server --files "css/\.css"http:// 監(jiān)聽(tīng)css和html文件 browser-sync start --server --files "css/\.css, \.html"
動(dòng)態(tài)網(wǎng)站
如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類(lèi)似的，您需要使用代理模式。 BrowserSync將通過(guò)代理URL(localhost:3000)來(lái)查看您的網(wǎng)站。
// 主機(jī)名可以是ip或域名browser-sync start --proxy "主機(jī)名" "css/\.css"
在本地創(chuàng)建了一個(gè)PHP服務(wù)器環(huán)境，并通過(guò)綁定Browsersync.cn來(lái)訪問(wèn)本地服務(wù)器，使用以下命令方式，Browsersync將提供一個(gè)新的地址localhost:3000來(lái)訪問(wèn)Browsersync.cn，并監(jiān)聽(tīng)其css目錄下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/\.css"
一點(diǎn)建議
我們建議您結(jié)合gulp或grunt來(lái)使用，我們這里有詳細(xì)說(shuō)明Gulp文檔、Grunt文檔。如果您還沒(méi)有使用gulp或grunt，那么可以通過(guò)以上方式創(chuàng)建Browsersync
到此為止，我們基本可以脫離或者依賴(lài)gulp||grunt來(lái)使用browsersync了，比如在gulp中，我們?cè)趃ulpfiles.js中配置好了browsersync，執(zhí)行g(shù)ulp watch，就會(huì)直接調(diào)起browsersync服務(wù)，我們?cè)诿钚锌梢钥吹絇C和移動(dòng)端對(duì)應(yīng)的url訪問(wèn)地址，值得注意的是，browsersync會(huì)默認(rèn)尋找根目錄下的index.html文件，有則執(zhí)行，無(wú)則報(bào)錯(cuò)，如果我們想訪問(wèn)目錄下的其他文件，只需要在url后面加上相應(yīng)的路徑地址即可。
比如：http://localhost:3000/app/index.html
那么我們?nèi)绾卧趙ebpack中使用browserSync呢，官方文檔只給了gulp和grunt的集成方式，接下來(lái)看看browsersync在webpack中怎么配置。
4. webpack中的browsersync
還是找到我們上一個(gè)文件項(xiàng)目，打開(kāi)webpack.config.js備用。
依然打開(kāi)命令行終端，進(jìn)入項(xiàng)目根目錄，執(zhí)行
npm install browser-sync-webpack-plugin --save-dev 來(lái)安裝browsersync插件
安裝完畢，package.json中也顯示了安裝完畢后的依賴(lài)項(xiàng)：
"extract-text-webpack-plugin": "^1.0.1",
接下來(lái)就是配置webpack.config.js了，
首先引入插件：var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
然后再 plugins 配置項(xiàng)中配置：
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
files: '',
server: {
//指定服務(wù)器啟動(dòng)根目錄
baseDir: './'
}
})
基本這么一配置，就ok了，似不似很簡(jiǎn)單，似不似很開(kāi)熏...
然后我們直接 webpack -w 就發(fā)現(xiàn)瀏覽器自動(dòng)打開(kāi)了，默認(rèn)訪問(wèn)了http://localhost:3000/
我們根據(jù)要訪問(wèn)的文件路徑，補(bǔ)充好url后續(xù)，就可以開(kāi)心的開(kāi)發(fā)了，你會(huì)發(fā)現(xiàn)每次一保存代碼，瀏覽器就自動(dòng)刷新，不管是PC端還是移動(dòng)端，而且在一端滾動(dòng)頁(yè)面，另一端也會(huì)同步滾動(dòng)，感覺(jué)屌爆了。
好了，這么神奇的東西就這樣為我們所用了。開(kāi)心。
5. 最后
這次編輯文章用的 markDown語(yǔ)法，簡(jiǎn)直比昨天用的富文本不能再好了，程序員寫(xiě)文檔神器，雖然之前我組長(zhǎng)就讓我寫(xiě)，但是我懶啊，沒(méi)寫(xiě)，現(xiàn)在還是用到了，所以說(shuō)要學(xué)習(xí)的地方還是很多啊小伙子。
今天過(guò)得好快，下一個(gè)項(xiàng)目也要來(lái)了，坐等...
886我要準(zhǔn)備下班了，今晚還要去健身房差點(diǎn)忘了…
對(duì)了，接下來(lái)會(huì)記錄一下webpack+vue的組件模塊化開(kāi)發(fā)。
