修改文件后浏览器自动刷新解决方案
為什么要找這樣的一個方法？
工作場景中發(fā)現(xiàn)的需求，都要找辦法去解決。
我們在雙屏開發(fā)的時候，經(jīng)常是在Mac屏幕上寫代碼，然后在擴展屏幕上放著瀏覽器。
一般寫幾行代碼，就會去刷新一下瀏覽器，看看代碼運行是否正常。可是把鼠標從兩個屏幕滑來滑去，很麻煩，特別是在寫CSS的時候，如果能跨屏刷新就很棒了。
現(xiàn)有編程工具的自動刷新解決方案
其實有很多工具可以做到文件一改變，瀏覽器自動刷新，其實這樣體驗也是最好的，可是由于一些原因，這些工具并不能解決所有工作場景的需求。
由于這不是本文的主要內(nèi)容，只列出一些可以實現(xiàn)自動刷新的工具，沒有進行詳細展開，大家可以自行去研究下。
- 在Sublime下有一個插件叫做LiveStyle可以實現(xiàn)修改CSS后自動刷新，但是每一個CSS文件都要手動配置，不夠智能。需要安裝Chrome插件：Emmet
LiveStyle。 - JetBrains公司的IDEA、WebStorm、PhpStorm產(chǎn)品有LiveEdit這個功能，它也可以實現(xiàn)修改文件后實時刷新，但是需要使用工具內(nèi)建的服務(wù)器，如果是自己前端需要在自己的服務(wù)環(huán)境下寫就不行啦。
在介紹LiveEdit之前，我還去看了一個這個曾經(jīng)用過的功能，說一下LiveEdit使用需要注意的地方：WebStorm自帶，IDEA要在插件中去下載。需要在Preferences->Build,Execution,Deployment->Debugger->Live Edit中的Update選擇Auto in(ms)，默認是300毫秒自動更新一次，不用改也可以用，這樣才可以自動更新。由于網(wǎng)上關(guān)于LiveEdit使用的文章大都是好久之前寫的，和現(xiàn)在的版本不一樣了，網(wǎng)上說是在View下勾選Live Edit，可是這個勾選在我的電腦上沒有，原來是將LiveEdit變成了JavaScript debug session的一部分，也就是在調(diào)試模式的時候自動打開了，這些網(wǎng)上都沒有資料說，我也是看了官方文檔才知道的，在插件中點擊鏈接就能夠進入官方文檔查看細節(jié)。
同樣也需要Chrome插件的支持：JetBrains IDE Support。 - Brackets是Adobe支持的一個開源產(chǎn)品，實現(xiàn)修改文件自動刷新的方法比較容易，直接點擊右上方的一個小閃電就好了，它和LiveEdit一樣自建了服務(wù)器，如果自己的項目需要啟動自己的服務(wù)，就不能用啦。
不過它不用安裝Chrome插件，很方便。 之前雙屏開發(fā)的時候用過一段時間，和Emmet配合寫CSS真的是神速。
現(xiàn)有工具的缺點
因為它們的原理大多數(shù)都是在內(nèi)部實現(xiàn)了一個服務(wù)器，你的文件必須在它的服務(wù)端口下才能實現(xiàn)動態(tài)刷新，但是我們開發(fā)的項目都有自己的服務(wù)器和端口，所以這種方式只適合寫不與啟用服務(wù)相關(guān)的Web前端程序，也就是自己寫寫demo小例子的時候可以用，真正的項目中用不到了。
有沒有滿足所有工作場景需求的方法？
我在想，真正的工作場景都比較復(fù)雜，而且每個人用的編程工具都不一樣，有沒有一個比較通用的解決方案呢？如果有，這個解決方案會是怎么樣？
挖掘一下，發(fā)現(xiàn)其實真正的用戶需求就是不讓鼠標移動到拓展屏幕上，Chrome也能夠刷新。并不是非得需要一個修改文件后實時刷新的插件。如果能夠按一個組合鍵就讓拓展屏幕的Chrome刷新一下就好了，雖然沒有自動刷新方便，但是可以支持所有編輯器，同時每刷新一次網(wǎng)頁的成本也很低，畢竟不用再移動鼠標了。
有一天在網(wǎng)上逛的時候，看到了有人用AppleScript實現(xiàn)了跨屏刷新瀏覽器，自己按照他的方法試了一下，果然可以。但是之前看WWDC的時候知道JavaScript可以實現(xiàn)和AppleScript一樣的功能了，于是研究了一下。
打開Automator->選擇服務(wù)->搜索JavaScript->輸入如下代碼
你可能問我這個具體怎么做的，我是去查看腳本編輯器中Google Chrome的字典，然后去蘋果開發(fā)者中心查看了JavaScript的文檔，如果具體展開說就太長了，這里不做展開。
在上面的”服務(wù)”收到選擇沒有輸入，再改個名字，就能保存了。
然后去設(shè)置->鍵盤->快捷鍵->服務(wù)->找到剛才保存的服務(wù)名字，設(shè)置一個快捷鍵就好了。
我設(shè)置的是Command + 3，因為這樣設(shè)置和Command + R很像，雖然偶爾有快捷鍵沖突，不過大多數(shù)時候還好。
有沒有更好的方法？
上面的方法雖然能夠?qū)崿F(xiàn)跨屏刷新，不用鼠標滑到另一個屏幕，不過還是需要自己點一下刷新，繼續(xù)尋找合適的解決方案。
頁面引入js庫文件
live.js和cssrefresh.js。這兩個JavaScript庫可以實現(xiàn)本地文件修改后瀏覽器自動刷新，而且CSS更改不用刷新，樣式直接改變。
我很有興趣這是怎么做到的，看了一下它們的原理，是一直不停的請求頁面中引入的文件，如果發(fā)生了改變，就重新渲染，這么做總覺得怪怪的。
無需支持的Chrome插件
SmartF5，地址：
https://chrome.google.com/webstore/detail/smartf5/pgglpnfdiigfapjinhfgnbckibpdbbeo
騰訊AlloyTeam出品的Live Reload，地址：
https://chrome.google.com/webstore/detail/pccddenngcbofbojodpghgpbheckgddn
這兩個插件是在Chrome商店搜索不到的，不知道為什么，所以放出了鏈接。另外還有Css Auto Reload等插件可以實現(xiàn)，大家可以具體找找。
注意：
用了插件后發(fā)現(xiàn)自己的項目修改CSS后好幾秒后才刷新，我去看了一下這些插件的源代碼，原來也是輪詢查找是否存在改變的文件。可是公司的項目有幾十個文件，所以刷新就不是很及時了。
Chrome插件LiveReload
這個插件不是上面的地址那個，是可以直接在Chrome商店搜索出來的。
它需要類似Grunt這種自動化構(gòu)建工具支持，看了一下原理，是在LiveReload和構(gòu)建工具之間建立了一個WebSocket連接，構(gòu)建工具監(jiān)聽本地文件變化，如果有變化就通知LiveReloa重新渲染頁面或者刷新頁面。
它不會去輪詢每一個文件的變化，而是文件了主動去通知，所以在項目中引入了幾十個文件的情況下也不會有過多的延遲。
但是它還要去弄構(gòu)建工具，使用成本比較高，算是一個缺點，具體怎么使用大家可以自行搜索，網(wǎng)上有教程。
BrowserSync
感謝Leo同學(xué)的提供。
這是一個基于node的工具，具體怎么使用官網(wǎng)說的很清楚，這里說一個它的優(yōu)點和原理。
首先，它不用安裝Chrome插件，因為你填寫需要調(diào)試的地址后，會生成另一個代理地址，通過代理地址訪問，就可以自動刷新，那看起來好像也不科學(xué)。
實際上代理地址自動向頁面中插入一段JavaScript腳本，這段代碼和代理服務(wù)器保持了一個WebSocket連接，如果文件有更新，就會通知那段JavaScript腳本去重新渲染或者刷新頁面。
同時，它還集成了weiner，一個移動端調(diào)試工具，以后有機會再介紹，這篇博客主要是羅列下自動刷新的解決方案。
當(dāng)然，BrowserSync也有Grunt的插件，同時它的功能不僅限于自動刷新頁面，還有更多好用的功能可以去發(fā)現(xiàn)。
結(jié)論
同時最好也要看看各個解決方案的原理，這樣如果遇到了問題才不會不知所措，比如如果不知道大多數(shù)的方案是通過輪詢每一個文件是否更改實現(xiàn)的，那么當(dāng)項目大了后發(fā)現(xiàn)好幾秒后才會刷新，也就自己忍著了。
上面說了好多可以實現(xiàn)修改文件后自動刷新的辦法，該說一下結(jié)論了。
如果你只是想臨時用一下這個功能，用騰訊AlloyTeam出品的Live Reload已經(jīng)可以了，它有一些配置項可以配置，但是它不支持本地file協(xié)議的文件。如果需要訪問本地文件，SmartF5可以實現(xiàn)。
要是在一個比較大的項目中使用，最好用BrowserSync，因為在大一點的項目中都會去配置自動化構(gòu)建工具，使用成本高這個問題就很好解決了。
對于高效工具的需求，也要像解決程序問題的思路一樣去尋找。
轉(zhuǎn)載自：修改文件后瀏覽器自動刷新解決方案
總結(jié)
以上是生活随笔為你收集整理的修改文件后浏览器自动刷新解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信息系统一定要用计算机嘛,计算机信息系统
- 下一篇： 钢结构基本原理复习