[教學] Brunch.io 初體驗

Brunch.io 初體驗

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

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

安裝方式

npm install brunch

使用方式

產生新專案,

brunch new [webapp]<br></br>

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

brunch new [webapp] --skeleton [url]<br></br>

檔案編譯

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

brunch build [--optimize]<br></br>

檔案監控

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

brunch watch [--server]<br></br>

配合 Bower

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

bower.json<br></br>.bowerrc<br></br>

Deploy

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

git checkout ph-pages<br></br>brunch build<br></br>

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

git push origin ph-pages<br></br>

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

Skeletons

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

https://github.com/brunch/brunch/wiki/Skeletons<br></br>

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

附註

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

後記

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

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

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn