如何在Ubuntu14.04上使用Bower管理前端JavaScript和CSS依赖项

介绍

我们不得不手动搜索、下载、解包和找出前端框架、库和资产的安装目录的日子已经一去不复返了。

Bower 是前端模块的包管理器，通常由 JavaScript 和/或 CSS 组成。它让我们可以轻松搜索、安装、更新或删除这些前端依赖项。

使用 Bower 的优势在于，您不必在分发项目时将外部依赖项与项目捆绑在一起。当您运行 bower install 并将这些依赖项放到正确的位置时，Bower 会处理第三方代码。它还使最终的项目包更小，便于分发。

在本教程中，您将学习如何在 Ubuntu 14.04 服务器上安装和使用 Bower。我们将使用 Bower 安装 Bootstrap 和 AngularJS，并说明它们在 Nginx Web 服务器上运行一个简单的应用程序。

先决条件

在开始之前，您需要完成一些重要步骤：

安装干净的 Ubuntu 14.04 的 Droplet。为此，Droplet 的大小并不重要，因此您可以安全地使用最小的版本。如果您还没有创建您的 Droplet，您可以按照如何创建您的第一个 DigitalOcean Droplet 虚拟服务器教程中的步骤进行操作
使用 SSH 连接到您的服务器
按照我们的 Ubuntu 14.04 Initial Server Setup 教程创建具有 sudo 权限的用户。在我们的示例中，此用户称为 sammy
对于 Web 服务器，我们将使用 Nginx，这是一种强大而高效的 Web 服务器，由于其性能能力而被广泛采用。按照如何在Ubuntu 14.04 LTS上安装Nginx教程安装Nginx

此外，Bower 需要 Git、Node.js 和 npm。

使用以下命令在您的服务器上安装 Git：
```
sudo apt-get install git
```
如果您想了解有关设置 Git 的更深入的教程，可以查看如何在 Ubuntu 14.04 上安装 Git。
使用以下命令在您的服务器上安装 Node.js：
```
sudo apt-get install nodejs
```
如果您想了解有关设置 Node.js 的更深入的教程，可以查看如何在 Ubuntu 14.04 服务器上安装 Node.js 。
使用以下命令在您的服务器上安装 npm：
```
sudo apt-get install npm
```
如果您想了解有关设置 npm 的更深入的教程，可以查看如何使用 npm 管理 Linux 服务器上的 Node.js 包。
由于我们从包管理器安装了 Node.js，因此您的二进制文件可能被称为 nodejs 而不是 node。因为 npm 依赖于你的 Node.js 二进制文件将被称为 node 的事实，你只需要像这样符号链接它：
```
sudo ln -s /usr/bin/nodejs /usr/bin/node
```
您可以在 Github 上阅读有关此问题的更多信息，并且可以从 this StackExchange question 中了解有关符号链接的更多信息。

完成这些步骤后，您可以继续阅读本指南。

第 1 步 — 安装 Bower

使用 npm 安装 Bower：

sudo npm install bower -g

-g 开关用于在您的系统上全局安装 Bower。

现在我们已经安装了 Bower，我们将继续一个实际的例子。在接下来的步骤中，我们将

创建一个新的 Bower 项目
使用 Bower 安装引导程序
使用 Bower 安装 AngularJS
通过 Nginx 为网站提供服务

在本教程的最后，在 Bower 参考 部分中，您可以阅读有关每个 Bower 选项的更多信息。

第 2 步 - 准备项目目录

我们将在 /usr/share/nginx/html 目录中创建我们的 Bower 项目，以便我们可以轻松地以网站的形式访问我们的应用程序。这是 Nginx 的默认文档根目录。

所以，我们需要使用 cd 命令切换到这个目录：

cd /usr/share/nginx/html

默认情况下，Ubuntu 14.04 上的 Nginx 默认启用一个 服务器块 。它被配置为从上述 /usr/share/nginx/html 目录中提供文档。

在我们的快速示例中，我们将使用默认站点。

但是，对于生产应用程序，您可能应该为您的特定域设置一个服务器块。

在我们可以在 /usr/share/nginx/html 目录中进行任何工作之前，我们必须授予我们的 sudo 用户权限。

使用以下命令更改目录的所有权：

