Установка и использование Bower

Published by Leave your thoughts

Bower – это менеджер пакетов для фронт-енда (библиотек javascript и фреймворков css). Он работает на Node.js, а также использует Git для извлечения и установки большинства пакетов.

В этом руководстве показано, как установить Bower на виртуальный выделенный сервер Ubuntu 12.04. Для выполнения руководства нужен готовый к работе виртуальный сервер. Также нужно установить Node.js и NPM (Node Packaged Modules); чтобы получить инструкции по установке данных программ, читайте эту статью.

Установка Bower

Для начала нужно установить Git. Чтобы подробнее узнать, как это сделать, читайте руководство «Установка Git на Ubuntu 12.04»; в целом, для быстрой установки можно использовать:

sudo apt-get install git-core

Чтобы установить Bower, запустите следующую команду (при условии, что Node.js и NPM установлены):

npm install -g bower

Теперь менеджер пакетов Bower установлен на виртуальный выделенный сервер. Запстите следующую команду, чтобы получить больше информации о доступных командах.

bower help

Примечание: имейте в виду, что при использовании учетной записи root необходимо вносить в команду опцию —allow-root:

bower help --allow-root

Использование Bower

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

Перейдите в root-каталог веб-сервера.

cd /var/www

Создайте новую папку и откройте ее:

mkdir project
cd project

Это – root-каталог проекта. Предположим, проект будет использовать Twitter Bootstrap. Для этого можно загрузить zip-файл Bootstrap и распаковать его на облачном сервере. Тем не менее, при работе с Bower можно превратить сам проект в пакет, объявить Bootstrap зависимостью, и тогда  менеджер пакетов Bower скачает эту зависимость. Для этого понадобится файл с именем bower.json, который будет содержать перечень зависимостей. В данном примере в этот список будет внесен Bootstrap.

Итак, создайте новый файл по имени bower.json в root-каталоге проекта:

nano /var/www/project/bower.json

и внесите в него следующее:

{
"name": "my-project",
"dependencies": {
"bootstrap": ">= 3.0.0"
}
}

Сохраните файл и закройте его. Теперь в зависимостях данного проекта указана программа Bootstrap 3.0+. Чтобы Bower загрузил и установил ее (как и другие заявленные зависимости), запустите следующую команду (не забудьте внести опцию allow-root при работе через root-пользователя):

bower install

Обратите внимание: теперь в папке проекта должна появиться новая папка по имени bower_components, содержащая две папки: bootstrap и jquery (пакет jQuery был установлен потому, что он необходим для работы Bootstrap).

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

bower list

Чтобы данный список содержал также и пути к файлам, которые нужно добавить в разрабатываемое приложение (например, файлы .js или .css), внесите в команду опцию –paths:

bower list --paths

Еще один способ установить пакет – использовать команду install, указав пакет, который необходимо установить на VPS. Итак, создайте другую папку проекта и установите в нее Bootstrap:

cd /var/www
mkdir project2
cd project2

Перейдя в новую папку проекта, запустите следующую команду:

bower install bootstrap

Как видите, данная команда дала тот же результат, но гораздо быстрее. Обратите внимание, эту команду Bower можно использовать для установки практически любого ПО. Так, например, если bootstrap в этой команде заменить на адрес git, менеджер пакетов извлечет указанный проект git:

bower install git://github.com/someone/some-package.git

Данная команда способна извлекать даже zip-файлы:

bower install http://www.example.com/package.zip

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

bower uninstall bootstrap

Конечно, нужно просто заменить bootstrap именем пакета, который необходимо удалить.

Tags: , , , , , , ,

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>