Как управлять внешними зависимостями JavaScript и CSS с помощью Bower в Ubuntu 14.04

Вступление

Давно прошли те времена, когда нам приходилось вручную искать, загружать, распаковывать и выяснять установочные каталоги для наших интерфейсных сред, библиотек и ресурсов.

Bower - менеджер пакетов для интерфейсных модулей, которые обычно состоят из JavaScript и / или CSS. Это позволяет нам легко искать, устанавливать, обновлять или удалять эти интерфейсные зависимости.

Преимущество использования Bower заключается в том, что вам не нужно связывать внешние зависимости с вашим проектом при его распространении. Bower позаботится о стороннем коде, когда вы запустите + bower install и доставите эти зависимости в нужные места. Это также делает окончательный пакет проекта меньшим для распространения.

изображение: https: //assets.digitalocean.com/articles/bower/zlrTjni.png [логотип Bower]

В этом руководстве вы узнаете, как установить и использовать Bower на сервере Ubuntu 14.04. Мы будем использовать Bower для установки Bootstrap и AngularJS и проиллюстрируем, как они запускают простое приложение на веб-сервере Nginx.

Предпосылки

Прежде чем мы начнем, необходимо выполнить несколько важных шагов:

Капелька с чистой установкой Ubuntu 14.04. Для этого размер капли действительно не имеет значения, поэтому вы можете смело выбирать самую маленькую версию. Если вы еще не создали свою каплю, вы можете сделать это, следуя инструкциям в https://www.digitalocean.com/community/tutorials/how-to-create-your-first-digitalocean-droplet-virtual- сервер [Как создать первый виртуальный сервер DigitalOcean Droplet]
Connect к вашему серверу с SSH
Создайте пользователя с привилегиями sudo, следуя нашему учебнику Ubuntu 14.04 Initial Server Setup. В нашем примере этот пользователь называется * sammy *
Для веб-сервера мы будем использовать Nginx, мощный и эффективный веб-сервер, который получил широкое распространение благодаря своим возможностям производительности. Следуйте инструкциям Как установить Nginx в Ubuntu 14.04 LTS, чтобы установить Nginx

Также Бауэру нужны * Git *, * Node.js * и * npm *.

Установите Git на свой сервер с помощью следующей команды:

 sudo apt-get install git

Если вам нужен более подробный учебник по настройке Git, вы можете взглянуть на https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-14-04 [ Как установить Git на Ubuntu 14.04].

Установите Node.js на свой сервер с помощью следующей команды:

 sudo apt-get install nodejs

Если вам нужен более подробный учебник по настройке Node.js, вы можете взглянуть на https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an- ubuntu-14-04-server [Как установить Node.js на сервер Ubuntu 14.04].

Установите npm на свой сервер с помощью следующей команды:

 sudo apt-get install npm

Если вам нужен более подробный учебник по настройке npm, вы можете взглянуть на https://www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js- пакеты на сервере linux [Как использовать npm для управления пакетами Node.js на сервере Linux].

Так как мы установили Node.js из менеджера пакетов, ваш двоичный файл может называться * nodejs * вместо * node *. Поскольку npm зависит от того факта, что ваш двоичный файл Node.js будет называться * node *, вам просто нужно сделать символическую ссылку следующим образом:

 sudo ln -s /usr/bin/nodejs /usr/bin/node

Вы можете прочитать больше об этой проблеме на Github, и вы можете узнать больше о символической ссылке от http://unix.stackexchange.com/questions/68368/ что такое символическая ссылка и как можно научиться делать, как это сделать [этот вопрос StackExchange].

Когда вы закончите с этими шагами, вы можете продолжить с этим руководством.

Шаг 1 - Установка Bower

Установите Bower, используя npm:

sudo npm install bower -g

Переключатель * -g * используется для глобальной установки Bower в вашей системе.

Теперь, когда у нас установлен Bower, мы продолжим с практического примера. На следующих шагах мы

Сделайте новый проект Bower
Установите Bootstrap с Bower
Установите AngularJS с Bower
Обслуживание сайта через Nginx

В конце этого урока, в разделе * Bower Reference *, вы можете прочитать больше о каждом из вариантов Bower.

Шаг 2 - Подготовка каталога проектов

Мы создадим наш проект Bower в каталоге + / usr / share / nginx / html +, чтобы мы могли легко получить доступ к нашему приложению в качестве веб-сайта. Это корневой каталог документов по умолчанию в Nginx.

Итак, нам нужно перейти в этот каталог с помощью команды + cd +:

cd /usr/share/nginx/html

По умолчанию в Nginx в Ubuntu 14.04 включен один серверный блок по умолчанию. Он настроен для обслуживания документов из вышеупомянутого каталога + / usr / share / nginx / html +.

В нашем быстром примере мы будем использовать сайт по умолчанию.

Для производственного приложения, однако, вам, вероятно, следует https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-14-04- lts [установить блок сервера] для вашего конкретного домена.

Прежде чем мы сможем выполнить какую-либо работу в каталоге + / usr / share / nginx / html, мы должны предоставить нашим пользователям права sudo.

Измените владельца каталога с помощью следующей команды:

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

Вместо * sammy * вы бы использовали своего собственного пользователя sudo, который вы создали в предварительном условии Ubuntu 14.04 Initial Server Настройка учебник.

Шаг 3 - Инициализация проекта Bower

Теперь внутри каталога + / usr / share / nginx / html + выполните следующую команду, чтобы создать новый проект Bower:

bower init

Вам будет задан ряд вопросов. Для этого быстрого примера проекта вы можете просто нажать + ENTER +, чтобы выбрать все значения по умолчанию.

См. Подробную разбивку ответов ниже, отмеченную в:

Interactive? May bower anonymously report usage statistics to improve the tool over time?
? name:
? version:
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors:
? license:
? homepage:
? set currently installed components as dependencies?
? add commonly ignored files to ignore list?
? would you like to mark this package as private which prevents it from being accidentally published to the registry?

