修改檔案後瀏覽器自動重新整理解決方案

Coding-lover發表於2015-10-21
瀏覽器

為什麼要找這樣的一個方法？

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

我們在雙屏開發的時候，經常是在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，因為在大一點的專案中都會去配置自動化構建工具，使用成本高這個問題就很好解決了。

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

轉載自：修改檔案後瀏覽器自動重新整理解決方案

相關文章