自動監測文件變化且免F5刷新頁面:HeTry-Grunt-LiveReload
HeTry-Grunt-LiveReload
苦B的前端每次在制作和修改頁面時，都有一個特定的三部曲：coding-save-F5。很多時候都希望自己一改東西，頁面就能立刻顯示，免F5手動刷新，而本項目就是為了解決這個問題。
本項目是“自動監測文件變化且免F5刷新頁面”的Grunt解決方案。
使用
下載完成之后，首先安裝模塊：
npm install
然后再運行：
grunt
瀏覽器訪問：http://localhost:8000/
接下來見證奇跡的時候來了！
隨意修改www-root目錄中的index.html文件內容，然后看看頁面，是否發現神奇的事情已經發生了呢？
代碼說明
各插件的使用請參考其官方文檔的說明。
在本示例中，我們設置了web服務器的根目錄為./www-root，并且設置了這個目錄下的html文件（不包括子目錄的html文件）一旦發生了變化，就會自動重載頁面。
如何做到的
難點一：如何知道文件發生了變化
Grunt團隊官方提供了一個插件：grunt-contrib-watch，它可用于監聽文件或文件夾新增、修改和刪除變化。
難點二：如何免F5刷新
使用http://livereload.com/提供的方案，在需要自動重刷的頁面加入以下代碼，然后安裝瀏覽器插件，具體可參考官網文檔。
<script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
當然，這比較麻煩，不可能每個頁面都手動加入那陀代碼，然后還要安裝個瀏覽器插件的，有這么麻煩還不如手動F5得了。因此我們會引入一個中間件，也是grunt插件：connect-livereload來幫我們處理這些事情。它做的事情就是配合grunt-contrib-connect創建的 web服務器，在返回頁面之前，自動幫我們加上上面的那陀代碼，并且不用再安裝瀏覽器插件，它就會自動重新加載了。
難點三：如何創建本地web服務器
Grunt團隊官方提供了一個插件：grunt-contrib-connect，它創建一個本地web服務器。
所需插件
grunt
推薦0.4.1版本及以上
grunt-contrib-watch
用于監聽文件或文件夾新增、修改和刪除變化。
Run predefined tasks whenever watched file patterns are added, changed or deleted.
- 插件官網地址：https://www.npmjs.com/package/grunt-contrib-watch
- github地址：https://github.com/gruntjs/grunt-contrib-watch
grunt-contrib-connect
用于創建一個本地web服務器。
Start a connect web server
- 插件官網地址：https://www.npmjs.com/package/grunt-contrib-connect
- github地址：https://github.com/gruntjs/grunt-contrib-connect
connect-livereload
一個中間件，用于在瀏覽器請求的響應中增加livereload腳本代碼。
connect middleware for adding the livereload script to the response. no browser plugin is needed. if you are happy with a browser plugin, then you don't need this middleware.