修改文件後瀏覽器自動刷新解決方案

爲何要找這樣的一個方法？

工做場景中發現的需求，都要找辦法去解決。

咱們在雙屏開發的時候，常常是在Mac屏幕上寫代碼，而後在擴展屏幕上放着瀏覽器。
通常寫幾行代碼，就會去刷新一下瀏覽器，看看代碼運行是否正常。但是把鼠標從兩個屏幕滑來滑去，很麻煩，特別是在寫CSS的時候，若是能跨屏刷新就很棒了。

現有編程工具的自動刷新解決方案

其實有不少工具能夠作到文件一改變，瀏覽器自動刷新，其實這樣體驗也是最好的，但是因爲一些緣由，這些工具並不能解決全部工做場景的需求。

因爲這不是本文的主要內容，只列出一些能夠實現自動刷新的工具，沒有進行詳細展開，你們能夠自行去研究下。

• 在Sublime下有一個插件叫作LiveStyle能夠實現修改CSS後自動刷新，可是每個CSS文件都要手動配置，不夠智能。須要安裝Chrome插件：Emmet LiveStyle。
• JetBrains公司的IDEA、WebStorm、PhpStorm產品有LiveEdit這個功能，它也能夠實現修改文件後實時刷新，可是須要使用工具內建的服務器，若是是本身前端須要在本身的服務環境下寫就不行啦。

在介紹LiveEdit以前，我還去看了一個這個曾經用過的功能，說一下LiveEdit使用須要注意的地方：WebStorm自帶，IDEA要在插件中去下載。須要在Preferences->Build,Execution,Deployment->Debugger->Live Edit中的Update選擇Auto in(ms)，默認是300毫秒自動更新一次，不用改也能夠用，這樣才能夠自動更新。因爲網上關於LiveEdit使用的文章大都是很久以前寫的，和如今的版本不同了，網上說是在View下勾選Live Edit，但是這個勾選在個人電腦上沒有，原來是將LiveEdit變成了JavaScript debug session的一部分，也就是在調試模式的時候自動打開了，這些網上都沒有資料說，我也是看了官方文檔才知道的，在插件中點擊連接就可以進入官方文檔查看細節。
一樣也須要Chrome插件的支持：JetBrains IDE Support。

• Brackets是Adobe支持的一個開源產品，實現修改文件自動刷新的方法比較容易，直接點擊右上方的一個小閃電就行了，它和LiveEdit同樣自建了服務器，若是本身的項目須要啓動本身的服務，就不能用啦。

不過它不用安裝Chrome插件，很方便。
以前雙屏開發的時候用過一段時間，和Emmet配合寫CSS真的是神速。

現有工具的缺點

由於它們的原理大多數都是在內部實現了一個服務器，你的文件必須在它的服務端口下才能實現動態刷新，可是咱們開發的項目都有本身的服務器和端口，因此這種方式只適合寫不與啓用服務相關的Web前端程序，也就是本身寫寫demo小例子的時候能夠用，真正的項目中用不到了。

有沒有知足全部工做場景需求的方法？

我在想，真正的工做場景都比較複雜，並且每一個人用的編程工具都不同，有沒有一個比較通用的解決方案呢？若是有，這個解決方案會是怎麼樣？

挖掘一下，發現其實真正的用戶需求就是不讓鼠標移動到拓展屏幕上，Chrome也可以刷新。並非非得須要一個修改文件後實時刷新的插件。若是可以按一個組合鍵就讓拓展屏幕的Chrome刷新一下就行了，雖然沒有自動刷新方便，可是能夠支持全部編輯器，同時每刷新一次網頁的成本也很低，畢竟不用再移動鼠標了。

有一天在網上逛的時候，看到了有人用AppleScript實現了跨屏刷新瀏覽器，本身按照他的方法試了一下，果真能夠。可是以前看WWDC的時候知道JavaScript能夠實現和AppleScript同樣的功能了，因而研究了一下。
打開Automator->選擇服務->搜索JavaScript->輸入以下代碼

var chrome = Application('Google Chrome');
var activeTab = chrome.windows[0].activeTab;
activeTab.reload();

你可能問我這個具體怎麼作的，我是去查看腳本編輯器中Google Chrome的字典，而後去蘋果開發者中心查看了JavaScript的文檔，若是具體展開說就太長了，這裏不作展開。

