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

1 июня, 2018 11:52 дп 784 views | Комментариев нет

, | | Комментировать запись

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

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

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

Этот мануал научит вас устанавливать и использовать Bower в Ubuntu 14.04. Вы узнаете, как с помощью Bower установить  Bootstrap и AngularJS, а затем запустить простое приложение на Nginx.

Требования

  • Сервер Ubuntu 14.04 (в данном случае размер сервера не имеет значения), настроенный по этому мануалу. Пользователь будет условно называться 8host.
  • SSH-подключение к серверу.
  • Веб-сервер Nginx, который можно установить с помощью этого мануала.
  • Также Bower требует Git, Node.js и npm. Установить их можно с помощью команд:

sudo apt-get install git
sudo apt-get install nodejs
sudo apt-get install npm

Читайте также:

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

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

Больше об этом можно узнать на Github.

1: Установка Bower

Установите Bower с помощью npm:

sudo npm install bower -g

Флаг -g используется для глобальной установки Bower в системе.

Теперь, когда вы установили Bower, можно попрактиковаться. Далее вы узнаете:

  • Как создать новый проект Bower
  • Как усатновить Bootstrap с помощью Bower
  • Как усатновить AngularJS с помощью Bower
  • Как обслужить сайт через Nginx

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

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

Перейдите в этот каталог:

cd /usr/share/nginx/html

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

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

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

Читайте также: Nginx: Настройка блоков server в Ubuntu 14.04 LTS

Прежде чем начать работу в каталоге, нужно передать права на него пользователю 8host.

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

Вместо 8host вам нужно указать имя своего пользователя.

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

Находясь в каталоге /usr/share/nginx/html, запустите команду:

bower init

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

Подробное описание ответов, отмеченных красным цветом, можно найти ниже.

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

Подробнее об ответах:

  • Напоминаем, что для тестового приложения вам не нужно вводить какие-либо из параметров при запуске команды init bower.
  • В «What types of modules does this package expose?» вы можете выбрать параметр или отменить выбор, нажав пробел. Чтобы подтвердить выбор, нажмите Enter. По умолчанию ни один параметр не выбран, и для этого простого примера нам они не нужны. Вы можете узнать о них больше на GitHub.
  • Для производственного проекта нужно заполнить поля authors и другие настройки, чтобы другие люди знали больше о проекте
  • Настройка homepage используется только для показа веб-сайта и не имеет ничего общего с настройками фактического сервера, на котором запущено это приложение.

Теперь у вас есть файл bower.json, в котором находится код JSON.

4: Установка AngularJS

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

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. Чтобы установить Bootstrap с помощью Bower, введите:

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

Теперь Bootstrap установлен в каталог bower_components/bootstrap , путь к версии – bower_components/bootstrap/dist/js/bootstrap.min.js  для файла JavaScript и bower_components/bootstrap/dist/css/bootstrap.min.css для CSS.

Обратите внимание: также вместе с Bootstrap установилась зависимость фреймворка, jQuery.

6: Создание простого приложения

В каталоге /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, использующий Boostrap, AngularJS и Nginx.

Это приложение – пример с сайта Boostrap, где в теге <body> содержится простая форма входа из двух полей.

Чтобы просмотреть приложение, откройте IP сервера в браузере:

http://your_server_ip/

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

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

sudo service nginx restart

Больше об AngularJS вы найдете на сайте проекта. Дополнительную информацию о Bootstrap можно найти в документации.

Читайте также: Как настроить имя хоста

Краткая справка о Bower

Рассмотрев практический пример работы с Bower, ознакомимся с некоторыми из его общих возможностей.

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

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

bower install package

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

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

Больше вы найдете в документации.

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

Искать пакеты можно с помощью онлайн-инструмента или через 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 принято с команды:

bower init

Эта команда задает ряд вопросов и создает файл 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 в объекте dependencies. Например, если вы установили AngularJS с помощью следующей команды:

bower install angularjs --save

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

{
"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 используется .bowerrc. Точка в названии файла означает, что это скрытый файл.

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

Bower позволяет вам настраивать параметры в этом файле. Вы можете узнать больше о параметрах конфигурации из официальной документации.

Tags: , , , , , , ,

Добавить комментарий