使用tiny-lr自動刷新頁面

編輯完代碼，前端頁面就能夠自動刷新是一件很酷的事，能夠顯著提升調試的效率。

我來講說本身使用自動刷新頁面的幾種狀況，若是是 node 項目我會使用本身作的模塊，一個是 koajs 的中間件 koa-liveload，另外一個是 connect 的中間件 liveload，在 express 項目裏面使用。

組件的詳細用法請參考文檔，這裏只想說這樣作的方便之處在於只須要 2～3 行代碼就能夠啓用 liveload 功能，而不用寫什麼 grunt 或者 gulp 那種看起來頭疼的代碼。

但是若是項目不是 nodejs 就不太好辦了，幸運的是 tiny-lr 還提供了 Makefile 腳本，不過我通常是用本身寫的，由於引用的 Makefile 不容易理解，其實不過是作了兩件事，一是啓動服務：

watch:
    @echo ... Starting server, running in background ...
    @echo ... Run: "make stop" to stop the server ...
    @tiny-lr &

二是變化時經過post請求通知前端頁面，

build: 
    //構建過程的代碼
    @curl -X POST http://localhost:35729/changed -d '{ "files": "build.js" }'

若是你還須要監視文件變化的話，我我的推薦 rewatch 這個小工具，大概用法如此：

rewatch index.js *.css -c "make build"

最後的 Makfile 大概是這樣子的：

build: components index.js template.html
    //構建前端項目
    @curl -X POST http://localhost:35729/changed -d '{ "files": "build.js" }'

watch:
    @echo ... Starting server, running in background ...
    @echo ... Run: "make stop" to stop the server ...
    @tiny-lr &
    @rewatch index.js *.css -c "make build"

最後一件事就是在 html 頁面裏面嵌入 tiny-lr 的前端代碼

<!-- livereload snippet -->
 <script>document.write('<script src="http://'
  (location.host || 'localhost').split(':')[0]
  ':35729/livereload.js?snipver=1"><\/script>')
 </script>

若是隻調 Chrome 的話能夠使用 livereload 嵌入腳本代碼。

使用命令 make watch 啓動服務，即可享受保存代碼後項目自動構建而後瀏覽器自動刷新了。

還有一個剩下的問題就是我不知道有沒有什麼好辦法把改變的文件名傳到那個 curl 的命令裏面（除非單獨寫一條指令），若是tiny-lr知道改變的文件是css的話，它只會重加載那個css，這樣調試起來更方便些。