{
 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?

Несколько замечаний об этих опциях:

Просто чтобы вернуться к предыдущей заметке, вам не нужно вводить какие-либо параметры при запуске команды + bower init + для этого примера проекта.
В вопросе «+ Какие типы модулей предоставляет этот пакет? », Вы можете выбрать или отменить выбор параметров, нажав « ПРОБЕЛ ». Нажатие ` ENTER +` подтверждает выбор. По умолчанию ни один не выбран, и для этого простого примера нам не нужен ни один из них. Вы можете узнать больше о них из official GitHub выпуск
Для производственного проекта вам нужно заполнить поле + авторы + и другие параметры, чтобы другие люди знали больше о проекте.
Параметр + homepage + используется только для отображения вашего собственного веб-сайта и не имеет ничего общего с настройками фактического сервера, на котором вы запускаете это приложение.

Теперь у вас должен быть файл + bower.json в вашем рабочем каталоге (` + / usr / share / nginx / html / + `) с содержимым JSON, показанным в выходных данных выше.

Шаг 4 - Установка AngularJS

AngularJS - это JavaScript-фреймворк для веб-приложений. Чтобы установить AngularJS с Bower, выполните следующую команду:

bower install angularjs --save

Вы можете увидеть вывод команды ниже:

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

Bootstrap - это фреймворк CSS. Чтобы установить Bootstrap с Bower, выполните следующую команду:

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 + с указанием пути к минимизированной версии (которую мы будем использовать): + 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

Вы можете ввести этот контент точно:

/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>

Теперь у нас есть простое приложение-пример типа Hello World, использующее Bootstrap с AngularJS, работающее на Nginx.

(Это в основном пример Signin Template from Bootstrap, где содержимое внутри тега + <body> + имеет простую форму с двумя полями ввода.)

Для просмотра этого примера приложения вы должны перейти в своем браузере к IP-адресу вашего Droplet; что-то вроде + http: // +. Вы должны увидеть что-то вроде изображения ниже:

изображение: https: //assets.digitalocean.com/articles/bower/O3wFyJW.png [Что вы наберете здесь: Это также будет показано ниже:]

Если вы введете что-то в поле текстового поля, точно такой же контент будет показан ниже с использованием двусторонней привязки данных AngularJS.

Если вы не получили никакого вывода, попробуйте перезапустить Nginx с помощью следующей команды:

sudo service nginx restart

Если вы хотите узнать больше об AngularJS, посетите официальную документацию по адресу https://docs.angularjs.org/tutorial. Если вы хотите узнать больше о Bootstrap, посетите официальную документацию по адресу http://getbootstrap.com/getting-started/.

Если вы хотите иметь доступ к вашему веб-серверу через доменное имя, а не его публичный IP-адрес, купите доменное имя, а затем следуйте этим инструкциям:

Бауэр Ссылка

Теперь, когда мы рассмотрели практический пример с Бауэром, давайте рассмотрим некоторые его общие возможности.

Установка пакетов

Чтобы установить пакет (например, AngularJS или Bootstrap), нам нужно выполнить следующую команду:

bower install

Вместо ++ введите точное имя пакета, который вы хотите установить. Пакет может быть сокращением GitHub, конечной точкой Git, URL-адресом и многим другим.

Вы также можете установить определенную версию определенного пакета.

Узнайте больше обо всех доступных вариантах установки с помощью official документации по установке Bower.

Поиск пакетов

Вы можете искать пакеты с помощью этого online tool или с помощью Bower CLI. Для поиска пакетов с помощью Bower CLI используйте следующую команду:

bower search

Например, если мы хотим установить 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 <[email protected]>
? 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 <[email protected]>'
 ],
 license: 'MIT',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good? Yes

Теперь, если вы установите какой-либо из пакетов с помощью переключателя + - save, они будут сохранены в файл` + bower.json`, в объекте * dependencies *. Например, если мы установили AngularJS с помощью следующей команды:

bower install angularjs --save

Тогда наш файл + bower.json будет выглядеть примерно так (обратите внимание на объект * dependencies *):

bower.json

{
 "name": "howto-bower",
 "version": "0.0.0",
 "homepage": "https://github.com/Hitman666/jsRockstar",
 "authors": [
   "Nikola Breznjak <[email protected]>"
 ],
 "license": "MIT",
 "ignore": [
   "**/.*",
   "node_modules",
   "bower_components",
   "test",
   "tests"
 ],



}

Деинсталляция пакетов

Чтобы удалить пакет Bower, просто запустите следующую команду:

bower uninstall

Это приведет к удалению пакета из вашего каталога + bower_component + (или любого другого каталога, который вы определили в файле + .bowerrc + (подробнее о настройке см. В следующем разделе).

Настройка Bower с помощью .bowerrc

Чтобы настроить Bower, вы должны создать файл с именем + .bowerrc +. (Обратите внимание на точку - это означает, что это скрытый файл в среде Linux.)

Создайте файл + .bowerrc в корневом каталоге вашего проекта (рядом с файлом` + bower.json`). Вы можете иметь один файл + .bowerrc + на проект с разными настройками.

С помощью этого файла Bower позволяет настраивать многие параметры, о которых вы можете прочитать в разделе configuration options из официальной документации.

Одним из полезных параметров является параметр + directory +, который позволяет настроить папку, в которой Bower сохраняет все свои пакеты.

Чтобы установить этот простой параметр, создайте файл + .bowerrc +, который выглядит следующим образом:

bowerrc

{
 "directory": ""
}

Заключение

После завершения этого руководства вы должны знать, как использовать Bower для установки зависимостей для простого приложения AngularJS.

Вы также должны иметь представление о том, как использовать Bower для собственных пользовательских приложений.

TOC