sudo chown -R sammy:sammy /usr/share/nginx/html/

您将使用您在先决条件 Ubuntu 14.04 Initial Server Setup 教程中创建的自己的 sudo 用户，而不是 sammy。

第三步——初始化 Bower 项目

现在，在目录 /usr/share/nginx/html 中，执行以下命令来创建一个新的 Bower 项目：

bower init

您将被问到一系列问题。对于这个快速示例项目，您只需按 ENTER 即可选择所有默认值。

请参阅以下答案的详细分类，标记为 red：

Interactive? May bower anonymously report usage statistics to improve the tool over time? Yes
? name: BowerTest
? version: 0.0.0
? description: Testing Bower
? main file: index.html
? what types of modules does this package expose? Just press ENTER
? keywords: bower angular bootstrap
? authors: Nikola Brežnjak
? license: MIT
? homepage: http://bower.example.com
? 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 accidentally published to the registry? No

{
  name: 'BowerTest',
  version: '0.0.0',
  description: 'Testing Bower',
  main: 'index.html',
  keywords: [
    'bower',
    'angular',
    'bootstrap'
  ],
  authors: [
    'Nikola Brežnjak'
  ],
  license: 'MIT',
  homepage: 'http://bower.example.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

关于这些选项的几点说明：

只是为了重温之前的注释，在运行此示例项目的 bower init 命令时不需要输入任何选项
在 What types of modules does this package expose? 问题中，您可以通过按 SPACEBAR 来选择或取消选择选项。按 ENTER 确认选择。默认情况下，没有选择，对于这个简单的示例，我们不需要它们中的任何一个。您可以从官方 GitHub 问题中了解更多信息
对于生产项目，您需要填写 authors 字段和其他设置，以便其他人了解该项目的更多信息
homepage 设置仅用于显示您自己的网站，与您运行此应用程序的实际服务器的设置无关

现在，您的工作目录 (/usr/share/nginx/html/) 中应该有一个 bower.json 文件，其中 JSON 内容显示在上面的输出中。

第 4 步 — 安装 AngularJS

AngularJS 是一个用于 Web 应用程序的 JavaScript 框架。要使用 Bower 安装 AngularJS，请运行以下命令：

bower install angularjs --save

您可以看到以下命令的输出：

[secondary_label Output]                                                
bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

如果你得到的输出与上面显示的稍有不同，那可能是因为 Bower 缓存了包以加快下载速度，并且你的包是从缓存中安装的。

我们现在将 AngularJS 安装在 bower_components/angular 目录（或者可能是 bower_components/angularjs）目录中，缩小版本（我们将使用）的路径是：bower_components/angular/angular.min.js。

第 5 步 — 安装引导程序

Bootstrap 是一个 CSS 框架。要使用 Bower 安装 Bootstrap，请运行以下命令：

bower install bootstrap --save

您可以看到以下命令的输出：

Outputbower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
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#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

我们现在将 Bootstrap 安装在 bower_components/bootstrap 目录中，缩小版本（我们将使用）的路径为：JavaScript 文件的 bower_components/bootstrap/dist/js/bootstrap.min.js 和 CSS 的 bower_components/bootstrap/dist/css/bootstrap.min.css文件。

注意 jQuery 是如何安装的，因为它是 Bootstrap 所需的依赖项。

第 6 步 — 创建 Hello World 应用程序

在 /usr/share/nginx/html/ 文件夹编辑里面，让我们用我们自己的内容替换默认的 index.html 文件：

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

打开文件进行编辑：

vim /usr/share/nginx/html/index.html

您可以准确输入此内容：

/usr/share/nginx/html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container" ng-app>
        <form class="form-signin">
            <h2 class="form-signin-heading">What you type here:</h2>

            <input ng-model="data.input" type="text" class="form-control" autofocus>

            <h2 class="form-signin-heading">It will also be shown below:</h2>
            <input type="text" class="sr-only">{{data.input}}</label>
        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    
    <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

根据 Bower 在您的系统上安装 AngularJS 的方式，脚本的路径可能是 bower_components/angularjs/angular.min.js 而不是 bower_components/angular/angular.min.js。

现在我们有一个简单的 Hello World 类型示例应用程序，它使用 Boostrap 和 AngularJS，在 Nginx 上运行。

（这基本上是来自 Bootstrap 的 Signin 模板示例，其中 <body> 标记内的内容具有一个带有两个输入字段的简单表单。）

要查看此示例应用程序，您应该在浏览器中导航到 Droplet 的 IP；类似于 http://your_server_ip/。您应该会看到如下图所示的内容：

如果您在文本框字段中键入内容，下面将出现完全相同的内容，使用 AngularJS 双向数据绑定。

如果您没有得到任何输出，请尝试使用以下命令重新启动 Nginx：

sudo service nginx restart

如果您想了解更多关于 AngularJS 的信息，请访问 https://docs.angularjs.org/tutorial 的官方文档。如果您想了解更多有关 Bootstrap 的信息，请访问 http://getbootstrap.com/getting-started/ 上的官方文档。

如果您希望能够通过域名而不是其公共 IP 地址访问您的 Web 服务器，请购买域名，然后按照以下教程进行操作：

鲍尔参考

现在我们已经通过 Bower 完成了一个实际示例，让我们看看它的一些一般功能。

安装包

要安装一个包（例如，AngularJS 或 Bootstrap），我们需要运行以下命令：

bower install package

输入您要安装的软件包的确切名称，而不是 package。该包可以是 GitHub 速记、Git 端点、URL 等等。

您还可以安装某个包的特定版本。

通过 Bower 的关于安装的官方文档了解有关所有可用安装选项的更多信息。

搜索包

您可以通过此在线工具或使用 Bower CLI 搜索软件包。要使用 Bower CLI 搜索包，请使用以下命令：

bower search package

例如，如果我们想安装 AngularJS，但我们不确定正确的包名，或者我们想查看 AngularJS 的所有可用包，我们可以执行以下命令：

bower search angularjs

我们会得到类似这样的输出：

OutputSearch results:
    angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
    AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
    angularjs git://github.com/angular/bower-angular.git
    angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
    angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
    angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
    angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

为了安装 AngularJS，您只需执行以下命令：

bower install angularjs

保存包

使用 Bower 启动项目时，标准是从运行 init 命令开始：

bower init

这将指导您创建一个 bower.json 文件，Bower 使用该文件进行项目配置。该过程可能如下所示：

Output? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <nikola.breznjak@gmail.com>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? 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 accidentally published to the registry? No

{
  name: 'howto-bower',
  version: '0.0.0',
  homepage: 'https://github.com/Hitman666/jsRockstar',
  authors: [
    'Nikola Breznjak <nikola.breznjak@gmail.com>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

现在，如果您使用 --save 开关安装任何软件包，它们将被保存到 dependencies 对象中的 bower.json 文件中。例如，如果我们使用以下命令安装 AngularJS：

bower install angularjs --save

然后我们的 bower.json 文件看起来像这样（注意 dependencies 对象）：

鲍尔.json

{
  "name": "howto-bower",
  "version": "0.0.0",
  "homepage": "https://github.com/Hitman666/jsRockstar",
  "authors": [
    "Nikola Breznjak <nikola.breznjak@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angularjs": "~1.4.3"
  }
}

卸载软件包

要卸载 Bower 包，只需运行以下命令：

bower uninstall package

这将从您的 bower_component 目录（或您在 .bowerrc 文件中定义的任何其他目录（下一节中有关配置的更多信息）中卸载一个包。

使用 .bowerrc 配置 Bower

要配置 Bower，您必须创建一个名为 .bowerrc 的文件。（注意点 - 这意味着它是 Linux 环境中的隐藏文件。）

在项目的根目录中创建 .bowerrc 文件（与 bower.json 文件一起）。每个项目可以有一个 .bowerrc 文件，具有不同的设置。

Bower 允许您使用此文件配置许多选项，您可以在官方文档的配置选项中阅读更多信息。

一个有用的选项是 directory 选项，它允许您自定义 Bower 保存其所有包的文件夹。

要设置这个简单的选项，请创建一个如下所示的 .bowerrc 文件：

.bowerrc

{
  "directory": "js/"  
}

结论

完成本教程后，您应该知道如何使用 Bower 为简单的 AngularJS 应用程序安装依赖项。

您还应该了解如何将 Bower 用于您自己的自定义应用程序。