啥叫Bower?

Bower是一个起那段依赖包管理工具,bower能提供添加新web包、更新web包、删除web包、发布web包、管理包依赖等功能。

准备

Bower需要Node.jsNPMGit 的支持,所以在使用Bower之前请确保以上三个功能正常可用。

安装Bower

只要你安装了上面的这三个软件下面你就可用在命令行兼容如下命令,安装Bower了。 $ npm install -g bower 这里的bower是在全局安装的安装的,-g 代表全局。

开始使用

1.开始

我们一般情况下,我们在我们的项目中使用Bower来管理我们需要的依赖包,所有我们要适应cd命令将当前目录切换到我们项目的所在目录

C:\Users\Wangfy>cd c:\nodejs\bower

2.首先我们要初始化一下本目录,使用命令

$ bower init 按照自己的实际项目需求,填写相应的信息,会得到如下的一个文件(bower.json)

{
  name: 'test',
  authors: [
    'Fuyuan Wang <zoeblow@gmail.com>'
  ],
  description: 'test',
  main: 'index.html',
  moduleType: [],
  license: 'MIT',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

3.安装依赖包

语法:bower install [依赖包名称] –save $ bower install bootstrap -save 上述命令完成以后,在项目的目录下创建了一个bower_components文件夹,其中目录如下 你会发现在这目录中你并没有,引入jQuery的包,但是这里却出现了,这是为啥捏,是因为bootstrap在运行过程中需要jQuery的依赖支持,所有智能的Bower就自动为我们加载了,用Bower就是这么省心。 这时候我们再看bower.Json文件 文档中已经多出来一条

{
  "name": "1",
  "authors": [
    "Fuyuan Wang <zoeblow@gmail.com>"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "~3.0.0"
  }
}

4.包的使用

包的引入方式和原来引入并没有什么不同,

<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

5.查看包列表

$ bower list

c:\nodejs\bower >bower list
bower check-new     Checking for new versions of the project dependencies...
c:\nodejs\bower
└─┬ bootstrap#3.3.5 (latest is 4.0.0-alpha)
  └── jquery#2.1.4 (3.0.0-alpha1+compat available)

6.包的搜索

$ bower search jquery

c:\nodejs\bower >bower search jquery
Search results:
    jquery git://github.com/jquery/jquery.git
    jquery-ui git://github.com/components/jqueryui

7.查看包信息

$ bower info bootstrap

c:\nodejs\bower>bower info bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*

8.包的卸载

$ bower uninstall bootstrap