About Time

在開發了幾支 Web App 下來，透過 Yeoman 的 Livereload 開發都還順利，不過在遇到使用 AngularJS html5Mode 時，碰上了釘子，我不能 reload page，這在開發上就不順手了，找了一下解法，終於找到囉！

說明一下我的開發環境：

Yeoman(yo, grunt, bower) + generator-angular

說明一下問題：

如果沒有開啟 html5Mode，基本上不會有太大的問題，因為 Angular 會透過 hash 來控制好 route，所以即便是 refresh page，也是去要個 index.html(畢竟是 single page 嘛)，但是若啟用 html5Mode，網址是變得很順眼，不會有 hash 出現，但在 refresh page 時，browser 會針對網址的 url 送 request，例如：網址是 http://localhost:9000/test，重新整理網頁時，會送出 GET /test 的 request，這時就會回 404....

解法如下：

我們必須 rewrite url，將 GET /test 的 request 都回 index.html

1. npm install connect-modrewrite --save

2. 修改 Gruntfile.js

// require connect-modrewrite module

var modRewrite = require('connect-modrewrite');

// 在 connect 設定, 將以下的 function 加入到 livereload middleware 中, 注意必須放在 lrSnippet 之前

modRewrite([
 '!\\.html|\\images|\\.js|\\.css|\\.png|\\.jpg|\\.woff|\\.ttf|\\.svg /index.html [L]'
])

就這樣子重新執行 grunt server。