天氣越來越冷，我剛買的毛線手套在今中午騎ofo單車時(shí)候都快有點(diǎn)頂不住了惨篱，問我為什么中午出去騎單車盏筐，因?yàn)槲液臀腋绺缂s了一頓寬板凳火鍋。很久沒吃火鍋了砸讳，果斷騎車20分鐘去約飯琢融，回來時(shí)候心滿意足界牡，邊騎車邊想，不如做一套針對ofo共享單車的共享車鎖密碼應(yīng)用漾抬，每次使用完單車后順手上傳車牌號和密碼宿亡，反正每輛車都是固定密碼的，以后大家用車就可以先通過車牌查詢有無對應(yīng)的密碼共享出來纳令，這才是真正的共享經(jīng)濟(jì)嘛挽荠。哈哈，不過這種事也就是想想罷了平绩，就像當(dāng)初12306網(wǎng)站的登錄注冊都存在著sql注入漏洞圈匆，但是也沒有人敢去搞一搞，有些事還是想想就夠了捏雌。酒足飯飽跃赚，回到工位，還是趁熱乎把昨天說的盡快落實(shí)一下吧...
1. 先說說使用背景
說起前端開發(fā)性湿，不得不說現(xiàn)在如火如荼的移動端H5纬傲，從朋友圈廣泛傳播的各種酷炫活動頁到現(xiàn)在各大App應(yīng)用中內(nèi)嵌的移動端H5網(wǎng)頁，都屬于移動端網(wǎng)頁的開發(fā)肤频。但是作為一名前端開發(fā)者叹括，實(shí)際在開發(fā)移動端頁面的時(shí)候，真機(jī)調(diào)試是一個很頭疼的問題着裹，因?yàn)橐苿佣隧撁娌幌馪C端頁面那樣能直接用電腦瀏覽器雙擊打開 *.html 文件來瀏覽調(diào)試领猾，最最笨的方法就是將正在開發(fā)中的文件通過數(shù)據(jù)線從電腦拷貝到手機(jī)，然后手機(jī)打開html文件預(yù)覽骇扇。當(dāng)然這種非人類的辦法效率實(shí)在是極其低下也很難以啟齒...所以我們要想一個辦法，能做到十分省時(shí)省力的就能在手機(jī)上預(yù)覽甚至調(diào)試到我們正在開發(fā)的移動端頁面面粮。
記得去年畢業(yè)進(jìn)入我的上家公司少孝，當(dāng)時(shí)的我一問三不知，我的導(dǎo)師組長引領(lǐng)了我一年的成長之路熬苍，這一年多我學(xué)會了很多稍走，很感激這一年來公司給我提供的成長環(huán)境，和那一堆給予我?guī)椭耐虏竦住Ｑ詺w正傳婿脸，剛來公司首先要做的就是熟悉公司的開發(fā)模式，經(jīng)過組長給我的講解柄驻，我明白了我們的大概開發(fā)流程狐树，我們的工程框架用的是fis || grunt，我們在本地開發(fā)并編譯好代碼文件鸿脓，同時(shí)會運(yùn)行一個腳本抑钟，在每次保存本地代碼時(shí)涯曲，腳本會把編譯好的代碼文件push到我們每個人配置好的開發(fā)機(jī)服務(wù)器上，同時(shí)對應(yīng)一個個人測試域的url在塔，在內(nèi)網(wǎng)里訪問這個url就可以訪問我們正在開發(fā)的頁面幻件，這樣就實(shí)現(xiàn)了邊開發(fā)，手機(jī)通過一個url就可以實(shí)時(shí)邊訪問頁面了蛔溃。但是這種很大工程化流程在我們自己私下想搭環(huán)境時(shí)候就不好搞了绰沥，最起碼我搞不來。
因?yàn)楫?dāng)時(shí)我們的是用git進(jìn)行代碼管理的贺待，所以我又想可以通過git來同步我的代碼揪利，生成一個url來訪問，就是每次還得git push上傳代碼狠持，也是有點(diǎn)繁瑣疟位。
后來現(xiàn)在的同事給我推薦了browserSync，一頭霧水的我查了一下喘垂，不查不知道甜刻，一查驚呆了，世間還有這等神器正勒！官網(wǎng)首頁的幾句話就把我深深吸引住了得院，如獲至寶，于是研究了一下章贞，起初不依賴什么框架就是在外面單純的跑腳本祥绞，沒問題，很強(qiáng)大鸭限，后來又把它集成到了gulp里蜕径，但是后來我決定放棄剛用了一次的gulp，轉(zhuǎn)投webpack败京，幸運(yùn)的是兜喻，webpack也很強(qiáng)大地支持browserSync，喜大普奔赡麦。
好了朴皆，廢話了這么多，其實(shí)在webpack中使用browserSync也很簡單泛粹，就是在上篇文章《webpack從安裝到起飛》中提到的webpack.config.js中配置一下就好了遂铡，那么我們先從頭說一下browserSync是個什么東東。
2. 初識browserSync
正如標(biāo)題所說晶姊，它是一個省時(shí)的瀏覽器同步測試工具扒接，借用一下官方的介紹：
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js珠增、css超歌、sass、less等）并自動刷新頁面蒂教。更重要的是** Browsersync可以同時(shí)在PC巍举、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試**凝垛。您可以想象一下：“假設(shè)您的桌子上有pc懊悯、ipad、iphone梦皮、android等設(shè)備炭分，同時(shí)打開了您需要調(diào)試的頁面，當(dāng)您使用browsersync后剑肯，您的任何一次代碼保存捧毛，以上的設(shè)備都會同時(shí)顯示您的改動”。無論您是前端還是后端工程師让网，使用它將提高您30%的工作效率呀忧。
Browsersync
有了它，您不用在多個瀏覽器溃睹、多個設(shè)備間來回切換而账，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面因篇、點(diǎn)擊等行為也會同步到其他瀏覽器和設(shè)備中泞辐，這一切還可以通過可視化界面來控制。
Browsersync
看到這里竞滓，我們就知道了咐吼，是它，是它虽界，就是它汽烦，它就是我一直在尋找的最優(yōu)解決方案——Browsersync。
3. Browsersync的基本使用
對于Browsersync的用法莉御，我不在用自己的話描述了，官方的文檔說的很詳細(xì)很好俗冻，這里就直接引用了：
- 安裝 Node.js
BrowserSync是基于Node.js的, 是一個Node模塊礁叔， 如果您想要快速使用它，也許您需要先安裝一下Node.js 安裝適用于Mac OS迄薄，Windows和Linux琅关。
- 安裝 BrowserSync
您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個終端窗口，運(yùn)行以下命令：
npm install -g browser-sync
您告訴包管理器下載BrowserSync文件涣易，并在全局下安裝它們画机，您可以在所有項(xiàng)目(任何目錄)中使用。
當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來使用新症，在您需要構(gòu)建的項(xiàng)目里運(yùn)行下面的命令:
npm install --save-dev browser-sync - 啟動 BrowserSync
一個基本用途是步氏，如果您只希望在對某個css
文件進(jìn)行修改后會同步到瀏覽器里。那么您只需要運(yùn)行命令行工具徒爹，進(jìn)入到該項(xiàng)目（目錄）下荚醒，并運(yùn)行相應(yīng)的命令：
靜態(tài)網(wǎng)站
如果您想要監(jiān)聽.css
文件, 您需要使用服務(wù)器模式。 BrowserSync 將啟動一個小型服務(wù)器隆嗅，并提供一個URL來查看您的網(wǎng)站界阁。
// --files 路徑是相對于運(yùn)行該命令的項(xiàng)目（目錄） browser-sync start --server --files "css/\.css"
如果您需要監(jiān)聽多個類型的文件，您只需要用逗號隔開胖喳。例如我們再加入一個.html
文件
// --files 路徑是相對于運(yùn)行該命令的項(xiàng)目（目錄） browser-sync start --server --files "css/\.css, \.html"http:// 如果你的文件層級比較深泡躯，您可以考慮使用 \\（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件丽焊。 browser-sync start --server --files "\\/\.css, \\/\.html"
我們做了一個靜態(tài)例子的示范较剃，您可以下載示例包，文件您可以解壓任何盤符的任何目錄下粹懒，不能是中文路徑重付。打開您的命令行工具，進(jìn)入到BrowsersyncExample目錄下凫乖，運(yùn)行以下其中一條命令确垫。Browsersync將創(chuàng)建一個本地服務(wù)器并自動打開你的瀏覽器后訪問http://localhost:3000地址，這一切都會在命令行工具里顯示帽芽。你也可以查看Browsersync靜態(tài)示例視頻
// 監(jiān)聽css文件 browser-sync start --server --files "css/\.css"http:// 監(jiān)聽css和html文件 browser-sync start --server --files "css/\.css, \.html"
動態(tài)網(wǎng)站
如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類似的删掀，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來查看您的網(wǎng)站导街。
// 主機(jī)名可以是ip或域名browser-sync start --proxy "主機(jī)名" "css/\.css"
在本地創(chuàng)建了一個PHP服務(wù)器環(huán)境披泪，并通過綁定Browsersync.cn來訪問本地服務(wù)器，使用以下命令方式搬瑰，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn款票，并監(jiān)聽其css目錄下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/\.css"
一點(diǎn)建議
我們建議您結(jié)合gulp或grunt來使用泽论，我們這里有詳細(xì)說明Gulp文檔艾少、Grunt文檔。如果您還沒有使用gulp或grunt翼悴，那么可以通過以上方式創(chuàng)建Browsersync
到此為止缚够，我們基本可以脫離或者依賴gulp||grunt來使用browsersync了，比如在gulp中，我們在gulpfiles.js中配置好了browsersync谍椅，執(zhí)行g(shù)ulp watch误堡，就會直接調(diào)起browsersync服務(wù)，我們在命令行可以看到PC和移動端對應(yīng)的url訪問地址雏吭，值得注意的是锁施，browsersync會默認(rèn)尋找根目錄下的index.html文件，有則執(zhí)行思恐，無則報(bào)錯沾谜，如果我們想訪問目錄下的其他文件，只需要在url后面加上相應(yīng)的路徑地址即可胀莹。
比如：http://localhost:3000/app/index.html
那么我們?nèi)绾卧趙ebpack中使用browserSync呢基跑，官方文檔只給了gulp和grunt的集成方式，接下來看看browsersync在webpack中怎么配置描焰。
4. webpack中的browsersync
還是找到我們上一個文件項(xiàng)目媳否，打開webpack.config.js備用。
依然打開命令行終端荆秦，進(jìn)入項(xiàng)目根目錄篱竭，執(zhí)行
npm install browser-sync-webpack-plugin --save-dev 來安裝browsersync插件
安裝完畢，package.json中也顯示了安裝完畢后的依賴項(xiàng)：
"extract-text-webpack-plugin": "^1.0.1",
接下來就是配置webpack.config.js了步绸，
首先引入插件：var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
然后再 plugins 配置項(xiàng)中配置：
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
files: '',
server: {
//指定服務(wù)器啟動根目錄
baseDir: './'
}
})
基本這么一配置掺逼，就ok了，似不似很簡單瓤介，似不似很開熏...
然后我們直接 webpack -w 就發(fā)現(xiàn)瀏覽器自動打開了吕喘，默認(rèn)訪問了http://localhost:3000/
我們根據(jù)要訪問的文件路徑，補(bǔ)充好url后續(xù)刑桑，就可以開心的開發(fā)了氯质，你會發(fā)現(xiàn)每次一保存代碼，瀏覽器就自動刷新祠斧，不管是PC端還是移動端闻察，而且在一端滾動頁面，另一端也會同步滾動琢锋，感覺屌爆了辕漂。
好了，這么神奇的東西就這樣為我們所用了吴超。開心钮热。
5. 最后
這次編輯文章用的 markDown語法，簡直比昨天用的富文本不能再好了烛芬，程序員寫文檔神器，雖然之前我組長就讓我寫，但是我懶啊赘娄，沒寫仆潮，現(xiàn)在還是用到了，所以說要學(xué)習(xí)的地方還是很多啊小伙子遣臼。
今天過得好快性置，下一個項(xiàng)目也要來了，坐等...
886我要準(zhǔn)備下班了揍堰，今晚還要去健身房差點(diǎn)忘了…
對了鹏浅，接下來會記錄一下webpack+vue的組件模塊化開發(fā)。
