[工具]web開發時自動刷新網頁:liveReload


傳統網頁開發流程:用sublime text寫好代碼,運行,發現問題,再回到sublime text修改,運行…如此往復,十分繁瑣。今天看到有人(《LiveReload》讓Sublime Text儲存後網頁自動同步更新)用liveReload實現了網頁開發同步更新,試了試,果真不錯,具體配置方法如下。

需要插件

sublime text:View in Browser;LiveReload

chrome:liveReload

 

配置方法

1、在sublime text安裝插件 view in browser,修改配置

安裝插件部分在之前的文章中已經提到,這里不再贅述(不會請戳),因為我主要使用chrome做調試的瀏覽器,因此需要修改一下view in browser 的配置,打開preferences->package setting->view in browser->setting default,修改默認的瀏覽器,這里我把firefox改為chrome64

image

2、在sublime text安裝插件liveReload

3、chrome瀏覽器安裝liveReload插件

進入chrome插件中心,搜索liveReload,安裝即可。

image

到此,已經將需要的插件安裝完畢。

測試

在sublime text編輯一個測試html文件,按 ctr+alt+v 在瀏覽器中運行該html,編輯器下方出現livereload提示,並且chrome瀏覽器的livereload圖標中間小圓點由虛變實,說明配置成功。

image

 

image

          

使用

現在,只需要在sublime text里編輯代碼,按 ctr+s 保存,即可在chrome里面看到實時更新。雙屏體驗極好。

 

2014.11.27更新

之前有博友說sublime text無法使用,今天竟然莫名奇妙的down掉了,現將解決辦法說明如下。

1、去livereload官網下載windows版本,安裝,將需要同步的文件夾放入livereload中。

2、先將html頁面在瀏覽器里面打開,之后再用文本編輯器編輯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM