Матвей Земсков

Заметки веб-мастера

Среда, 01 июля 2015 11:29

Список основных команд Bower

Оцените материал
(5 голосов)

Существует множество различных инструментов, облегчающих жизнь веб-разработчику. Одним из них является пакетный менеджер Bower. Он появился уже довольно давно и с тех пор в Интернете накопилось довольно много информации о том, как можно оптимизировать свою работу, используя этот полезный инструмент. Итак, вкратце о Bower: он очень сильно упрощает установку и обновление сторонних библиотек, которые обычно используются в большинстве проектов. Например, jQuery, Bootstrap или Fancybox. При использовании Bower, разработчику не нужно заходить на сайты этих библиотек и скачивать оттуда архивы, все можно сделать через консоль, написав несколько команд. В этой небольшой заметке, мне хотелось бы перечислить основные команды Bower. Пусть это будет своего рода шпаргалка для пользователей этого замечательного инструмента.

Итак, начнем с установки.

  • Для начала необходимо установить Node.js и Git для своей ОС.
  • Затем запустить git bush и установить Bower командой:

    $ bower - npm install -g bower

Всё. Установка завершена. Теперь можно пользоваться Bower'ом.

Переходим в папку вашего проекта (например, C:\OpenServer\domains\localhost\). В консоли вводим следующие команды:

> cmd
> cd C:\OpenServer\domains\localhost\

Теперь можно устанавливать необходимые JS-библиотеки. Чтобы посмотреть, какие библиотеки можно установить через Bower, можно зайти на официальный сайт http://bower.io/search/ или набрать в консоли следующую команду:

> bower search имя_пакета

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

> bower install имя_пакета

Все пакеты по-умолчанию устанавливаются в папку bower_components, которая создается в папке проекта. Если вы хотите, чтобы библиотеки устанавливались в какую-нибудь другую папку, то нужно создать в папке проекта файл .bowerrc и указать в нем желаемый путь. Примерное содержимое файла (все пакеты будут устанавливаться в js/vendors/):

JavaScript

	{
	"directory" : "js/vendors/"
	} 

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

> bower init

Вам будет задано несколько вопросов и в результате будет сформирован файл bower.json, в котором сохранится вся информация о пакетах, используемых в проекте.

Чтобы добавить новый пакет в этот файл, необходимо при установке воспользоваться ключом –-save. Пример:

> bower install имя_пакета --save

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

> bower list

Чтобы перенести набор библиотек из существующего проекта в новый:

  • нужно скопировать в папку нового проекта файл bower.json. При желании, вы можете отредактировать скопированный файл-манифест, например, изменить имя проекта, номер версии или что-то еще. Если вы меняли название папки для установки библиотек, то также нужно будет перенести и файл .bowerrc.
  • запустить в консоли команду:

    > bower install

В результате все установится в папку нового проекта.

Удалять пакеты можно командой:

> bower uninstall имя_пакета

Для обновления пакетов используется утилита bower-update, которую нужно предварительно установить:

> npm install -g bower-update

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

> bower-update

В заключении заметки, хотелось бы привести еще одну команду, которая показывает список всех команд Bower. Это команда:

> bower help

На мой взгляд, Bower – очень полезный инструмент для веб-разработчика. Причем, пользоваться им несложно. Для того, чтобы его освоить вам потребуется совсем немного времени.

Прочитано 9153 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх