Bower是什么?
前端开发常会用到主流的框架和库,如:Angular
,Bootstrap
,Jquery
等,项目开发中经常需要我们去官方下载或者更新,更麻烦的是如果有依赖包还需要单独下载。Bower是 Twitter 推出的一款包管理工具,它的出现就是为了解决这些问题。
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
:根据包名查询包的URLprune
:删除项目无关的包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 "init" $ 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
简单易用,项目开发准备阶段,可以轻松帮助我们解决繁琐的包管理问题,相信你已经迫不及待的想尝试了吧!