Bower是一个客户端技术的软件包管理器,是由twitter推出的。它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt.

安装bower

使用npm,打开终端,输入:

npm install -g bower

其中-g命令表示全局安装

全局安装Bower后,可以查看Bower的帮助信息,使用命令:
> bower help

用法:

bower <command> [<args>] [<options>]

命令Commands:

cache-clean    清除Bower的缓存,或清除指定包的缓存
    completion      Bower的Tab键自动完成
    help                  显示Bower命令的辅助信息
    info                   指定包的版本信息和描述
    init                     交互式的创建bower.json文件
    install               安装一个本地的包
    link                    包目录的符号连接
    list, ls               列出所有已安装的包
    lookup              根据包名查询包的URL
    register            注册一个包
    search              根据包名搜索一个包
    uninstall           删除一个包
    update              更新一个包

bower install jquery-ui#1.10.1

上面的命令指定安装jquery-ui的1.10.1版。

如果某个库依赖另一个库,安装时默认将所依赖的库一起安装。比如,jquery-ui依赖jquery,安装时会连jquery一起安装。

安装后的库默认存放在项目的bower_components子目录,如果要指定其他位置,可在.bowerrc文件的directory属性设置。

{
"directory" : "public/components"
}
bower install jquery --save

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中--save参数是保存配置到你的bower.json.

维护依赖

使用 bower install package --save 能够将包安装到你的项目中,同时将依赖关系写入到bower.json 的 dependencies 数组。

1
2
# install package and add it to bower.json dependencies
$ bower install <package> --save

同理,使用 bower install package --save-dev 可以将包写入到 bower.json 的 devDependencies数组。

1
2
# install package and add it to bower.json devDependencies
$ bower install <package> --save-dev

bower初始化

命令行进入项目目录中,输入命令如下:

bower init

会提示你输入一些基本信息,根据提示按回车或者空格即可,然后会生成一个bower.json文件,用来保存该项目的配置,如下:

{
"name": "bb_boot",
"version": "0.0.1",
"authors": [
"savokiss <jaynaruto@qq.com>"
],
"moduleType": [
"amd"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"js/lib",
"test",
"tests"
],
"dependencies": {
}
}

