XFNOTES
0%

bower

发表于 更新于 分类于

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

bower 简明教程

准备工作

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

安装bower

使用npm，打开终端，输入：

1
npm install -g bower

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

开始使用

查看帮助

使用bower help命令查看帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 结果
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages - and possible updates
    login                   Authenticate with GitHub and store credentials
    lookup                  Look up a single package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for packages by name
    update                  Update a local package
    uninstall               Remove a local package
    unregister              Remove a package from the registry
    version                 Bump a package version
Options:

    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --loglevel          What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
    -v, --version           Output Bower version
    --no-color              Disable colors
See 'bower help <command>' for more information on a specific command.

###　自定义包的安装目录
首先进入项目目录下，新建文件1.txt

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

1
rename 1.txt .bowerrc

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

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

1
2
3
{
  "directory" : "js/lib"
}

bower初始化

命令行进入项目目录中，输入命令如下：

1
bower init

会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来保存该项目的配置，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "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，输入如下命令：

1
bower install jquery --save

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

1
2
3
"dependencies": {
  "jquery": "~2.1.4"
}

包的信息

比如我们想要查找jquery都有哪些个版本，输入如下命令：

1
bower info jquery

会看到jquery的bower.json的信息，和可用的版本信息

可以看到jquery最新的兼容版版本为1.11.3

包的更新

上面安装的是最新版的高版本jquery，假如想要兼容低版本浏览器的呢？
已经查到兼容低版本浏览器的jquery版本为1.11.3，下面直接修改bower.json文件中的jquery版本号如下：

1
2
3
"dependencies": {
  "jquery": "~1.11.3"
}

然后执行如下命令：

1
bower update

bower就会为你切换jquery的版本了

包的查找

还有一个很重要的功能，就是包的查找，比如我想要安装bootstrap的某个插件，但是记不住名字了，就可以直接在命令行输入：

1
bower search bootstrap

bower就会列出包含字符串bootstrap的可用包了

包的卸载

卸载包可以使用uninstall 命令：

1
bower uninstall jquery

转载说明

本文转载自segmentfault.