Twitter的包管理工具 Bower介绍

bower

Bower是什么?

前端开发常会用到主流的框架和库,如:AngularBootstrapJquery等,项目开发中经常需要我们去官方下载或者更新,更麻烦的是如果有依赖包还需要单独下载。BowerTwitter 推出的一款包管理工具,它的出现就是为了解决这些问题。

Bower安装

与其他前端工具一样,Bower运行于Nodejs,通过NPM来管理,安装非常简单:

$ npm install -g bower

Bower命令列表

使用bower help查看所有命令

$ bower help

Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
version Bump a package version
Options:
-f, –force Makes various commands more forceful
-j, –json Output consumable JSON
-l, –log-level What level of logs to report
-o, –offline Do not hit the network
-q, –quiet Only output important information
-s, –silent Do not output anything, besides errors
-V, –verbose Makes output more verbose
–allow-root Allows running commands as root
–version Output Bower version
See ‘bower help <command>’ for more information on a specific command.

  • cache:bower缓存管理
  • help:显示Bower命令的帮助信息
  • home:通过浏览器打开一个包的github发布页
  • info:查看包的信息
  • init:创建bower.json文件
  • install:安装包到项目
  • link:在本地bower库建立一个项目链接
  • list:列出项目已安装的包
  • lookup:根据包名查询包的URL
  • prune:删除项目无关的包
  • register:注册一个包
  • search:搜索包
  • update:更新项目的包
  • uninstall:删除项目的包

Bower使用

1. 安装框架或库到项目

进入项目目录,安装需要用到的框架或者库:

$ bower install bootstrap
$ bower install Angular
# 或者指定版本号
$ bower install Angular#1.2.23
# 或者直接指定 git 库下载安装
$ bower install git://github.com/components/jquery.git
# 或者按照github上的别名
$ bower install components/jquery
# 或者本地库
$ bower install ./repos/jquery

注意:Bower依赖于版本控制工具git,需要从github拉取信息,需要安装git且设置path。

2. 查看项目中已导入的类库

$ bower list

bower check-new Checking for new versions of the project dependencies..
atom-test /data/proj/atom-test
├── angular#1.2.23 extraneous (1.2.24-build.441+sha.5061d2c available, latestis 1.3.0-rc.0)
└─┬ bootstrap#3.2.0 extraneous
└── jquery#2.1.1

用bower提交自己类库

1. 生成bower.json配置文件

$ bower init

[?] name: bower-test
[?] version: 0.0.1
[?] description: bower tools test
[?] main file: bower-test.js
[?] what types of modules does this package expose?
[?] keywords: bower-test
[?] authors: alei
[?] license: MIT
[?] homepage: http://www.u396.com/
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? No
[?] would you like to mark this package as private which prevents it from being
[?] would you like to mark this package as private which prevents it from being
accidentally published to the registry? No

{
name: ‘bower-test’,
version: ‘0.0.1’,
authors: [
‘alei’
],
description: ‘bower tools test’,
main: ‘bower-test.js’,
keywords: [
‘bower-test’
],
license: ‘MIT’,
homepage: ‘http://www.u396.com/’
}

[?] Looks good? Yes

2. 在github创建资源库 bower-test

3. 将本地项目提交至github

$ git init
$ git add .
$ git commit -m &quot;init&quot;
$ git remote add origin https://github.com/alei817927/bower-test
$ git push -u origin master

4. 注册到bower官方类库

$ bower register nodejs-bower git@github.com:alei817927/bower-test.git

5. 查询自己的包

$ bower search bower-test

结束语

本文只是列举了主要的使用方式,Bower 简单易用,项目开发准备阶段,可以轻松帮助我们解决繁琐的包管理问题,相信你已经迫不及待的想尝试了吧!

发表评论