[技术与产品] 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 bower

来安装bower，然后这么用。

$ bower install jquery
$ bower install jquery --save

后一条命令会更新（或者生成）项目的bower.json，以后在别的地方部署时你只需要运行

$ bower install

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

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

bower安装的dependency放在bower_components下，你可以用.bowerrc来重载缺省设置。

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

好的工具的价值就在于对用户足够简单，没有学习成本。大部分场景下，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：

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

为了阅读方便，我做了不少精简。这里，bootstrap指定自己要依赖1.9以上的jquery，还在main里指定了其项目的入口文件，简直就是为打包工具量身定制的。真是「事了拂衣去，深藏身与名」的有为青年啊，什么叫惊喜，这TMD就是惊喜。

于是brunch就出现了。

brunch

brunch之前，已经有很多打包工具，我自己在django里用过pipeline，但很不完美。brunch帮你解决很多问题：你可以用它初始化一个项目模板，自动安装前端/后端的依赖，然后打包。每做一个新项目初始的绝大多数重复劳动都被brunch轻轻化解了。

安装brunch很简单：

$ npm install -g brunch

使用brunch也不难，这是开发模式：

$ brunch watch --server

这是生产模式：

$ brunch build --production

brunch是coffeescript写的，所以你可以用coffeescript来写configuration。基本上你配置好哪些文件要打包，打包的路径是什么就可以使用了。

brunch会读取bower的每个dependency的bower.json，然后使用里面main指定的文件进行分门别类地打包，生成css和js。

你自己的代码可以使用coffee，less等任意已知工具，只要安装对应的brunch plugin，就能一键打包。

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

先写这么多。