You are here
宁皓网 Bower 前端包管理 有大用
Bower 是一个前端的包管理工具，你可以用它来方便的管理前端项目用到的资源，比如 Bootstrap，JQuery，Angular 等等。确定你的电脑上安装了 node，就可以安装 bower 了，输入：npm install -g bower
摄影：Florian Redlinghaus
来自 https://ninghao.net/course/1959
00-课程介绍
Bower 是一个专门为前端开发准备的包管理工具，这里说的包，你可以想像成是包裹，里面是包装的一些东西。或者也可以叫做模块，还有组件。很多常用的跟前端开发相关的东西，都做成了 bower 的 包 ... 发布到了网上 ... 比如 bootstrap ，angular ，jQuery ，backbone 等等 ...
我们可以使用 bower 通过命令去下载这些包 ... bower 同时会下载这些包依赖的其它的东西 ... 比如你用 bower 下载 bootstrap ，bower 会把 bootstrap 依赖的 jquery 一块给你下载下来 ...
bower 通过一个叫 bower.json 的文件来描述你的项目，在这个文件的上面， 你可以把你的项目需要的一些前端的东西列出来 ... 这样你在发布项目的时候，就不需要在项目里面包含这些东西了，因为用户可以使用 bower install ... 自动的下载所有的你在 bower.json 文件里列出来的东西，还有它们依赖的其它的东西。
来自 https://ninghao.net/video/1960#info
01-搜索你想要的
打开 bower.io，点击 Search packages ... 搜索包 ... 这里会列出一些热门的跟前端开发相关的东西 ... 比如 Bootstrap ，Angular，jQuery 等等 ... 你可以根据 Stars 这列里的数字来判断这个包是不是受欢迎 ... 这里你可以找到挺多很有意思的东西 ...
在文本框里输入你需要的东西 ... 比如我要找跟 Bootstrap 相关的东西，输入 bootstrap ... 这样会列出所有的跟 bootstrap 框架相关的东西。点击这个名称 ... 会打开这个包在 Github 上面的的版本库，你可以看一下里面都有什么东西 ... 还有相关的说明等等 ...
使用这里列出来的名称，可以去把它下载下来 ... 除了通过这个 Web 界面去搜索，我们也可以直接在命令下面去搜索 ... 打开命令行工具 ... 进入到项目所在的目录 ... 然后使用 bower search 去搜索想要的东西 ... 比如找一下 bootstrap 相关的 ...
bower search bootstrap
bower 会根据我们要找的东西，返回一个列表 ... 这里就是跟 bootstrap 相关的所有的包 ...
来自 https://ninghao.net/video/1961#info
02-查看包里的东西：bower info
想查看一下某个包到底是干什么的，可以使用 bower info 这个命令 ... 比如我想看一下 bootstrap 是个什么玩意 ... 输入 bower info bootstrap ...
在一开始，会显示 Bootstrap 这个包的相关的信息 ... 名称，介绍 ... 在介绍里说，Bootstrap 是一个很受欢迎的前端框架 ... Version 这里会显示当前最新的版本是多少 ... 下面还有项目的网址，主要的文件 .. 忽略的文件 ... 还有这个包依赖的其它的东西 ... 也就是在这里列出的依赖，在安装这个包的时候，bower 会自动去把这个依赖也下载下来 ...
bower info bootstrap --verbose
下面的 Available versions 这里，显示的是所有的可用的版本 ... 我们也可以查看某个具体的版本的相关的信息 ... 可以这样，先输入 bower info ... 后面加上包的名字 .. bootstrap ... 再用一个 # 号，后面加上具体的版本号 ...
bower info bootstrap#3.0.3
来自 https://ninghao.net/video/1962
03-下载指定的包：bower install
bower install 这个命令可以下载指定的包，install 是安装的意思，之所以使用 install，而不是 download ，是因为，它不仅可以下载你指定的东西，还可以去把这个东西所依赖的其它东西也一块儿下载下来。
下面我们用这个命令去把 bootstrap 这个前端框架下载下来，输入 bower install ... 后面加上要下载的包的名称 ... 这里就是 bootstrap ... 如果现在回车，bower 会去下载最新版本的 bootstrap ... 想要指定具体的版本 .. 可以加上一个 # 号，然后是版本号 ... 这里我们先去下载 3.0.0 版本的 bootstrap ...
bower install bootstrap#3.0.0
回车 ... bower 最后会显示出都下载了什么东西 ... 这里有 3.0.0 版本的 bootstrap ，另外还有 jquery ... 虽然我们没让 bower 去下载 jquery ，不过 jquery 是 bootstrap 依赖的东西，下载 bootstrap ，就会自动去下载它依赖的东西，这里就是 jquery ...
查看一下当前目录 ... 输入 ls ... 这里会有一个 bower_components ... 这个目录是 bower 默认的存储下载的包的地方 ... 再查看一下这个目录 .. ls bower_components .. 里面会有 bootstrap ... 还有 jquery ... 可以再到图形界面看一下 ... open .
打开 bootstrap 这个目录 ... 这里你会看到很多文件 ... 比如 Bootstrap 的 less 源文件 ... 一些示例 .... 一般在你的项目里，想要使用的 bootstrap 框架，会包含在 dist 这个目录的下面 ... dist 的意思就是 distribution ... 正式发行的版本 ... 在这个目录的下面，你会看到熟悉的几个目录 ... css 里面就是 Bootstrap 框架的样式表 ... js 下面，就是 bootstrap 框架交互的功能需要用到的脚本文件 ...
来自 https://ninghao.net/video/1963#info
04-bower.json
bower 的每个包里面都有一个叫 bower.json 的文件，在这个文件里面会使用 json 数据的格式来描述这个包，比如包的名称，描述，版本 ... 主要的文件，依赖的东西等等 ... 你可以为项目手工去创建一个 bower.json ... 或者使用 bower 的 init 命令，使用交互的方式去创建这个文件。每次问你一个问题，根据你的回答来创建这个文件 ...
打开命令行 ... 进入到项目所在的项目 .. 输入 bower init ... 然后回车 ..
name ... 就是我们的项目的名字 ... 默认会使用项目目录的名字 ... 直接按下回车 ... version 就是项目的版本号，输入 0.0.1 ... description ... 描述一下我们的项目是做什么的 ... Bower course by ninghao.net ... 回车 ... main file ... 指定主要的文件 ... 目前还没有，直接回车 ...
这里又提示 what types of modules does this package expose? 这个包使用的模块的类型 ... 文档里没说明这是什么意思 ... 这里先选择 globals ...
然后是 keywords ... 关键词， 用几个关键词描述一下项目是关于东西的 ... 有点像是给你的项目分分类 ... 如果你想把你的项目打成包发布到网上，你需要填写这个选项 ... 一般情况下，我们可以忽略掉 ...
antuors ，项目的作者 ... 输入你的名字，团队的名字，或者公司的名字 ... wanghao <wanghao@ninghao.net> ... 这次又会问 license ，项目用到的许可是什么 ... 直接按下回车 ..
homepage ... 项目的主页 ... http://ninghao.net ... 回车 ... 又会问 ... set currently installed components as dependencies? 意思是说，你想把现在安装的东西作为这个项目的依赖吗？ 输入 y ... 我想 ...
add commonly ignored files to ignore list? 添加一般忽略的文件到忽略的列表里吗？ 输入 y ...
这次问的问题是，是否要把这个项目作为私有的项目 ... 如果你不想意外的把你的私有的项目发布到网上，可以把这个项目设置成私有的项目 ... 这里我不太在乎 ... 输入 n ...
bower 最后会问我们，这个 bower.json 文件是不是你想要的 ... 这个文件就是根据刚才我们回答的问题，自动生成的... 注意，在 dependencies 这里，列出了 3.0.0 版本的 bootstrap 作为这个项目依赖的东西 ...
确定以后，输入 y ... 然后回车 ... ls 查看一下当前目录下面的东西 ... 这里会有一个 bower.json ，里面的内容就是刚才最后一步我们看到的 ...
有了这个文件以后，在发布项目的时候 .... 我们就可以把 bower_components 这个目录删除掉 ... 别人下载了你的项目，然后输入 bower install ... 这样会根据 bower.json 里面列出的东西，去安装项目的依赖 ...
先删除掉 bower_components ... rm -rf bower_components ... ls 查看一下 ... 然后输入
bower install
... 你会看到 bower 会自动给我们下载项目依赖的 bootstrap ... 因为 bootstrap 又依赖 jquery ，所以，也会把 jquery 一看下载下来 ...
来自 https://ninghao.net/video/1964#info
05-更新包：bower update
查看当前项目使用 bower 安装的包，可以使用
bower list
... bower 会再去执行 check-new ，查看一下最新的版本 ... 然后会显示出安装的包的列表 ... 这里我们只安装了 bootstrap ... 版本是 3.0.0 ... 右边会显示。它现在最新的版本是 3.3.1 ... 另外还会显示这个包依赖的 jquery ... 这里会用一个树形结构来显示它们的关系 ...
我们可以再去升级一下 bootstrap ... 可以用文本编辑器打开 bower.json ... 然后找到 bootstrap ... 修改一下它的版本 ... 这个版本号可以修改成最新的 3.3.1 ... 或者我们也可以使用一个版本的范围 ... 比如大于，小于，大于等于等等 ... 用法你可以参考这个地址 ..
https://github.com/npm/node-semver
这里我把它改成 >=3.0.0 ... 保存一下 bowr.json ... 然后执行一下 bower update ... 回车 ... 这样 Bower 会根据 bower.json 里面的指定的依赖，去更新包 ..
完成以后，再输入 bower list ... 现在你会发现，bootstrap 已经变成最新的版本了。
来自 https://ninghao.net/video/1965#info
06-把安装的东西保存到依赖列表里：--save
安装用的是 bower install ，后面加上要安装的东西，你可以再添加一个额外的 --save 参数，或者使用大写的 -S ... 它可以把你安装的包添加到 bower.json 的依赖列表里面。
比如我们去安装一下 backbone ... 输入 bower install backbone ... 后面加上一个 --save ... 或者也可以使用 -S ... 注意这个 S 要用大写的 ...
bower install backbone --save
(bower install backbone -S)
另外，如果我们安装的这个包属于开发工作需要的依赖，可以在这里把 --save 换成 --save-dev ... 这样会把包放到 bower.json 里面的 devDependencies 上面 ... --save-dev 的简写形式是 -D ...
在 devDependencies 里面列出的东西，执行 bower install 的时候，如果加上一个
--production 或者 -P 参数的时候，这些依赖不会被安装 ...
backbone 属于应用正式运行要用到的依赖，所以这里还是使用一个 --save ... 回车 ... 执行一下 ..
完成以后，查看一下安装的包的列表 ... 输入 bower list ... 这里你会看到刚才安装的 backbone ... 再查看一下 bower.json ... cat bower.json ...
在 dependencies 这里，同样可以找到 backbone ... 因为在安装它的时候，我们用到了
--save 参数，这样会把安装的东西放到这个 dependencies 里面 ...
注意这个 backbone 后面的版本，版本号的前面加上了一个波浪号 ... 这种版本号的写法叫 tilde ranges ... 它的意思是，需要的 backbone 的版本可以是 1.1.x ，也就是版本号最后一位数，可以随便，比如将来有 1.1.3，1.3.4 ，在执行 bower update 的时候，都会去更新 ...
https://github.com/npm/node-semver#tilde-ranges-123-12-1
来自 https://ninghao.net/video/1966#info
07-卸载包：bower uninstall
使用 bower 的安装与卸载，其实就是在我们的项目里面添加包或者删除包。从项目里面卸载包，用的是 bower uninstall ... 后面可以加上要卸载的包的名字 .... 这样会从本地删除掉包文件还有它依赖的所有的东西 ...
假设在我们的项目里面，不想使用 backbone 了，因为打算要用 angular 代替它 ... 这样我们就可以先去卸载掉 backbone ... 输入 bower uninstall backbone . .. 如果想把 backbone 从 bower.json 里面也删除掉，这里可以再加上一个 --save ...
bower uninstall backbone --save
完成以后，查看一下 bower_components 里面的东西 ...
ls bower_components
现在这里已经删除掉了 backbone 还有它依赖的其实的东西 ... 查看一下 bower.json ...
cat bower.json
在 dependencies 这里，也去掉了 backbone ...
来自 https://ninghao.net/video/1967#info
08-清除包：bower prune
bower prune 就是使用 bower uninstall 去清除掉不再需要的包 ... 这里我们先再安装一下 backbone ... bower install backbone --save ...
然后使用文本编辑器打开 bower.json 这个文件 .... 在 dependencies 这里，去掉 backbone ... 再保存一下这个文件 ... 然后输入 bower prune .... 回车 ...
bower 会查看 bower.json 里面的依赖，对比在本地安装的包，如果之前安装的包在 bower.json 里找不到了，bower 就会把它们删除掉 ...
完成以后查看一下 bower_components ... 在这里，我们已经看不到 backbone 了 ...
来自 https://ninghao.net/video/1968#info
09-离线安装包：--offline
在用 bower 安装的时候，会把包缓存到本地，下次你再安装同样的包，就可以使用本地的缓存 ... 查看这些缓存，可以使用 bower cache list ...
输入 bower cache list .. 显示的就是所有的缓存 ... 下面我们用本地的缓存再去安装一下 angular ... 因为我之前使用 bower install 安装过 angular ... 输入 bower install angular ... 后面要加上一个 --offline ... 表示要使用本地的缓存去安装 ... 或者可以使用它的简写形式 ... 一个小写的 -o
bower install angular --save --offline
这样会强制使用本地的缓存去安装 angular ... bower cache clean 可以清空所有的缓存 ... 先清空一下 ... 查看一下缓存 bower cache list ... 现在已经没有缓存的东西了 ... 再试着使用缓存去安装一下 angular ...
会显示 Package angular not found ，在本地缓存里面没有找到 angular 这个包 ...
来自 https://ninghao.net/video/1969#info
10-项目的版本号：bower version
当我们给项目添加了一些功能，修正了一些错误的以后，你可能想要去改变一下项目的版本号，记录一下 ... 这个版本号最好让它更有意义，你可以参考 http://semver.org/ 提供的为项目创建版本号的规则 ... 简单讲就是一个项目的版本号分成三个部分，MAJOR，MINOR，还有 PATCH。
MAJOR 部分在项目有很大变化以后才会去变动，MINOR 就是当你为项目添加了一些功能以后，可以变动一下这部分，PATCH 部分在为项目修正了错误，可以改动一下 ...
bower version 0.0.2
之前我们在创建 bower.json 这个文件的时候，已经为项目设置了一个版本号。0.0.1 ... 想要修改这个版本号，可以使用 bower version 这个命令 ...
比如我们要把项目的版本号设置成 0.0.2 ... 在这个命令的后面，可以加上这个具体的版本号 ... 或者，我们也可以使用 major ，minor 还有 patch 这几个关键词，来修改版本号里对应的部分 ... 比如我们要修改版本号里的最后一部分，可以使用 patch ..
bower version patch
bower 会返回修改之后的版本号，你会看到，现在是 0.0.2 ... 修改版本号的第二部分，用的是 minor ... 输入
bower version minor ...
现在项目的版本号变成了 0.1.0 ... 让项目的版本号的第二部分进了一位 ... 再执行一下这行命令 ... 版本号就会变成 0.2.0 ...
要改动项目的版本号的第一部分，也就是 major 部分，可以使用 major 这个关键词 ...
bower version major
... 现在版本号变成了 1.0.0 ...
来自 https://ninghao.net/video/1970#info
11-修改版本号自定义提交信息：--message
--message
在 bower version 这个命令的后面加上一个 --message 参数，可以自定义一个提交的信息 .. 也就是当我们在项目里面用到了版本控制，bower 会用 --message 参数后面的值，作为一次提交的信息 ...
这里我们先把项目的版本号改回成原来的 0.0.1 ... bower version 0.0.1 ...
然后确定我们在电脑上安装了 git 以后，可以先初始化一下 ... 输入 git init ... 关于 git 的使用，你可以参考宁皓网的 git 版本控制这个课程 ... ( http://ninghao.net/course/1882 )
再去手工的做一次提交 ... 先添加要提交的东西 ... git add . 再用 git commit 去提交一下 ... 后面加上一个 -m 参数 ... 指定一条提交信息 ... 初始化项目
然后我们再用 bower version 去修改一下项目的版本号 ... bower version 后面用 patch 来修改一下项目版本号的最后一部分 .. 再加上一个 -m 参数 ... 设置一条提交的信息 ... 在这个信息里面，如果你想包含版本号的话，可以使用 %s .... 将 backbone 替换成 angular ...
bower version patch -m '%s 将 backbone 替换成 angular'
完成以后，再查看一下 git 提交的日志 ... 输入 git log ... 你会看到最后一次提交的信息，就是我们用 bower version 这条命令的时候，在 m 参数的后面指定的信息 ...
来自 https://ninghao.net/video/1971#info
12-配置：.bowerrc
我们可以配置一下 bower 的一些默认的行为，比如你可以决定让安装的包放到哪个目录的下面，把包发布到的位置，bower 使用的临时目录，使用的代理等等。这些配置信息可以放到一个叫 .bowerrc 的文件里面 ... 你可以把这个文件放到项目的根目录下面，也可以把它放到用户的主目录下面，这样所做的配置，会影响到所有的项目 ...
这里我们在项目的根目录下面，新建一个 .bowerrc ... vim .bowerrc ... 这个文件的格式使用的是 JSON ... 先输入一组花括号 ... 然后是要配置的选项，还有对应的值 ... 这里我配置一下 bower 的包项目存储的位置 ... 这个选项的名字是 directory ... 注意要用一组双引号 .. 然后输入冒号 ... 接着是对应的值 ... 设置成 "app/bower_components" ...
{ "directory": "app/bower_components/" }
如果不去修改这个 directory 选项的话，默认 bower 会把包装的包放到根目录下面的 bower_components 的下面 ... 现在，bower 应该会把安装的包放到 app 这个目录下面的 bower_components 里面。
保存一下 ...
然后我们可以先删除掉项目根目录下面的 bower_components ... rm -rf bower_components ... 然后再执行一下 bower install ... 去安装一下依赖的包 ...
ls ... 查看一下当前的目录，这里会出现一个 app ... 再看一下这个目录里的东西 ... ls app ... 你会发现这里有一个 bower_components ... 在这个目录的下面，就是我们安装的所有的包 ...
来自 https://ninghao.net/video/1972#info