如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项
原创如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项
原创
介绍
我们不得不手动搜索，下载，解压缩并找出前端框架，库和资产的安装目录。
Bower是前端模块的包管理器，通常由JavaScript和/或CSS组成。它使我们可以轻松搜索，安装，更新或删除这些前端依赖项。
使用Bower的优点是，在分发项目时，您不必将外部依赖项与项目捆绑在一起。当您运行时，Bower会处理第三方代码bower install并将这些依赖项提供给正确的位置。它还使最终的项目包更小，以便分发。
在本教程中，您将学习如何在Ubuntu 14.04服务器上安装和使用Bower。我们将使用Bower来安装Bootstrap和AngularJS，并说明它们在Nginx Web服务器上运行一个简单的应用程序。
准备
在开始之前，您需要完成一些重要步骤：
- 一台已经设置好可以使用
sudo命令的非root账号的Ubuntu服务器，并且已开启防火墙。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后再购买服务器。 - 使用SSH连接到您的服务器
- 在我们的示例中，此用户称为sammy
- 对于Web服务器，我们将使用Nginx，这是一种功能强大且高效的Web服务器，由于其性能功能而被广泛采用。
另外，Bower还需要Git，Node.js和npm。
- 使用以下命令在服务器上安装Git：
sudo apt-get install git- 使用以下命令在服务器上安装Node.js：
sudo apt-get install nodejs- 使用以下命令在服务器上安装npm：
sudo apt-get install npm- 由于我们从包管理器安装了Node.js，因此二进制文件可能被称为nodejs而不是node。因为npm依赖于你的Node.js二进制文件将被称为节点这一事实，你只需要对其进行符号链接：
sudo ln -s /usr/bin/nodejs /usr/bin/node您可以在Github上阅读有关此问题的更多信息，您可以从此StackExchange问题中了解有关符号链接的更多信息。
完成这些步骤后，您可以继续本指南。
第1步 - 安装Bower
使用npm安装Bower：
sudo npm install bower -g该-g开关是用来在系统上安装全球鲍尔。
现在我们安装了Bower，我们将继续一个实际的例子。在接下来的步骤中，我们将会
- 制作一个新的Bower项目
- 用Bower安装Bootstrap
- 用Bower安装AngularJS
- 通过Nginx服务网站
在本教程结束时，在Bower Reference部分中，您可以阅读有关每个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初始服务器设置创建的自己的sudo用户而不是sammy。
第3步 - 初始化Bower项目
现在，在/usr/share/nginx/html目录中，执行以下命令以创建一个新的Bower项目：
bower init 您将被问到一系列问题。对于此快速示例项目，您只需按下ENTER即可选择所有默认值。
请参阅以下答案的详细分类，标记为红色：
? 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您可以在下面看到命令的输出：
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
Bootstrap是一个CSS框架。要使用Bower安装Bootstrap，请运行以下命令：
bower install bootstrap --save您可以在下面看到命令的输出：
bower 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我们现在在bower_components/bootstrap目录中安装了Bootstrap，其中包含缩小版本（我们将使用）的路径：bower_components/bootstrap/dist/js/bootstrap.min.js是对于JavaScript文件的，bower_components/bootstrap/dist/css/bootstrap.min.css是对于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您可以准确输入此内容：
<!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类型示例应用程序，它使用带有AngularJS的Boostrap，在Nginx上运行。
（这基本上是来自Bootstrap登录模板的示例，其中<body>标签内的内容具有带两个输入字段的简单表单。）
要查看此示例应用程序，您应该在浏览器中导航到腾讯云CVM的IP; 类似http://your_server_ip/的东西。您应该看到如下图所示的内容：
如果您在文本框字段中键入内容，则使用AngularJS双向数据绑定将在下方显示完全相同的内容。
如果没有输出任何输出，请尝试使用以下命令重新启动Nginx：
sudo service nginx restart如果您想了解有关AngularJS的更多信息，请访问https://docs.angularjs.org/tutorial上的官方文档。如果您想了解有关Bootstrap的更多信息，请访问http://getbootstrap.com/getting-started/上的官方文档。
Bower 应用
现在我们已经了解了Bower的一个实际例子，让我们来看看它的一些通用功能。
安装软件包
要安装包（例如，AngularJS或Bootstrap），我们需要运行以下命令：
bower install package不是package，我们要输入的是安装的软件包的确切名称。该软件包可以是GitHub简写，Git端点，URL等等。
您还可以安装特定软件包的特定版本。
通过Bower 关于安装的官方文档了解有关安装所有可用选项的更多信息。
搜索软件包
您可以通过此在线工具或使用Bower CLI 搜索软件包。要使用Bower CLI搜索软件包，请使用以下命令：
bower search package例如，如果我们想安装AngularJS，但我们不确定正确的包名，或者我们希望看到AngularJS的所有可用包，我们可以执行以下命令：
bower search angularjs我们会得到类似于此的输出：
Search 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用于项目配置的bower.json文件。该过程可能如下所示：
? 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开关安装任何软件包，它们将保存到依赖项对象中的bower.json文件中。例如，如果我们使用以下命令安装AngularJS：
bower install angularjs --save然后我们的bower.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文件：
{
"directory": "js/"
}结论
完成本教程后，您应该知道如何使用Bower为简单的AngularJS应用程序安装依赖项。
您还应该了解如何将Bower用于您自己的自定义应用程序。
更多Ubuntu教程请前往腾讯云+社区学习更多知识。
参考文献：《How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04》
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。