[技術與產品] Bower & Brunch

昨天的文章引起了軒然大波，有人善意地提醒我不應講得這麼直白，很多事情管理者的自己知道就好，說出來容易「人心散了，隊伍不好帶」。對此，我持否定態度。大家都是成年人，可以用成熟的方式處理問題。通過控制知識和信息的流動，人為地製造或者默許無知，把管理停留在控制層面的，是非常初級的手法。

昨天的文章還鬧了個錯，我誤把「中關村東路」說成了「清華東路」，囧死了。這一定要收錄進『程序君尷尬集』中。

今天寫作時間太短，稍微探討一下bower和brunch這兩個web前端assets management的利器。

Bower

管理dependency一直是程序員的心病，從c語言一路走到現在，dependency hell一直存在，只不過工具的進步讓程序員不用再困擾糾結這個問題。我們看各種語言的dependency management工具：

• go: go get
• ruby: gems / bundle
• python: pip / eggs
• java: maven
• haskell: cabel (我是裝pandoc才認識這貨的)
• nodejs: npm
• erlang: rebar

寫到這裡我快哭了，親愛的c啊，你的dependency management工具在哪？什麼時候我們寫代碼，寫著寫著缺個庫，在頭文件里include一下，然後"show me the money"，就自動幫我完成了dependency的處理，該多好？

好吧，停止做夢，回到現實。為什麼我反覆說互聯網的好呢，你看看互聯網人用的工具，再看看通信人用得工具，頓時產生一種「人家開著阿帕奇，我們提著紅櫻槍上戰場的悲涼」。

在沒有bower的年代，前端的dependency是個麻煩，比如說我做的軟體，需要用jquery, ember, metis, lodash, ...我要一個個將他們從官網拷到項目的某個目錄下，比如說vendors下，然後在html里引用。一旦我需要更新某個dependency，則需要上官網，拷貝，更新。很麻煩。

twitter估計也被困擾，被噁心了很久，最終他們發布了bower。你可以使用

$ npm install -g bowern

來安裝bower，然後這麼用。

$ bower install jqueryn$ bower install jquery --saven

後一條命令會更新（或者生成）項目的bower.json，以後在別的地方部署時你只需要運行

$ bower installn

就可以了。你甚至可以用它管理github上的項目，比如說：

$ bower install https://github.com/company/repon

bower安裝的dependency放在bower_components下，你可以用.bowerrc來重載預設設置。

$ cat ~/projects/node-webkit-template/.bowerrcn{n "directory": "bower_components"n}n

好的工具的價值就在於對用戶足夠簡單，沒有學習成本。大部分場景下，bower完全自動化。但有時如果幾個庫之間有版本衝突，bower解決不了，就會讓你選擇，比如說metis和morris都依賴於jquery，但二者依賴的版本不同，你就需要人工干預一下了。

這裡稍稍講講bower和npm的不同。bower把所有的dependency放在同一級，所以需要解決依賴衝突；npm每個module保存自己的dependency，將dependency保存成樹狀，所以不需要解決。但npm的問題是磁碟空間利用很不經濟，同一個module如果到處被人依賴，那就會有n份複製品。

兩者的不同是前端一般會打包後一次性載入，重複的dependency會帶來太大的package後的文件，同時也會互相影響；而後端採用即用即插，所以可以使用完全獨立的dependency。

bower還悄悄的為別的工具做了件好事，就是每個dependency里可以用配置文件指定該module的入口。我們看bootstrap的bower.json：

{n "name": "bootstrap",n "version": "3.1.1",n "main": [n "./dist/css/bootstrap.css",n "./dist/js/bootstrap.js",n "./dist/fonts/glyphicons-halflings-regular.eot",n "./dist/fonts/glyphicons-halflings-regular.svg",n "./dist/fonts/glyphicons-halflings-regular.ttf",n "./dist/fonts/glyphicons-halflings-regular.woff"n ],n ...n "dependencies": {n "jquery": ">= 1.9.0"n }n}n

為了閱讀方便，我做了不少精簡。這裡，bootstrap指定自己要依賴1.9以上的jquery，還在main里指定了其項目的入口文件，簡直就是為打包工具量身定製的。真是「事了拂衣去，深藏身與名」的有為青年啊，什麼叫驚喜，這TMD就是驚喜。

於是brunch就出現了。

brunch

brunch之前，已經有很多打包工具，我自己在django里用過pipeline，但很不完美。brunch幫你解決很多問題：你可以用它初始化一個項目模板，自動安裝前端/後端的依賴，然後打包。每做一個新項目初始的絕大多數重複勞動都被brunch輕輕化解了。

安裝brunch很簡單：

$ npm install -g brunchn

使用brunch也不難，這是開發模式：

$ brunch watch --servern

這是生產模式：

$ brunch build --productionn

brunch是coffeescript寫的，所以你可以用coffeescript來寫configuration。基本上你配置好哪些文件要打包，打包的路徑是什麼就可以使用了。

brunch會讀取bower的每個dependency的bower.json，然後使用裡面main指定的文件進行分門別類地打包，生成css和js。

你自己的代碼可以使用coffee，less等任意已知工具，只要安裝對應的brunch plugin，就能一鍵打包。

bower + brunch，前端從此過上了美好的生活。^_^

先寫這麼多。

如果你對本文感興趣，歡迎訂閱公眾號『程序人生』（搜索微信號 programmer_life）。每天一篇原汁原味的文章，早8點與您相會。

更多brunch的配置，請戳鏈接：brunch/docs/config.md at stable · brunch/brunch · GitHub