Bower 有什么了不起的？

以下是来自 Helios Design Labs 的 Dan Sundy 的客座文章。 Dan 将解释如何使用 Bower 以及为何要使用它，并从一开始就抵制这个想法的视角出发。

当我第一次开始使用 Bower 时，我并没有完全理解它的吸引力。“真的吗？”我想。“现在下载和解压缩文件太麻烦了？”我也不是很兴奋要把一堆新的命令塞进一个已经塞满了 Git、Grunt、Gulp、Jekyll、Node 等命令的大脑里。

有两件事我想告诉半年前的自己。首先，Bower 可以做的不仅仅是下载一两个文件。其次，花一个小时学习一个可以消除重复任务的工具是值得的。

首先：Bower 到底是什么？

对于新手来说，Bower 是一个包管理器。它擅长管理包——任何你依赖外部作者提供的包。好的例子包括 Bootstrap 这样的 CSS 框架、jQuery 这样的库、jQuery 插件或 Angular 这样的 JavaScript 框架。Bower 的官方网站 Bower.io 可能说得最好。

网站由很多东西组成——框架、库、资源、实用程序和彩虹。Bower 为你管理所有这些东西。

Bower 通过从各处获取和安装包来工作，负责搜索、查找、下载和保存你正在寻找的东西。

先决条件

在开始使用 Bower 之前，你需要一些东西。

• 命令行。是的，它是一个命令行工具（来吧，它没有那么可怕）。
• Node 和 NPM。Bower 是一个 Node 模块，因此要获取它，你需要 NPM。
• Git。Bower 包是 Git 仓库。Bower 使用 Git 来了解包在哪里，它的版本是多少——诸如此类的事情。
• 全局安装。从技术上讲，你可以在每个项目中安装它，但你可能希望在任何地方都拥有它。

要全局安装 Bower，请执行以下操作

$ npm install -g bower

注意：根据你的设置，你可能需要使用 `sudo npm install -g bower` 来全局安装它。

基础知识

首先，想象一下新网站的目录结构。我的通常如下所示

|-.git/
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-gulpfile.js
|-package.json
|-README.md

有一个 `src` 文件夹，其中包含大部分开发工作。Gulp 构建任务最终将准备所有内容并将我们优化的代码编译到一个生产就绪的 `dist` 文件夹中。

假设你想在这个项目中包含 jQuery。通常，你会去 jquery.com，找到并点击正确的下载链接，然后解压缩并将文件放到正确的目录中。

使用 Bower，只需运行以下命令

$ bower install jquery

现在，一个包含 `jquery` 文件夹的 `bower_components` 目录出现了。

|-.git/
|-bower_components/
|  |-jquery/
|
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-gulpfile.js
|-package.json
|-README.md

jQuery 通过为 Bower 创建和注册一个包，使获取其代码变得容易。大多数流行的库和框架都做了同样的事情。如果你想检查你想要的资源是否是一个 Bower 包，你可以进行搜索

$ bower search <package-name>

如果它没有注册，仍然可以使用像这样的 git 端点来获取仓库

$ bower install git://github.com/example-user/example-package.git

高级：如果你想变得花哨，你甚至可以安装你有权访问的私有仓库。查看 Rob Dodson 的 此视频教程。

以下是一些其他基本命令，你可以使用它们来查看和管理已安装的资源。

列出所有包

$ bower list

获取有关已安装的任何包的信息

$ bower info <package-name>

使用以下命令检查更新

$ bower check-new

然后，如果有更新，更新一个包

$ bower update <package-name>

但也许更新到最新版本破坏了一些东西。

使用以下命令安装任何特定版本——旧的或新的

$ bower install <package-name>#<version>

这绝对不是一个详尽的列表。如果你有兴趣入门，我建议你创建一个测试项目并完成在线上可以找到的众多教程之一。Treehouse 的这个教程很棒：Bower 入门。然后，你可以通过查看 Bower 的 API 来深入了解所有命令。

