前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[技术与产品] Bower & Brunch

[技术与产品] Bower & Brunch

作者头像
tyrchen
发布2018-03-28 14:34:12
9370
发布2018-03-28 14:34:12
举报
文章被收录于专栏:程序人生

今天写作时间太短,稍微探讨一下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。你可以使用

代码语言:javascript
复制
$ npm install -g bower

来安装bower,然后这么用。

代码语言:javascript
复制
$ bower install jquery
$ bower install jquery --save

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

代码语言:javascript
复制
$ bower install

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

代码语言:javascript
复制
$ bower install https://github.com/company/repo

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

代码语言:javascript
复制
$ 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:

代码语言:javascript
复制
{
  "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很简单:

代码语言:javascript
复制
$ npm install -g brunch

使用brunch也不难,这是开发模式:

代码语言:javascript
复制
$ brunch watch --server

这是生产模式:

代码语言:javascript
复制
$ brunch build --production

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

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

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

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

先写这么多。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2014-04-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序人生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Bower
  • brunch
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档