跳到主要內容

文章

目前顯示的是 六月, 2013的文章

[教學] Brunch.io 初體驗

Brunch.io 初體驗

JavaScript 有 Grunt, CoffeeScriptBrunch 。如果你懂這句話,就知道 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,就可以避免掉…