等等，还有更多！

我工作的这个小型开发团队在过去一年左右的时间里一直在使用 Bower。虽然通过命令行进行包管理很棒，但我直到我们开始使用 `bower.json` 和 `.bowerrc` 文件时才真正信服。

.bowerrc

`.bowerrc` 文件可以做很多事情，但我主要看到它用于更改 `bower_components` 目录的名称和位置。（这让我很高兴，因为我讨厌在项目根目录中到处都是那个随机的 `bower_components` 文件夹）。

以下是一个 `.bowerrc` 文件的示例

{
  "directory": "src/components"
}

directory 选项将包发送到最合理的位置——在本例中，是 `src/` 目录。看看新的项目结构

|-.git/
|-dist/
|-node_modules/
|-src/
|  |-assets/
|  |-components/
|  |  |-jquery/
|  |
|  |-css/
|  |-fonts/
|  |-js/
|  |  |-lib/
|  |  |-main.js
|  |
|  |-sass/
|  |  |-style.sass
|  |
|  |-index.html
|
|-.gitignore
|-.bowerrc
|-gulpfile.js
|-package.json
|-README.md

请注意，`bower_components/` 文件夹不见了，并且在 `src/` 目录中有一个 `components/` 文件夹。

高级：最好使用类似 gulp-usemin 或 grunt-usemin 的工具来处理所有额外样式和脚本的连接和缩小。

那么 `bower.json` 文件如何帮助我们呢？

bower.json

`bower.json` 文件看起来很像 Node 的 `package.json`。它是一个清单文件，允许你指定选项。让我们看一个示例（可以通过运行 `bower init` 生成）

{
  "name": "bower-example",
  "version": "0.0.0",
  "authors": [
    "author <[email protected]>"
  ],
  "description": "An example project using bower.",
  "main": "index.html",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "jquery": "~2.1.1"
  }
}

如果你正在将此仓库注册为 Bower 包，则其中许多选项都存在。但请查看最底部的 `devDependencies` 对象？如果你将 `--save-dev` 附加到 Bower 命令（如下所示），该对象将自动更新

$ bower install jquery --save-dev

现在，如果同事运行 `bower install`，计算机将安装 `.bowerrc` 中指定文件夹中 `devDependencies` 列表中的所有内容。类似地，如果一个开发者使用 `--save-dev` 添加了一个包或更新了一个包版本，整个团队可以通过 `bower install`（在拉取最新版本的 `bower.json` 文件后）同步他们的资源。

由于 `bower.json` 文件消除了所有搜索和收集工作，因此不再需要对任何这些资源进行版本控制。可以将 `components/` 文件夹添加到 `.gitignore` 文件中，以保持你的仓库**精简**和**高效**。

*.DS_Store
.sass-cache
node_modules/
dist/
src/components/

结语

我正在听我最喜欢的 web 开发播客（眨眼，眨眼）的 一期节目，主持人正在讨论 Bower 是否真的有用，或者只是一个昙花一现。他们想知道它的目的是简化下载还是用于更新库的版本，就像 ruby gems 一样。他们谈到它是一个“前端 NPM”（我正在转述）。

美妙之处在于，它确实可以完成所有这些事情。你可以用它来下载和保持代码更新，但你可以更进一步。Bower 可以帮助你保持项目库和框架的同步，或者将其与其他工具（如 Yeoman）集成，以节省更多开发设置时间。此外，你可以创建和注册你自己的 Bower 包，以便你可以在所有项目中快速（安全地）安装和更新它们。

哦，关于 引发讨论的问题：你不会使用 Bower 来安装 WordPress，并且 WordPress 不应该放在你的 `bower_components` 文件夹中。但是你可以在你的 WordPress 主题中使用 Bower 来管理外部资源（只是不要加载 WordPress 核心已经包含的库，比如 jQuery）。