bower简明入门教程

29

什么是bower

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

logo

准备工作

  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

refer:Day 1: Bower —— 管理你的客户端依赖关系

原文链接bower简明入门教程


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

11 条评论
laxtiz · 2015年07月15日

Windows 也可以 echo. > .bowerrc
另外,入门教程我觉得没必要介绍 .bowerrc

+1 回复

苏生不惑 · 2015年07月12日

为什么不直接touch .bowerrc建立文件

回复

savokiss 作者 · 2015年07月13日

我不会告诉你我用的windows(⊙o⊙)

回复

savokiss 作者 · 2015年07月15日

嗯。学习了!主要是默认目录实在没办法接受~

回复

dreday · 2016年03月22日

我脚得创建.bowerrc的方法不是很优雅

回复

savokiss 作者 · 2016年03月22日

okay then :)

回复

phping · 2016年09月10日

已撸...

回复

jingwhale · 2016年11月23日

dwd

回复

header · 2017年03月08日

要顺畅使用bower,作为码农都需要备个梯子, 不然下载资源慢的要命。我一直用的是天路加速器,他们官网有教程, 参考那个终端命令行代理的教程

回复

subfire · 2017年04月06日

对于对前端一片白的来说 介绍的很清晰易懂

回复

老伴 · 2018年04月13日

.bowerrc 也可以 null>.bowerrc生成~ 会警告不是系统命令,但是会自动生成问价~~~

回复

载入中...