自动化构建之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 install --save jquery
执行 --save 才能将下载的文件,直接配置到配置文件中不需要去手动再去配置。
自动化构建之bower的更多相关文章
- 近期总结:generator-web,前端自动化构建的解决方案
本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一 ...
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- 前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...
- 【Node.js学习笔记】使用Gulp项目自动化构建工具
刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述: 在为数众多的中小型软件作坊中,不存在自动化构建和发布工具.构建.交付准备环境 ...
- 我是如何进行Spring MVC文档翻译项目的环境搭建、项目管理及自动化构建工作的
感兴趣的同学可以关注这个翻译项目 . 我的博客原文 和 我的Github 前段时间翻译的Spring MVC官方文档完成了第一稿,相关的文章和仓库可以点击以下链接.这篇文章,主要是总结一下这个翻译项目 ...
- 使用Jenkins配置自动化构建
持续集成是个简单重复劳动,人来操作费时费力,使用自动化构建工具完成是最好不过的了. 为了实现这个要求,我选择了Jenkins. 从http://mirrors.jenkins-ci.org/windo ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- gulp自动化构建
最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来... 首先了解什么是gulp? 我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前 ...
随机推荐
- Solr数据不同步
Solr配置了集群,本地有253和254,2个独立的Solr服务. 同一个页面的图片,刷新2次,图片地址不一样,最后查明,后台数据源Solr1和Solr2的数据不一致. 第1步推测:本地缓存, ...
- 教你 Shiro + SpringBoot 整合 JWT
本篇文章将教大家在 shiro + springBoot 的基础上整合 JWT (JSON Web Token) 如果对 shiro 如何整合 springBoot 还不了解的可以先去看我的上一篇文章 ...
- java并发之停止线程
停止一个线程意味着在任务处理完任务之前停掉正在做的操作,也就是放弃当前的操作.停止一个线程可以用Thread.stop()方法,但最好不要用它.虽然它确实可以停止一个正在运行的线程,但是这个方法是不安 ...
- Office办公软件各版本下载(一键安装)
史上最快最全的Office套件,含Word.PPT.Excel.Access.Outlook完整组件(微软官方版本). 推荐安装Office2010版本!一键完成清理.安装Office.自动激活. 图 ...
- SWT中嵌入Swing的JTextFeild却不能编辑
SWT中嵌入Swing的JTextFeild却不能编辑 学习了:http://www.iteye.com/problems/49487 膜拜一下 org 竟然有这样的坑,需要在中间添加一个JApp ...
- 去哪网实习总结:JavaWeb配置404页面(JavaWeb)
本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发. .. 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果... 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...
- [HTML] 如何使用robots.txt防止搜索引擎抓取页面
Robots.txt 文件对抓取网络的搜索引擎漫游器(称为漫游器)进行限制.这些漫游器是自动的,在它们访问网页前会查看是否存在限制其访问特定网页的 robots.txt 文件.如果你想保护网站上的某些 ...
- hammer教程
一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...
- Redis(二)、Redis持久化RDB和AOF
一.Redis两种持久化方式 对Redis而言,其数据是保存在内存中的,一旦机器宕机,内存中的数据会丢失,因此需要将数据异步持久化到硬盘中保存.这样,即使机器宕机,数据能从硬盘中恢复. 常见的数据持久 ...
- springboot的推荐模板引擎-Thymeleaf
1)添加对themeleaf的支持的依赖 <!--Thymeleaf--> <dependency> <groupId>org.springframework.bo ...