[教學] Brunch.io 初體驗

Brunch.io 初體驗

JavaScript 有 Grunt, CoffeeScript 有 Brunch 。如果你懂這句話，就知道 Brunch 是協助 static html, css, javascript 開發工具。

這邊就不比較兩者的差異，因為整個開發概念不大相同，一旦比較之後，又落入 JS vs CoffeeScript

安裝方式

npm install brunch

使用方式

產生新專案，

brunch new [webapp]

如果想要使用自定的專案，

brunch new [webapp] --skeleton [url]

檔案編譯

目的主要是將分散的檔案編譯成單一檔案，進行 files concat

brunch build [--optimize]

檔案監控

當檔案變動的時候，就會自動進行 complier，如果加上 --server 參數將會建立起簡單型 server

brunch watch [--server]

配合 Bower

另外可以配合上 Bower 進行 client side 程式進行版本控管，記得資料夾裡面要設定

bower.json
.bowerrc

Deploy

既然是 static file ，當然也可以使用在 github page ，當你已經把檔案更新完之後，最後進行

git checkout ph-pages
brunch build

通常預設是編譯到 _public 資料夾底下，將底下的資料搬移出來，或者是移到某個你想要的 static folder 底下，再進行

git push origin ph-pages

接著到自己的 github pages 就可以看到 index.html 所應該顯示的頁面結果。

Skeletons

在 Skeleton 裡面已經有許多不同種類的基礎 Project 提供各位參考，裡面有許多好玩的地方。

https://github.com/brunch/brunch/wiki/Skeletons

當然如果你有建立自己的 Skeleton 歡迎自行修改 Project 進行專案的建立。

附註

brunch 預設 _ 底線開頭的檔案是不會進行編譯，假設以 app/style/app.scss 會 import 其他的變數檔案，因此其他檔案可以改名稱為 _variable.scss，就可以避免掉重複編譯的問題產生。

後記

JS, CoffeeScript 看起來目前各自有不同的 ecosystem ，雖然對於 Coffee 並不是這麼熟悉，不過對於看到有各自不同的好工具相繼產生，同時互相支援，這對於開發者實在是一大福音。

Brunch 如果大家對於 Single page application 有興趣的話，歡迎一起來作為 project initialize 工具，如果大家對於以上筆記有任何疑問，歡迎留言一起討論。