在上面的"服務"收到選擇沒有輸入，再改個名字，就能保存了。
而後去設置->鍵盤->快捷鍵->服務->找到剛纔保存的服務名字，設置一個快捷鍵就行了。
我設置的是Command + 3，由於這樣設置和Command + R很像，雖然偶爾有快捷鍵衝突，不過大多數時候還好。

有沒有更好的方法？

上面的方法雖然可以實現跨屏刷新，不用鼠標滑到另外一個屏幕，不過仍是須要本身點一下刷新，繼續尋找合適的解決方案。

頁面引入js庫文件

live.js和cssrefresh.js。這兩個JavaScript庫能夠實現本地文件修改後瀏覽器自動刷新，並且CSS更改不用刷新，樣式直接改變。
我頗有興趣這是怎麼作到的，看了一下它們的原理，是一直不停的請求頁面中引入的文件，若是發生了改變，就從新渲染，這麼作總以爲怪怪的。

無需支持的Chrome插件

SmartF5，地址：
https://chrome.google.com/webstore/detail/smartf5/pgglpnfdiigfapjinhfgnbckibpdbbeo

騰訊AlloyTeam出品的Live Reload，地址：
https://chrome.google.com/webstore/detail/pccddenngcbofbojodpghgpbheckgddn

這兩個插件是在Chrome商店搜索不到的，不知道爲何，因此放出了連接。另外還有Css Auto Reload等插件能夠實現，你們能夠具體找找。

注意：

1. 直接搜索Live Reload會出現另一個插件，下面我會說。
2. 這一類插件貌似有衝突，最好只安裝一個。

用了插件後發現本身的項目修改CSS後好幾秒後才刷新，我去看了一下這些插件的源代碼，原來也是輪詢查找是否存在改變的文件。但是公司的項目有幾十個文件，因此刷新就不是很及時了。

Chrome插件LiveReload

這個插件不是上面的地址那個，是能夠直接在Chrome商店搜索出來的。
它須要相似Grunt這種自動化構建工具支持，看了一下原理，是在LiveReload和構建工具之間創建了一個WebSocket鏈接，構建工具監聽本地文件變化，若是有變化就通知LiveReloa從新渲染頁面或者刷新頁面。

它不會去輪詢每個文件的變化，而是文件了主動去通知，因此在項目中引入了幾十個文件的狀況下也不會有過多的延遲。

可是它還要去弄構建工具，使用成本比較高，算是一個缺點，具體怎麼使用你們能夠自行搜索，網上有教程。

BrowserSync

感謝Leo同窗的提供。
這是一個基於node的工具，具體怎麼使用官網說的很清楚，這裏說一個它的優勢和原理。
首先，它不用安裝Chrome插件，由於你填寫須要調試的地址後，會生成另外一個代理地址，經過代理地址訪問，就能夠自動刷新，那看起來好像也不科學。
實際上代理地址自動向頁面中插入一段JavaScript腳本，這段代碼和代理服務器保持了一個WebSocket鏈接，若是文件有更新，就會通知那段JavaScript腳本去從新渲染或者刷新頁面。

同時，它還集成了weiner，一個移動端調試工具，之後有機會再介紹，這篇博客主要是羅列下自動刷新的解決方案。

固然，BrowserSync也有Grunt的插件，同時它的功能不只限於自動刷新頁面，還有更多好用的功能能夠去發現。

結論

同時最好也要看看各個解決方案的原理，這樣若是遇到了問題纔不會不知所措，好比若是不知道大多數的方案是經過輪詢每個文件是否更改實現的，那麼當項目大了後發現好幾秒後纔會刷新，也就本身忍着了。

上面說了好多能夠實現修改文件後自動刷新的辦法，該說一下結論了。

若是你只是想臨時用一下這個功能，用騰訊AlloyTeam出品的Live Reload已經能夠了，它有一些配置項能夠配置，可是它不支持本地file協議的文件。若是須要訪問本地文件，SmartF5能夠實現。

要是在一個比較大的項目中使用，最好用BrowserSync，由於在大一點的項目中都會去配置自動化構建工具，使用成本高這個問題就很好解決了。

對於高效工具的需求，也要像解決程序問題的思路同樣去尋找。

歡迎關注【本期節目】，微信公衆號ID：benqijiemu。
這裏有：互聯網思考、軟件&工具推薦、前端技術等。
能夠在公衆號回覆我，但願和你們一塊兒交流全部與互聯網相關的事情~