自动化构建之bower

Posted haonanElva

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自动化构建之bower相关的知识,希望对你有一定的参考价值。

官网地址:https://bower.io/

网站由很多东西组成 - 框架,库,一个大型网站有很多人一块创建,那么因为版本或者其他的原因导致文件重复,或者不是最新的。例如:jq的版本不一样但是都是jq。bower就是用来管理这些文件的,解决重复的组件、库,让所有的文件都是最新版本的。

下面详细介绍bower的安装到使用

1、安装bower

  在终端执行

npm install -g bower

便可完成安装,安装完成之后执行

bower -v

2、创建一个测试目录

mkdir bower-in-action

bower-in-action是问价名。

进入这个文件: 

cd bower-in-action/ 进入这个目录
mkdir query-bootstrap-in-action  创建一个项目目录(以jq bootstrap为例)
cd  jquery-bootstrap-in-action/  进入这个目录当前目录是空的

通常使用jq  bootstrap去官网下载,然后放到项目里面。现在bower做这些事情。

bower install jquery 执行变回自动查找jq并下载
bower install bootstrap执行下载bootstrap
bower install 加组件名便可以下载。

当然bower install 后可以使 github 上组件的名字或者gitub上右侧的github地址或者是网页的url。这几种都行。

执行 ls -al 便可以看见新建的文件夹下边多了一个文件夹bower_components 
cd bower_components/进入这个文件夹
执行 ls -al 便可一看见该目录下多了两个文件夹 jq 和 bootstrap
rm  - rf  jquery  便可以删除jq文件夹,在这个文件的根目录下

3、bower的配置文件

  (a)、bower有两个配置文件分别为:bower.json 和 .bowerrc

bower.json:这个文件的意思是,多人开发的项目,为了避免组件的重复并且保证都是最新,代码呗提交之后只需要执行,

bower install

bower会自己根据这个文件的配置去检查。

bower.json文件的生成方法:

  

cd..  回到文件夹的根目录,在根目录下执行  bower init  他会给出提示
1、默认文件名  回车就行
2、默认版本还  回车就行
3、描述: test bower by using jq & bootstrap
4、main file 项目的入口文件 暂时为空 回车
5、几种文件租房时  为空就行
6、关键词
7、作者
8、yes
9、y
10、y
执行ls -al变可以看见目录下多了一个 bower.json文件
vim bower.json查看这个文件执行:wq返回文件根目录

.json的配置文件变完成了。

  (b)、.bowerrc文件

这个文件一般情况下是不会使用的,有的公司为了安全性考虑,在上网的时候要使用代理才能上网,这样bower要下载文件,得需要代理

vim .bowerrc 回车 进入文件
点击 esc 最底下变为 insert  编辑文件
proxy代表什么呢:腾讯的代理  http://proxy.tencent.com:8080
如果是https的   https-proxy : http://proxy.tencent.com:8080
如果网路非常的差或者非常好
timeout : 6000也就是1分钟 这里是一个数值 默认单位是毫秒
{
        "directory": "bower_components",
        "proxy": "http://proxy.tencent.com:8080",
        "https-proxy": "https://proxy.tencent.com:8080",
        "timeout":6000
}

:w 然后执行 :q便可以保存回到文件根目录。

不编写的直接 :wq便回到文件根目录。

到这里bower的配置就全部完成了。

在项目中要用到组件还是以前的方法 src  或者  href 便可以了,但是这样旺旺会很麻烦,文件目录层级多了就会很复杂,所以就要配合grunt的使用了。

以上是关于自动化构建之bower的主要内容,如果未能解决你的问题,请参考以下文章

Web前端构建工具---Gulp

前端自动化工具

自动刷新android片段,直到满足条件

前端项目构建yeoman (yo+gulp+bower)

使用 grunt 自动化 npm 和 bower 安装

Gradle构建之初步入门