LiveReload的使用

 

這個工具他會自動觀察如果你是否有更新HTML、CSS、JS、IMG等資料，

網頁也會自動F5更新，這樣子一來你就不需要再必須一直按F5來更新畫面了。

安裝與使用流程為：

1、先到Livereload官網下載主程式並安裝。

 

2、再到chrome store下載Livereload plugin。

安裝完以後，你就會發現chrome瀏覽器右上角有一個圓形環繞箭頭中間空心的圖案。

 

3、你的瀏覽網址請必須是localhost，如果你是直接打開網頁是無效果的。

例如這種型式

以windows平台為例，那你就是要把你的測試頁實際地被IIS所匯入。

而我個人是利用visual studio可以自行模擬localhost環境來達成目的。

 

4、先開啟PC上面的Livereload軟體，點選「+add」後指定要觀察的資料夾路徑

 

5、利用visual studio自行模擬localhost環境

 

6、圓形環繞箭頭中間空心的圖案表示還未開啟Livereload

而圓形環繞箭頭中間實心的圖案表示已開啟Livereload

 

7、這時去改CSS樣式，把文字顏色由紅色改成藍色再存檔，

回到瀏覽器會發現文字顏色已被自動改成藍色了。