前言
Brunch 是一個搭配前端技術使用的組建自動化 (build automation) 軟體，可簡化編譯前端專案程式碼的過程。本文會談談為什麼要在前端專案用 Brunch，並會展示一個簡單的實例。
為什麼使用 Brunch
前端技術 HTML、CSS、JavaScript 的代碼都是明碼，傳送到前端時並沒有經過編譯的過程。那麼，我們為什麼需要使用 Brunch 呢？在網頁技術多年的演進中，發展出許多前端技術的前置語言：
- 模板語言 (template language) 用來取代 HTML
- CSS 預處理器 (preprocessor) 用來取代 CSS
- JavaScript 轉譯器 (trans-compiler) 用來取代 JavaScript
由於瀏覽器不支援這些前置語言，想執行專案的代碼時勢必要將這些前置語言的代碼轉回等效的前端代碼。這些工具各自會附帶自己的編譯器，但在撰寫程式的過程中，我們往往要呼叫這些工具多次，無形中耗費許多時間。像 Brunch 這類組建自動化軟體就是用來簡化編譯專案的過程。
傳統的網頁程式，像是 Rails 或 Node.js 等，是以後端程式為中心，通常會帶有自己的組建自動化軟體。Brunch 和這類軟體相異，因 Brunch 適用於前端專案。近年來網頁程式著重 SPA (single-page application) 和前後端分離 (參考這裡)，像 Brunch 這類軟體自然會有市場。
為什麼不用 Grunt、Gulp、Webpack 或其他同質軟體
Brunch 並不是 JavaScript 生態圈中最早出現的組建自動化軟體，也不是最知名的。Grunt、Gulp、Webpack 等同質軟體都比 Brunch 名氣來得大；那為什麼要使用 Brunch 呢？比起其他的軟體，在 Brunch 中等效的設定檔往往更短。Brunch 設定檔可以比較短的秘訣在於 Brunch 使用一些內隱規則將原本要寫在設定檔中的東西隱含在專案架構中；因此，我們可以用更短的設定檔達到相同的效果，但要稍微學一下 Brunch 的規則就是了。
實例展示
在本節中，我們會實際建立一個 Brunch 專案。這個專案使用以下的前端技術：
- Handlebars：和原生 HTML 接近的 HTML 模板語言
- Sass：CSS 預處理器，有類 Ruby 的 Sass 和相容於 CSS 的 SCSS 兩種語法
- (選擇性) Bourbon：一些預寫好的 Sass 程式碼
- Babel：可編譯 ES6+ 的 JavaScript 轉譯器
- (選擇性) jQuery：世界上使用率最廣的前端函式庫
- (選擇性) ESLint：檢查 JavaScript 程式碼
這些技術的重點在於 Handlebars、Sass、Babel，這三項技術分別是 HTML、CSS、JavaScript 的前置語言；筆者選擇這些項目的重點在於其語法大抵上相容於原生前端技術，學習曲線較平滑。至於其他項目則是選擇性的，讀者可自行改為自己需要的技術。
我們將完整的專案放在這裡，本節展示建置的過程。
Brunch 是一個命令列工具，本身以 Node.js 套件的形式來發布，使用 npm 安裝 Brunch：
$ npm install -g brunch建立一個新的 Brunch 專案，此專案使用 Babel 來支援 ES6+：
$ brunch new myapp -s es6
$ cd myapp建立 Brunch 專案時，會用專案模板 (project template) 來快速建立專案，像是本例的 es6 就是一個專案模板。在 Brunch 中將專案模板稱為 skeleton 。這裡有一些已建好的 skeletons ，可用來建專案；不過，筆者測試後發現有些 skeleton 年久失修，實際上會引發錯誤；筆者無法逐一測試這些模板，要請讀者自行嘗試。
在專案中加入 Handlebars 的支援：
$ npm install --save-dev handlebars-brunch加入 plugin 後要修改副檔名以啟用 Handlebars。舉例來說，將 app/index.html 改為 app/index.hbs ，這時候網頁就會變成合法的 Handlebars 模板，之後再視需求慢慢重構。
在專案中加入 Sass 的支援：
$ npm install --save-dev sass-brunch同樣地，將專案的 style.css 改為 style.scss ，該檔案就會從 CSS 檔案變成合法的 Sass 檔案，之後再慢慢重構即可。
在專案中加入 jQuery：
$ npm install --save jquery由於 jQuery 會編譯到產出的代碼，此處要用 --save 而非 --save-dev。此外，要在實際的專案程式碼中引用 jQuery：
var $ = require("jquery");之後就照一般的習慣寫程式即可。
我們在專案中使用 ESLint 來檢查 JavaScript 部分的代碼：
$ npm install --save-dev eslint-brunch eslint第一次使用 ESLint 前要先初始化：
$ node_modules/.bin/eslint --initESLint 不是必備的，但對改善 JavaScript 程式碼有相當的幫助。
將 Brunch 用於現有的 Node.js 專案
Brunch 並沒有內建可將 Brunch 套用在現有 Node.js 專案的指令，不過，手動加入 Brunch 並不是太困難。只要手動撰寫 brunch-config.js ，並在 package.json 中加入 Brunch 相關的套件即可。