bower.json的规范中的选项,主要包括:

  • name 包名,必选。
  • version 有意义的版本号。
  • main 字符串或者数组,指定主要会用到包里面哪些文件。
  • ignore 数组,一系列文件名或者目录,告诉bower在安装包的时候忽略指定的内容。
  • keywords 字符串数组,推荐添加,主要是帮助用户能够搜索到你的包。
  • dependencies 哈希结构,依赖的包,可以指定版本号,版本号范围参考
  • devDependencies 哈希结构,生产环境下依赖的包,版本号范围参考
  • private 布尔值,设置为true代表你想保持私有,并且将来不会发布它。
{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
 

包的信息

比如我们想要查找jquery都有哪些个版本,输入如下命令:

bower info jquery

会看到jquerybower.json的信息,和可用的版本信息

可以看到jquery最新的兼容版版本为1.11.3

包的更新

上面安装的是最新版的高版本jquery,假如想要兼容低版本浏览器的呢?
已经查到兼容低版本浏览器的jquery版本为1.11.3,下面直接修改bower.json文件中的jquery版本号如下:

  "dependencies": {
"jquery": "~1.11.3"
}

然后执行如下命令:

bower update

bower就会为你切换jquery的版本了

包的查找

还有一个很重要的功能,就是包的查找,比如我想要安装bootstrap的某个插件,但是记不住名字了,就可以直接在命令行输入:

bower search bootstrap

bower就会列出包含字符串bootstrap的可用包了

包的卸载

卸载包可以使用uninstall 命令:

bower uninstall jquery

bower install bootstrap
bower会自动从github上down最新的代码,而且,会自动将依赖包jquery也下载进来。
 
 
指定版本:
bower install jquery#1.7.2

bower install bootstrap#3.3.5 --save

多版本共存:

同时安装一个package的不同版本(多版本共存), 比如安装jquery v1.7.0,并且安装v1.9.1以及最新版本的jquery(目前是2.1.1), 像下面这样安装完成后,你的bower_components目录下就会同时存在jquery-older目录(1.7.0), jquery-old目录(1.9.1), jquery目录(最新版)。

# 安装jquery v1.7.0
bower install jquery-older=juqery#1.7.0 [<options>] # 安装jquery v1.9.0
bower install jquery-old=juqery#1.9.1 [<options>] # 安装最新版jquery
bower install jquery [<options>]

参考:

https://segmentfault.com/a/1190000000349555

前端bower使用的更多相关文章

  1. FastAdmin 学习线路 (2018-09-09 增加 Layer 组件)

    FastAdmin 学习线路 (2018-09-09 增加 Layer 组件) 基础 HTML CSS DIV Javascript 基础 jQuery php 基础 对象 命名空间 Apache 或 ...

  2. Flask+ Angularjs 实例: 创建博客

    允许任何用户注册 允许注册的用户登录 允许登录的用户创建博客 允许在首页展示博客 允许登录的用户退 后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...

  3. 【转】前端工程筹建NodeJs+gulp+bower

    转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...

  4. bower一个强大的前端依赖包管理工具

    在介绍之前,你必须的知道bower是基于nodejs开发的,所以你首先必须得有个nodejs环境,至于这么安装nodejs网上一大堆教程,对了使用bower还需要安装git,这里就不多说了. #### ...

  5. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  6. 前端见微知著工具篇:Bower组件管控

    在上一篇文章中,我们提到了利用Grunt可以完成的内容,其中最主要的功能就是利用各种Node的组件来搭配出一个自动化高亮,自动化运行等的Web前端开发环境.但是Bower也是一个专门来管理各种依赖组件 ...

  7. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  8. 使用bower管理前端依赖

    bower,类似于npm.maven等后端管理构建工具一样,bower可以用来管理前端浏览器依赖,关于bower详细介绍参考官网:https://bower.io/ bower init命令:初始化项 ...

  9. Bower =&gt; 前端开发也有包管理器

    摘要: 一直以来npm,pip等各种包管理器好像都和前端开发没什么太大关系,当然因为nodejs的原因可能感觉npm会亲切一些,不过终归不是针对客户端的包管理工作,所以Bower的出现确实让人眼前一亮 ...

随机推荐

  1. 如何调试shell脚本

    今天看shell脚本攻略的时候,看见这个方法,感觉还是不错的 #!/bin/bash function DEBUG(){ [[ $_DEBUG == 'on' ]] && $@ || ...

  2. 在SQLite Expert上用日期类型字段作为条件查询时注意日期的格式化

    经验之谈: 情况一:没有查询结果 and R_CheckInTime > '2015-7-12 18:47:00' and R_CheckInTime < '2015-7-18 18:48 ...

  3. 三天没有写题了,罪过!--Hash Table Start

    (1)Island Perimeter 解题思路: 在矩阵上循环并记录岛(1)的个数;如果当前节点是岛,则检查其是否具有任何右邻居或下邻居,有的话邻居计数加1 ;岛的周长结果为islands * 4 ...

  4. (转)关于tcp和udp的缓冲区

    (一)基础知识 IPv4 数据报最大大小是65535(16位),包括IPv4头部. IPv6 数据报最大大小是65575,包括40个字节的IPv4头部 MTU,这是由硬件规定的,如以太网的MTU是15 ...

  5. android去掉顶部标题栏

    在清单文件(manifest.xml)里面实现 <application> <activity android:name="cn.ui.activity.UserRegAc ...

  6. 检测URL地址是否有响应

    今天突然出来了一个问题,URL地址调用导致程序卡死(原因是服务挂了,磁盘坏了) 然后想到了,再调用URL地址前先判断下地址是否有响应,这样不就可以解决问题了吗? C# 代码: /// <summ ...

  7. lighttpd的超时参数详解

    今天服务器上传大文件,服务器php一直没有响应,响应为0KB,经排查发现是lighttpd的超时设置问题 server.max-keep-alive-idle = 5server.max-read-i ...

  8. Linux基本配置和管理 2 ---- Linux多命令协作----管道及重定向

    1 管道和重定向 1 在Linux中大多数命令都很简单,很少出现复杂的命令,每个命令只是实现一个简单的功能,我们可以通过组合不同的命令来实现复杂的功能 2 在Linux中几乎所有的命令返回的数据都是纯 ...

  9. 聊一聊JQ中delegate事件委托的好处

    下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...

  10. apacheds的客户端

    Apache DS管理的JAVA实现 LdapConnection connection = new LdapNetworkConnection("localhost", 1038 ...