Bower的入门

接触Bower一年多了,今天对于它的有一些疑问,并且写此博文记录之。

首先把Bower的官网附上: https://bower.io/

(一)什么是Bower

Bower:就是一个前端包管理工具。能够帮我们管理Web站点上的各种框架,类库等等。主要作用有如下:能够帮助我们跟踪前端包,并且保证他们是最新(或者是你指定的特定版本),Bower能够管理前端里面的HTML,CSS,JS,甚至还可以是图片。Bower还有一个最大的好处,它对我们前端进行了优化。如果多个包依赖于一个包,例如jQuery,那么Bower将只下载jQuery一次,这样就称为扁平依赖,它有助于减少页面加载。

( 二) 安装Bower

Bower需要node,npm,git环境。如何在windows安装node(npm继承在node里面)和git。直接去对应的官网下载,然后配置相应的环境变量。

通过NPM的方式安装:npm install bower -g

(三) 常用的Bower命令

3.1 bower init

这会在你的对应路径下面产生一个bower.json的文件,这个文件里面存放项目所需包的相关使用,可以用来作为项目重复安装使用,向Bower.com提交你的库的时候,该网站会列入在线索引(意思就是别人可以bower install你的库了)。

dependencies 记录生产环境依赖的库,devDependencies记录开发环境所依赖的库。

3.2 bower install

从例子来看吧,

bower install jQuery

不过一般不建议类似于上面这样使用。一般来说bower install jQuery --save-dev ,这个操作可以往bower.json里面写入对应的模块,它可以实现不同之间的重复安装。其他项目成员,拿到项目之后,只需要bower install 就好了。bower install是可以直接从bower.json里面读出来的,其他项目成员就不需要写bower install jQuery了。

命令格式里面的<endpoint> 可以有多种形式 :

1.bower install 包,2.bower install 包#版本,3.bower intall name=包#版本。

<package>是一个包URL,物理位置或注册表名称
          <version>是一个有效的范围,提交,分支等。
          <name>是它应该在本地的名称。

常用的bower install 格式

bower install jQuery#1.2

bower install github网址

bower 默认情况都会去bower.com上面找最新的包,除非指定版本号。记住一下,刚刚开始说的,它是扁平化安装的。

3.3 bower cache

缓存是前端比较头疼的东西。Bower cache清理缓存的方法,bower cache clean。列出缓存列表bower cache list

bower cache clean和上面的bower install类似,都是可以指定名称来bower cache clean.

3.4 bower update和bower unstall

都是和bower install类似。

3.5其他bower命令

bower into,bower help,其实很多命令都有的,它也有,都是类似的。

(四) 如何注册自己包到bower上面呢

就是很多公司都有自己一套前端库,如何把他们放到Bower上面呢

先去github上面建立一个库(项目)(公有,私有都行)或者其他,只要能让bower.com能访问到地址应该都可以。

比如我建立了一个叫做angualr-demo的库,然后加入bower init来管理这个库。

之后用bower register  git上面的url

这样就完成了在bower.com上面的注册了,之后我们就可以bower install ngDemo下来看看了。

(五)可以把所有操作都做成一个Gulp或Grunt命令

var bower = require(‘bower‘);

bower.commands
.install([‘jquery‘], { save: true }, { /* custom config */ })
.on(‘end‘, function (installed) {
    console.log(installed);
});

bower.commands
.search(‘jquery‘, {})
.on(‘end‘, function (results) {
    console.log(results);
});

(六)npm和Bower比较

现在npm最常用于Node.Js模块,Npm是嵌套依赖树的关系,你应该知道删除npm模块,你不用rimraf node_modules模块,都不行,嵌套依赖就是,你依赖我,我依赖它,再依赖它。NPM嵌套依赖用在服务器上十分好,不用关心版本冲突问题等等。  Bower是专门为前端创建的,它对于依赖的管理是属于扁平化的。

现在一般项目里面,既有Bower和Node,因为前端还需要一些Gulp,Webpack这样的构建工具。我认为Bower和Node.js是可以共存的。

时间: 2024-08-01 16:42:12

Bower的入门的相关文章

npm,bower安装失败

安装一些软件时,总是会出现一些莫名其妙的问题.我在安装node.js时,默认安装到C:\Program Files\nodejs之后,安装bower时,bower_components默认装到C:\Windows\System32\bower_components目录中了. 目标一:安装bower 步骤:1.在cmd中输入命令npm install -g bower 2.输入 bower init 结果:如上描述,bower虽然安装成功,但目录bower_components目录跟package

NodeJS学习历程 - (一)工具篇

后端工具 1.express:开发框架 npm install express 2.mongoose:MongoDB的处理插件 npm install mongoose 教程一:Mongoose全面理解 3.jade:模版引擎 npm install jade 教程一:Jade 模板引擎使用 4.moment.js:日期处理类库 前端工具 1.Jquery:JS框架 教程一:W3School 2.Bootstrap:Web设计框架 bower install bootstrap 教程一:中文 3

&lt;zz&gt;bower入门教程

from http://www.cnblogs.com/xiaokai0203/p/5891927.html bower入门教程 什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用

bower安装使用入门详情

bower安装使用入门详情 bower自定义安装:安装bower需要先安装node,npm,git全局安装bower,命令:npm install -g bower进入项目目录下,新建文件1.txt然后命令行进入项目目录下,输入命令重命名该文件为.bowerrc:修改文件名,命令:rename 1.txt .bowerrc*说明下为何要命令行修改文件名,因为直接修改的话电脑不让修改啊,另外上面命令用于window~~.bowerrc文件内容填充,如下:(js/lib是通过bower下载的文件存放

[入门]bower安装和使用

bower安装和使用 字数745 阅读10127 评论2 喜欢3 bower的安装 1,首先在我的系统 安装 nodejs.因为我的系统是windows,还需要安装msysgit,注意图二中的选项 msysgit Git setup 2,之后就可以用npm包管理工具下载并全局安装bower: >npm install -g bower 全局安装bower 后,可以查看Bower的帮助信息,使用命令: >bower help 3, 初始化当前工程的bower,此操作会在当前目录下生成bower.

bower入门教程

什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用npm,打开终端,输入: npm install -g bower 其中-g命令表示全局安装 开始使用 使用help命令查看帮助

bower入门

一.bower简介 bower是一个基于js的包管理工具,类似于java的maven. 官方网站:http://bower.io/ 二.安装bower 使用bower,首先要安装node npm和git. 可以通过命令行来按章bower: npm install -g bower 三.下载依赖包 使用bower install命令来下载你所要依赖的包,bower将在当前目录创建bower_componts文件夹,并将所依赖的包下载保存到该文件夹. bower install <package>

angularAMD快速入门

ngularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用,适当的和更简单的方式. 我们整合AngularJS和RequireJS不应该是复杂的,它不是angularAMD.在行动中看到它,检测本网站显示的情况下,关键功能.确保加载你最喜欢的开发工具看到按需加载*.js文件作为您切换标签. 快速入门 定义main.js组件和依赖项: require.config({

Ember.js 入门指南——属性传递

1,传递参数到组件上 每个组件都是相对独立的,因此任何组件所需的数据都需要通过组件的属性把数据传递到组件中. 比如上篇<Ember.js 入门指南--组件定义>的第三点"{{component item.pn post=item}}"就是通过属性post把数据传递到组件foo-component或者bar-component上.如果在index.hbs中是如下方式调用组件那么渲染之后的页面是空的. {{component item.pn}} 请读者自己修改index.hbs