Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。

准备工作

  1. 安装node环境:node.js
  2. 安装Git,bower从远程git仓库获取代码包:git简易指南

安装bower

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

npm install -g bower

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

开始使用

使用help命令查看帮助

自定义包的安装目录

首先进入项目目录下,新建文件1.txt

然后命令行进入项目目录下,输入命令重命名该文件为.bowerrc

rename 1.txt .bowerrc

这个.bowerrc文件是自定义bower下载的代码包的目录,比如现在我的项目结构如下图:

那我的.bowerrc文件内容如下:

{
"directory" : "js/lib"
}

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": {
}
}

包的安装

下面终于开始安装需要的包了!
比如我要安装一个jquery,输入如下命令:

bower install jquery --save

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中--save参数是保存配置到你的bower.json,你会发现bower.json文件已经多了一行:

  "dependencies": {
"jquery": "~2.1.4"
}

包的信息

比如我们想要查找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

 

https://segmentfault.com/a/1190000002971135

什么是bower的更多相关文章

  1. ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用

    在 ASP.NET Core 中添加静态文件 虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNe ...

  2. "bower.json 中出现语法错误" 的解决方案之一

    当你用 Visual Studio 2015 Update 3 打开从别处下载的开源项目的时候,如果发现 Bower 提示 "bower.json 中出现语法错误". 请检查一下. ...

  3. Windows环境下的NodeJS+NPM+Bower安装配置

    npm作为一个NodeJS的模块管理,之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路,所以现在很有必要列出来记录下.我们要先配置npm的全局模块的存放路径以及cache的路径,例如 ...

  4. 【NodeJs环境下bower】如何更改bower_components文件夹的位置

    bower在初始化,默认是将bower_components文件夹放到项目的根目录下,若是public/index.html如何配置bower_components下的js或者css类库呢?只需要将b ...

  5. node、npm、gulp、bower、ionic下载及安装

    node: http://nodejs.cn/ npm: 随node一起安装了 gulp: http://www.gulpjs.com.cn/docs/getting-started/ bower: ...

  6. Mac安装Bower

    1.安装bower,得首先安装node: brew install npm //npm是nodejs的程序包管理器,如果安装过nodejs,可忽略此步. 2.安装Git(因为需要从Git仓库获取一些代 ...

  7. Bower是什么?

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

  8. Angular+Grunt+Bower+Karma+Protractor (Atom)

    1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...

  9. js的包管理工具bower安装

    bower需要:node 和 git node安装包下载:http://blog.csdn.net/myan/article/details/2028545 Git安装: 选择第二项:Use Git ...

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

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

随机推荐

  1. Unity3d 无网络权限下打开网站

    有人问“更多游戏”没有网络权限怎么实现,其实调用浏览器访问外部链接不需要网络通讯权限,代码如下: Uri moreGame = Uri.parse("http://wapgame.189.c ...

  2. Git图文教程:从零到上传GitHub项目

    一:安装Git 从Git官网下载.安装客户端 二:本地建立代码仓库 在开始菜单中找到 Git Bash 并打开 配置身份 git config --global user.name "pen ...

  3. angular模板加载 ----ng-template

    Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 如果排版乱掉,请查阅https://www.zybuluo.com/ ...

  4. 找不到所需要的ndbm.h头文件

    具体描述: 通过deb包安装gdbm之后,发现找不到所需要的ndbm.h头文件.但是你会发现一个叫gdbm-ndbm.h的文件,你只需要把文件名改成ndbm.h就可以了,当然需要一定权限. sudo ...

  5. 详解MySQL大表优化方案( 转)

    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...

  6. window.open窗口关闭后刷新父窗口代码

    window.open窗口关闭后刷新父窗口代码 window.opener.location.href=window.opener.location.href;window.close();

  7. Spring小结

    一.环境搭建 创建Maven项目 一般pom.xml会出错,本地若无相应版本的jar包,则无法下载或下载速度非常慢,我的解决方案是,查找本地仓库的jar,修改为本地仓库有的jar即可 pom.xml的 ...

  8. android 开源项目一览

    直接拿来用!最火的Android开源项目(一) http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects ...

  9. Android框架

    http://blog.163.com/vicent_zxb/blog/static/1858861312011488262665/ (一)Android系统框架详解 Android采用分层的架构,分 ...

  10. 关于Linux中exec的一点心得

    最近在学习linux操作系统中的相关知识,在使用execlp系统调用时,发现了些有趣的东西. 首先,关于execlp函数的用法: int execlp(const char *file, const ...