bower的使用

bower是什么？

        bower用来管理项目中用到的js、css等框架，比如jquery、bootstrap、underscore等

为什么需要bower？

        jquery我可以自行到网上去下载呀，为什么要需要bower呢？一个可以下载，多个你都去网上下载难道不浪费时间吗？而且网上下载的最好要去官网下载，不然有时候会出现莫名的错误。使用bower可以节省我们在网上下载这些框架的时间；同时，来源统一，相对安全。

bower的安装

F:\Program\workspaces\node\proedu>npm install -g bower
C:\Users\zhao\AppData\Roaming\npm\bower -> C:\Users\zhao\AppData\Roaming\npm\nod
e_modules\bower\bin\bower
+ bower@1.8.4
added 1 package in 52.826s

检测bower安装是否成功

F:\Program\workspaces\node\proedu>bower -v
1.8.4

使用bower下载jquery

F:\Program\workspaces\node\proedu>bower install jquery
bower not-cached    https://github.com/jquery/jquery-dist.git#*
bower resolve       https://github.com/jquery/jquery-dist.git#*
bower download      https://github.com/jquery/jquery-dist/archive/3.3.1.tar.gz
bower extract       jquery#* archive.tar.gz
bower resolved      https://github.com/jquery/jquery-dist.git#3.3.1
bower install       jquery#3.3.1

jquery#3.3.1 bower_components\jquery

查看当前目录，发现多了个bower_components文件夹，下载的jquery正是被放在了这个文件夹里面:

如何更改bower下载的文件存放目录？

        比如，我并不习惯下载的js或者css框架放在bower_components文件夹里面，而是喜欢放在resources里面，怎么配置呢？在当前目录F:\Program\workspaces\node\proedu下新建一个名字叫做".bowerrc"的文件，增加如下内容：

{
  "directory": "resources"
}

建好之后的目录结构如图：

此时再重新安装下jquery：

可以看到在我们配置的resources下面就已经有了，配置成功。“.bowerrc”文件就是用来配置bower安装目录的。

bower.json的使用

        万一有一天我这个resources目录不小心被删除了，怎么办呢？难道我还要从项目里一个个寻找依赖并一个个地重新安装一次吗？不需要。我们安装的时候可以加上--save就可以把安装的插件保存在一个bower.json的文件中，这点很类似于npm，其实bower的语法跟npm本来就很相似。不过要想通过"--save"使用bower.json保存安装插件的信息，需要先使用bower init命令来通过向导创建这个bower.json文件。

F:\Program\workspaces\node\proedu>bower init
? name proedu
? description
? main file index.js
? keywords
? authors ghzdw <zhaodwaiguoxue@163.com>
? license ISC
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being ac
? would you like to mark this package as private which prevents it from being ac
cidentally published to the registry? No
{
  name: 'proedu',
  description: '',
  main: 'index.js',
  authors: [
    'ghzdw <zhaodwaiguoxue@163.com>'
  ],
  license: 'ISC',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'resources',
    'test',
    'tests'
  ],
  dependencies: {
    jquery: '^3.3.1'
  }
}

? Looks good? Yes

F:\Program\workspaces\node\proedu>

创建的时候直接按回车就可以了。可以看到bower已经识别到我已经安装了jquery，自动在dependencies中帮我加上了。

再安装一个bootstrap：

查看bower.json:

查看resources文件夹已经有了bootstrap，里面的dist目录就是我们需要的：

不知大家有没有注意到，我在使用bower init的时候，bower帮我提示的作者是ghzdw <zhaodwaiguoxue@163.com>，这是因为我已经下载了git，使用bower需要依赖git，我们需要先下载这个git，关于git的使用，请参见我的其他文章

查看插件信息，bower  info 插件名，如：

bower info jquery

查询包信息，bower search 插件名，如：

bower search bootstrap

上面的命令会去查找含有bootstrap关键字的插件。

根据bower.json里面配置的依赖安装插件使用bower install：

使用"bower update 包名"更新指定包：

        修改bower.json里面的

  "dependencies": {
    "jquery": "^3.3.1",
    "bootstrap": "^4.0.0"
  }

为：

  "dependencies": {
    "jquery": "^1.12.4",
    "bootstrap": "^4.0.0"
  }

即修改了jquery的版本，执行命令：

F:\Program\workspaces\node\proedu>bower update jquery
bower not-cached    https://github.com/jquery/jquery-dist.git#^1.12.4
bower resolve       https://github.com/jquery/jquery-dist.git#^1.12.4
bower download      https://github.com/jquery/jquery-dist/archive/1.12.4.tar.gz
bower extract       jquery#^1.12.4 archive.tar.gz
bower resolved      https://github.com/jquery/jquery-dist.git#1.12.4
bower install       jquery#1.12.4

jquery#1.12.4 resources\jquery

此时，我们resources目录下的jquery的版本就由原先的3.3.1变为1.12.4了。