[技术与产品] 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,前端从此过上了美好的生活。^_^

先写这么多。

原文发布于微信公众号 - 程序人生(programmer_life)

原文发表时间:2014-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏私有云搭建

私有云搭建

随着云计算和移动办公大潮的到来,iPad、智能手机等家庭联网设备不断增多,以及搭载小容量SSD笔记本电脑的流行,能够跨平台分享的个人云服务需求不断...

2K1
来自专栏安恒信息

数十万安卓设备存在漏洞,你的手机还是你的吗!!!

安卓系统有一个隐藏的功能叫做开发者选项。这个功能是为了方便开发人员测试性能的时候调试手机,所以这个选项在安卓手机里是隐藏起来的,但是大多数安卓设备厂商,以及安卓...

1172
来自专栏杨建荣的学习笔记

脚本改进的一点体会(r12笔记第60天)

一直以来我们想要推进内部的自动化系统,但是总是会遇到各种各样具体的问题,有时候我们准备好了,但是总是会有一些因素的干扰,再加上工作时间的安排,有些事情就一...

3489
来自专栏美团技术团队

大众点评账号业务高可用进阶之路

1983
来自专栏猿人谷

一个项目的简单开发流程——需求、数据库、编码

关于一个项目的简单开发流程   前言:从11月8号开始到11月12号我们小组使用html+easyUI+ashx+异步,开发了一个简易的网 站,也就是简单的门户...

2915
来自专栏IT笔记

微服务化的基石——持续集成

在很多微服务化的文章中,很少会把持续集成放在第一篇,因为大多数的文章都会将如何拆的问题,例如拆的粒度,拆的时机,拆的方式。

5598
来自专栏数据之美

网站数据统计分析之二:前端日志采集是与非

在上一篇《网站数据统计分析之一:日志收集原理及其实现》中,咱们详细的介绍了整个日志采集的原理与流程。但是不是这样在真实的业务环境中就万事大吉了呢?事实往往并非如...

5187
来自专栏小文博客

腾讯云关系型数据库,3年只需86(新用户26)

3815
来自专栏java一日一条

内存不足:杀死进程还是牺牲子进程

早上6点,我不得不开始处理“叫醒”我的一些问题。因为当这些问题发生的时候,我的手机铃声响了。昏睡中的我非常不情愿地拿起了手机,检查我是否疯狂到将叫醒闹钟设在了早...

1291
来自专栏腾讯研究院的专栏

常见的几种数据层容灾架构比较分享

陈守志 腾讯公司平台运营开发组 一、关于容灾   关于容灾主题,这里罗列对比了几种常见的容灾案例: ?   相对接入层、应用层容灾而言,数据层的容灾相对...

5425

扫码关注云+社区

领取腾讯云代金券