Bower для всего


Содержание

nikbelikov’s blog

wasted frontend notes

Пакетный менеджер для фронтенда Bower

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

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

Установка и обновление Bower

Перед установкой Bower вам потребуется поставить node.js + npm и git.

После этого выполните:

Bower подскажет вам, если появилась его новая версия. И чтобы глобально обновить ваш пакетный менеджер, введите следующую команду:

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

Для поиска используется команда search . Например: bower search angular . Так он выдаст список пакетов, где встречается это ключевое слово.

Для поиска вы также можете использовать сокращенный вариант слова search — s (например, bower s angular ) или воспользоваться официальным каталогом.

Установка и удаление пакетов

Для установки какого-либо пакета вам нужно использовать команду install или сокращенный ее вариант — i .

Кроме указания имени пакета вы также можете передавать bower:

  • Путь до репозитория git ( git://github.com/angular/bower-angular.git ).
  • Путь до локального репозитория.
  • Сокращенный вариант по типу angular/bower-angular . Bower предположит, что вы имеете в виду GitHub и сам подставит нужные части URL.
  • URL до zip или tar архива. В этом вслучае файлы будут распакованы автоматически.

По умолчанию ставится самый свежий пакет. Но вы можете указать номер версии:

Также есть возможность указать другую папку для размещения зависимостей. Для этого создайте файл .bowerrc и в нем пропишите:

Так Bower будет устанавливать пакеты в папку assets.

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

Bower использует кэш и контролирует версии, так что если вы что-то уже выкачивали, он не будет заново это загружать, а возьмет из своих локальных «запасов». Еще вы можете сами сказать Bower, чтобы тот для установки зависимости использовал кэш. Для этого:

Для удаления пакетов используйте команду uninstall :

bower.json

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

Создать файл bower.json вы можете вручную, либо выполнив команду bower init . Во втором случае он задаст вам несколько вопросов (имя, версия, описание и т.д.), сам создаст этот файл и наполнит его начальным содержимым. И в нем мы можем перечислить все зависимости разом.

Небольшое отсутпление. Команда init вас спросит: «what types of modules does this package expose? Варианты: amd, es6, globals, node, yui. Если вы не знаете, что это, выбирайте globals. Эта опция указывает на тип модуля и нужна только в том случае, если вы планируете опубликовывать этот модуль.

Для установки всех пакетов проекта, используйте команду bower install или bower i .

При установке новых пакетов через командную строку можно использовать флаг -save . В этом случае новый компонент добавляется в файл bower.json автоматически как зависимость. Например:

Просмотр установленных пакетов и их описания

Для просмотра всех установленных пакетов воспользуйтесь командой bower list .

Если выполнить bower info

, появится описание пакета.

Показать ссылку на репозиторий пакета:


Обновление пакетов

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

Если вам нужно обновить какой-то конкретный пакет, напишите в консоли bower update

Webstorm IDE & Sublime Text

В восьмой версии знаменитой IDE появилась интеграция с Bower. То есть вы сможете, не покидая Webstorm, устанавливать и управлять зависимостями для своих проектов.

Также имеется плагин для Sublime Text.

Справка Bower

Для получения информации по всем доступным командам Bower, воспользуйтесь встроенной справкой bower help .

Stepan Suvorov Blog

Release 2.0

Пакетный менеджер Bower

Currently, people are managing dependencies, such as JavaScript libraries, manually. This sucks.

Крупные проекты как правило используют большое количество сторонних библиотек, таких как jQuery, Underscore, различные UI и плагины к ним, компонентные фреймворки и шаблоны к ним. Так вот, хранить весь этот сторонний код вместе с проектом не очень удобно. А, если еще учесть, что каждая библиотека должна иметь хотя бы 2 файла: минифицированый и отладочный, то структура проекта превращается в свалку, в которой уже довольно трудно разобраться. Да, частично решают вопрос git-ссылки репозитрия (когда мы не копируем контент, а ставим ссылку на репозиторий библиотеки), но это все равно не очень удобно. Хотелось бы совсем избавиться от этого стороннего кода в репозитории. Вот для этого и нужен bower.

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

Bower написан на javascript для платформы node.js.

Устанавливается через npm:

После установки можно выполнить простую команду (в директории проекта):

которая подгрузит к нам библиотеку jquery в ./components/jquery (по умолчанию)

Устанавливать библиотеки (пакеты) можно через:

  • имя –
  • ссылка на git-репозиторий (полная)
  • ссылка на git-репозиторий (относительная)
  • http ссылка на файл
  • локальный путь

Причем в случае, если это будет ссылка на архив, – bower сам распакует его содержимое.

Если нужна конкретная версия библиотеки, то это можно задать с помощью тега:

Кроме команды install, есть также команда update.

Для поиска по готовым пакетам существуют команды list и search. Также можно воспользоваться вот этим онлайн инструментом.

Теперь перейдем к самой интересной части – составлению конфиг файла для проекта, который подтянет все зависимости одной командой

Для этого в диретории проекта необходимо создать файл component.json, который по своей сути чем-то напоминает package.json(для npm), со следующим содержанием:

где name и version просто поля описательного характера, а вот параметр dependencies – основаная часть, в которой будем описывать все библиотеки для загрузки. В нашем случае это jQuery с указанием версии.

Еще есть никому не ясная опция main, которая подразумевает указание одного главного файла каждого типа(css, html, js) и которую разработчики заложили на будущее.

В реальном проекте блок зависимостей может выглядеть как-то так:

также хочу обратить ваше внимание на то, что bower понимает вложенные зависимости. Если вы устанавливаете какой-то модуль, который зависит от jQuery, то нет необходимости отдельно прописывать установку jQuery, так как bower сам поймет что данную библиотеку необходимо установить.

Также можно добавлять свои пакеты(библиотеки) в репозиторий bower. Делается это следующей командой:

– т.е. указывается название пакета и путь к нему.


После чего вашу библиотеку можно будет также установить с помощью bower:

Если вас не полностью удовлетворяет стандартный функционал, который можно задать конфиг файлом, – то можете воспользоваться прекрасным набором bower api методов и расширить инструментарий.

Все команды вызывают 3 типа событий: data, end, и error. Для install еще вызывается специальное событие package, которое говорит о том, что пакет был установлен.

Сам bower также имеет конфигурационный файл .bowerrc (не путать с файлом конфигурации компонент проекта – component.json). Также составлен в json формате и в нем мы можем задать следующие настройки:

  • directory – директория, куда будут загружается компоненты
  • json – файл конфигурации компонент
  • endpoint – позволяет запустить собственный Bower сервер-хранилище компонент

Если что-то еще осталось не ясно – задавайте вопросы – дополню пост.

UPD: Начиная с версии 0.9 component.json переименовали bower.json.

Материалы, которые вдохновляли на написание данной статьи:

Руководство по менеджеру пакетов Bower

Для чего нужен Bower?

Существует множество причин, чтобы использовать менеджер пакетов, например, Bower.

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

Например, вы хотите включить в ваш проект библиотеку jQuery. Раньше вам пришлось бы идти на официальный сайт, скачивать архив, распаковать и перетащить нужный фйл в проект. С помощью Bower это можно сделать одной строкой: bower install jquery . В результате jQuery будет установлена в папку bower_components вашего проекта.

Установка Bower

Для работы с нашим менеджером пакетов потребуются Node.js, npm (пакетный менеджер, входящий в Node.js) и Git. Скачайте Node.js с официального сайта и установите его.

Для проверки узнаем версии Node.js и npm, набрав в консоли node ‑v и npm ‑v соответственно.

Мы убедились, что все работает и теперь можем перейти к установке Bower, для этого наберите в консоли npm install -g bower . Ключ –g означает, что пакет (в данном случае Bower) будет установлен глобально. Без этого ключа пакет будет установлен в текущей директории.

Илон Маск рекомендует:  email рассылка по шаблону на PHP

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

Пакеты можно установить командой bower install . Например:

Посмотреть установленные пакеты можно командой bower list . Удаляется пакет командой bower uninstall .

Установка определенной версии пакета

Если вам нужна конкретная версия пакета, ее можно установить, указав номер версии:

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

Если вы не уверены, что требуемый пакет существует, введите в консоли bower search . Также вы можете воспользоваться онлайн сервисом:

Если вы хотите посмотреть все установленные пакеты, — введите bower list .

Настройка Bower для проекта

Для использования Bower в проекта вам потребуются 2 файла:

  • .bowerrc — файл, указывающий куда будут загружается компоненты.
  • bower.json Файл, который говорит менеджеру пакетов, какие нужны пакеты.

Директория с компонентами

По-умолчанию, Bower устанавливает пакеты в каталог bower_components, что не всегда требуется. Чтобы изменить каталог по-умолчанию, мы должны создать файл .bowerrc:


Теперь пакеты будут устанавливаться в папку libs . Теперь давайте поговорим об установке нескольких пакетов сразу.

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

Обычно для проекта вы будете иметь больше, чем один пакет и каждый раз писать bower install для каждого пакета — приятного мало. Давайте создадим файл bower.json с пакетами, которые нам нужны:

Теперь, чтобы установить эти пакеты, введите в консоли bower install . После этого, Bower изучит файл bower.json и установит все, что нам нужно в нашу папку libs.

Используем наши Bower-пакеты

Теперь у нас есть все пакеты, которые нам нужны в нашем проекте. Все, что мы должны теперь сделать — это сослаться на них в документе:

PHP Profi

Квест → Как хакнуть форму

BowerPHP vs Bower Перевод

Если вы сталкивались с Composer или просто обычным apt-get (yum), то вы наверняка знаете или слышали о Bower. Ну или хотя бы можете легко представить что это такое — это менеджер зависимостей для js-библиотек (пакетов).

Относительно недавно в свет вышел BowerPHP. Хотя, конечно, это сложно назвать «вышел», т.к. все версии помечены «alfa». И как вы могли уже догадаться, — это всё тот же Bower, только в профиль написаный на PHP.

Зачем?

Bower — написан javascript и базируется на NodeJS. В первую очередь мы смотрим на Bower, но в сущности, вы используете его для установки front-end библиотек таких как jQuery, Angular или Foundation практически так же, как вы используете Composer для PHP зависимостей. Вы определяете (создаёте в определённом формате) файл для Bower с требуемыми вам зависимостями, запускаете bower install и наблюдаете за происходящей магией.

Пакеты обычно устанавливаются в папку bower_components , которая создаётся, если её не существует. И вы можете либо ссылаться на них напрямую, либо предварительно «протаскивать» их через некий дополнительный функционал по конкатенации/минимизации/. чтобы уменьшить количество запросов и размер.

Итак. зачем нужна версия на PHP, если уже существует на Node? Хороший вопрос. но прежде чем отвечать на него, давайте установим BowerPHP и немного «поиграем» с ним.

Установка

Я буду использовать свой Vagrant box.

Для того чтобы сделать BowerPHP доступным глобально, запустите:

composer global require «beelab/bowerphp 0.1.*@alpha»

Запустите bowerphp чтобы убедиться, что всё работает.

Мы установили за секунды то, на что потребовались бы несколько минут, если бы мы использовали NPM, если это работает на VM, располагающейся на Windows. Ну а если вы впервые начинаете работать с Bower и никогда не сталкивались с Node.js и NPM, то потратите ещё несколько минут на ознакомление и установку, тогда как PHP у вас уже стоит, да и Composer тоже.

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

Чтобы увидеть пример использования, давайте попробуем что-нибудь сделать. Давайте сделаем простенький “Hello World” в файле index.html в директории какого-либо проекта, доступной из браузера (наверняка у вас есть какой-нибуть рабочий проект, где это можно попробовать).

Откроем your-project.local/index1.html в браузере browser should display “Hello World” now.

Давайте установим Foundation.

bowerphp install foundation

$ bowerphp install foundation bower foundation#* bower foundation#5.5.0 install bower jquery#>= 2.1.0 bower jquery#2.1.1 install bower modernizr#>= 2.7.2 bower modernizr#v2.7.2 install bower fastclick#>=0.6.11 bower fastclick#v0.6.9 install bower jquery.cookie#

1.4.0 bower jquery.cookie#v1.4.0 install bower jquery#>=1.2 install bower jquery-placeholder#

2.0.7 bower jquery-placeholder#v2.0.7 install

Вау… что? Никаких проблем? Но. Я запускаю Vagrant box под Windows! Где же ворнинги, баги, проблемы с правами? Где все те ошибки, которые возникают вследствии неуклюжей структуры папок NPM? BowerPHP установил Foundation в моём случае за 15 секунд.

Давайте посмотрим, что всё успешно работает. Вставьте следующий код в файл index1.html :

Откройте эту страницу в браузере и вуаля!

Почему это классно?


Итак, ответим на вопрос, который мы задавали выше – зачем PHP версия вместо JS утилиты? Потому что это требуется. Конечно, BowerPHP не требуется многим, и я, как один из тех, кто пострадал от этих symlink-ов и ада файловых путей с NPM на Windows, вероятно, ценю это больше, чем большинство, но я все еще в восторге, что он существует и хочу, чтобы BowerPHP развивался . Если же вы в поисках более структурированного плюсов и минусов поединка Bower против BowerPHP, то вот:

Плюсы BowerPHP:

  • Нет нужды использовать JS
  • Отлично работает на VM расположенных на Windows
  • Действительно быстро
  • Просто в установке
  • Просто портируется между вашими копиями приложений (между разработчиками, бета/прод-версиями):
    • создайте Bowerfile, добавьте BowerPHP в ваш composer.json и добавьте установку bowerphp в post-install-script блок Composer-а. Тем самым ваши клиентские (frontend) зависимости будут установлены вместе с серверными (backend) посредством запуска одной единственной команды composer install your project’s front end installed alongside backend immediately after a single composer install – безо всяких взаимодействий с Node.js и даже без знания что это и установлен ли он в системе.

Минусы BowerPHP:

  • Может настать момент, когда Bower оставит BowerPHP позади c некоторой эзотерической будущей функциональностью

И, чесно говоря, я больше не могу придумать каких либо минусов. А вы?

Заключение

BowerPHP довольно крут. Это амбициозное “усовершенствование колеса”, но на этот раз формы и линии остались теми же – просто материал изменился с пробкового дерева на дуб , и это делает его лучше. Сообщество выступающее против этого проекта, напомнило мне выступление Beau на Forum PHP – будьте упорны пока не найдёте поддержки. И надеюсь, что этот пост похвалы и высоких оценок даст возможность команде знать, что они не одиноки в своём желании освободиться от Node-утилит, и что они должны продолжать делать то, что они делают.

С BowerPHP мы получили возможность устанавливать наши frontend библиотеки и ресуры на столько просто, как мы это делаем с нашими backend пакетами. И в сочетании с Assetic для фильтрации , минификация и другой магии BowerPHP становится ваш им frontend супер-утилитой .

Что вы думаете BowerPHP? Бесполезный проект или всё-таки нужный? и почему?

Создание и поддержка собственных пакетов Bower

| Суббота, 25 апреля, 2015

Менеджер пакетов для веб-приложений Bower отличная утилита для управления библиотеками на клиентской стороне. Если вы являетесь веб-разработчиком, то вы слышали об этом инструменте или используете его для подключения, обновления и удаления сторонних библиотек в своих проектах. Но, что если вы написали собственную библиотеку и подумали, а как же мне поделится ею со всем миром при помощью Bower. Эта статья расскажет вам об этом.

Два ключа для понимания

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

  1. Bower спроектирован и работает поверх Git. Вы не можете поделится своей библиотекой, если она не размещена в каком нибудь git-хранилище, например, в GitHub, Bitbucket или в любом другом git-провайдере, это может быть даже свой собственный. Фактически, когда вы регистрируете пакет в Bower, вы указываете, откуда его можно будет установить, когда разработчики делают запрос на его установку. Также вы указываете содержимое своего хранилища которое вы хотите доставить потребителю. В качестве примера будем использовать хранилище GitHub.
  2. Версии библиотек — это просто git-тэги (git tags). Подробнее об этом рассказано дальше, но единственное, что надо запомнить, что делая новый «релиз» вашего пакета, нужно просто прописать тэг для изменений, которые вы отправили в свое git-хранилище.

Содержимое пакетов

Первое, что необходимо сделать для работы с Bower — это сконфигурировать пакет. Для этого нужно добавить в проект файл bower.json. Простейший вид конфигурационного файла, может быть таким:

На самом деле, даже версия здесь не обязательна. Так как во время установки версия будет браться из git-тегов. Но для читабельности, версия тут пригодится. Это очень упрощенный вид, и параметров для настройки этого файла имеется достаточно. Например, у вас есть какие-то вспомогательные внутренние файлы, которые не предназначены для конечного потребителя. Для их блокирования можно прописать атрибут ignore, содержащий массив файлов, который говорит Bower, что указанные файлы не надо устанавливать клиенту.

Допустим, вы создали пакет из одного файла my-module.js, который размещен в папке dist, имеет минифицированную версию my-module.min.js, а также использует другую библиотеку, например jQuery. Это может выглядеть так:

Как видно из примера, для распространения запрещено все, кроме папки dist. И указана зависимость пакета от библиотеки jQuery и фреймворка Bootstrap. Bower будет устанавливать или обновлять эти пакеты, если они не были установлены прежде. Это та самая функциональность, которая делает Bower очень удобным. Не нужно скачивать и включать сторонние пакеты в свою библиотеку, нужно просто указать зависимость на них. Они такие же Bower пакеты и установятся автоматически должным образом.

Итак, все необходимые приготовления сделаны. Библиотека содержит содержит bower.json и находится в git-репозитории. Осталось только зарегистрировать этот пакет.

Регистрация своего пакета через Bower


Основная работа сделана. Регистрация пакета довольно простая вещь. Единственная вещь, которую нужно помнить перед регистрацией — это прописать тэг с версией.

Отправляем его в хранилище:

Если этого не сделать, то пользователи будут получать вашу библиотеку без указания версии, даже если она указана в конфигурационном файле bower.json:

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

Как и было замечено ранее, git-репозиторий может быть где угодно, не обязательно GitHub.

Библиотека зарегистрирована и нам нужно проверить это. Запустим команду:

Илон Маск рекомендует:  Что такое код xml_set_notation_decl_handler

Мы должны получить примерно такую информацию:

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

Обновление и поддержка

Так как нет ничего идеального и никто не пишет код без изъянов, то несомненно возникнет ситуация, когда нужно будет внести поправки в библиотеку и обновить регистрационную информацию пакета для Bower.

И это еще одна вещь, которая делает Bower максимально простым. Так Bower работает с гит-репозиториями, то он получает всю информацию только из них. Процесс обновления пакета состоит из следующих трех шагов:

  1. Сделайте необходимые поправки и дополнения в библиотеку.
  2. Обновите файл bower.json актуальной информацией (версия, устанавливаемые файлы, зависимости и т.п.)
  3. Отправьте изменения и тэг с версией в репозиторий.

На этом обновление завершено. Как упоминалось выше, Bower опирается на информацию, находящуюся исключительно в репозитории, поэтому никаких команд Bower для обновления пакета, выполнять не надо.

Итак, суммируя все вышеизложенное, нужно просто внести изменения в код, обновить версию в bower, json и отправить изменения и новый тэг с версией в репозиторий.

Еще одно полезное применение

Возможность создавать пакеты пригодится еще в одном случае, если проект автоматизирован, например, с помощью gulp, то в продакшн уходит версия, в которую минифицируются и компонуются bower-библиотеки. А вы нашли библиотеку, которая не поставляется через Bower, либо она поставляется через Bower, но вы хотите ее изменить.

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

И тогда вы применяете этот прием. Берете стороннюю библиотеку, вносите правки, если надо. Делаете из нее свой bower-пакет, сохраняете в свое git-хранилище, регистрируете свой bower-пакет и подключаете в свое приложение. Gulp успешно обработает эту библиотеку, как и все остальные.

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

Существует множество различных инструментов, облегчающих жизнь веб-разработчику. Одним из них является пакетный менеджер 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/ ):

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


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

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

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

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

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

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

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

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

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

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

> npm install -g bower-update

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

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

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

Bower – обзор пакетного менеджера

Рабочий процесс веб-разработки состоит из множество повторяющихся операций. Каждый разработчик пытается упростить выполнение этих рутинных действий по-своему. В последние годы многие из нас всё чаще прибегают к полезному программному обеспечению, которое при помощи консоли или интерфейса пользователя помогают быстрее справляться с ежедневными задачами. Одной из таких программ является Bower.

Что позволяет делать Bower?

Одной командой уставить и обновлять (до актуальных версий) библиотеки скриптов на JavaScript и стилей CSS.

Например, моментально ставить jQuery. И ещё десяток библиотек. А после, одной командой всё обновить, когда возникнет необходимость.

Установка

Начнём с официального сайта утилиты:

Для установки необходимо набрать всего одну команду в консоли:

Разумеется, npm – это Node Package Manager, а это значит что на вашей машине должен быть установлен Node.JS.

Думаю, что установка Ноды не составит какого-либо труда. На всякий случай напомню адрес дистрибутива для Mac, Windows и Linux:

Дальше всё просто.

Как это работает

При помощи консоли переходите в рабочую директорию вашего сайта.

И выполняете команду на установку того или иного пакета.

Вот пример с официального сайта:

Обратите внимание, что можно ставить не только из репозитория, но и, например, с Git.

При помощи команды bower search

можно поискать пакеты в официальном репозитории.

Также это можно сделать при помощи веб-интерфейса:


Тонкости

По умолчанию всё ставится в папку ./bower_components, что не всегда удобно. Ручное изменение имени папки приведёт к потери возможности автоматического обновления.

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

Для начала необходимо создать файл конфигурации.

Он создаётся автоматически при установке любого пакета или же вручную, если мы вызовем следующую команду:

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

Это обычный JSON-объект, как вы уже догадались.

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

Логично назвать её, например, vendor или assets .

Напоследок, вот небольшой видео-обзор от товарища Sorax:

Приятной работы с Bower.

Поделиться

Комментарии Правила дискуссии

  1. Участники дискуссии уважительно относятся друг к другу и к автору блога.
  2. Мат недопустим. Учитесь вести диалог культурно.
  3. Реклама и спам запрещены.

Если вы не соблюдаете эти три простых правила, то ваши комментарии удаляются без предупреждения.

Во всем остальном вам предоставляется полная свобода слова и выражения собственного мнения.

Visual Studio — Современные средства для веб-разработки: Bower

Продукты и технологии:

Bower, Node.js, NuGet, GitHub, ASP.NET 5, Visual Studio 2015

В статье рассматриваются:

  • установка и использование Bower;
  • управление зависимостями;
  • серверы сборки и контроль версий исходного кода;
  • поддержка Visual Studio.

Долгое-долгое время мы жили в красивом саду за высокими стенами. В этой защищенной экосистеме веб-разработки мы применяли изощренные технологии вроде ASP.NET и Visual Studio. Инструментарий остального мира считался неполноценным. Мы были частью империи, если хотите, и это было весьма славное место для жизни.

Со временем культуры, инструменты, ресурсы и прочие элементы разработки стали фрагментированными и даже хаотичными. Но за это время появились весьма привлекательные и основательные технологии, включая Bootstrap, AngularJS, Git, jQuery, Grunt, Gulp, Bower, и веб-разработчики, привыкшие к экосистеме Microsoft, получили возможность использовать эти инструменты.

В этой статье из двух частей я дам обзор Bower — диспетчера пакетов, предназначенного в основном для веб-разработки на клиентской стороне (но не ограниченного только ею). Во второй статье я расскажу о Grunt и Gulp, двух JavaScript-средствах запуска задач (task runners), которые можно использовать для выполнения задач всех видов, например для копирования файлов, уменьшения размера изображений (minification), конкатенации и даже компиляции.

Grunt, Gulp и Bower являются дополнительными средствами в вашем арсенале инструментария веб-разработки. Средства интеграции с ними встроены в Visual Studio 2015, а для Visual Studio 2012 и 2013 доступны через систему надстроек. Вам все равно потребуется устанавливать их.

Возможно, некоторые из вас спрашивают себя, уж не хочет ли Microsoft заставить нас изучать и использовать еще больше инструментов? Разве NuGet не справляется с пакетами, а msbuild не достаточно в качестве средства компиляции и сборки? Ответ на оба вопроса: да — во многих, но не во всех сценариях. И для тех случаев, где традиционных инструментов недостаточно, могу помочь Grunt, Gulp и Bower. В каком-то веб-проекте вам может понадобиться компилировать свой Sass-код всякий раз, когда CSS-файл изменяется. Или вам может потребоваться новейший выпуск Bootstrap или Angular, не дожидаясь, когда кто-нибудь в Microsoft создаст соответствующий NuGet-пакет. Вы не в состоянии выполнить ни одну из этих задач с помощью NuGet или msbuild.

NuGet — потрясающая технология, и она по-прежнему развивается, поддерживается и тесно интегрируется с Visual Studio. Продолжайте использовать ее в своих проектах, особенно в тех, где создаются двоичные файлы, и в тех, где нужно вносить изменения в ваши решения Visual Studio. Однако, когда выходит новая версия jQuery или Bootstrap, кто-то должен создать и выпустить NuGet-пакет для нее. Поскольку Bower способен задействовать семантический контроль версий (semantic versioning), как только какой-то инструмент выпускается и добавляется в GitHub, Bower может использовать его; нет нужды ждать, пока кто-то упакует его в NuGet-пакет.

Я буду использовать Node Package Manager (npm) для установки Bower и нескольких других средств в следующей статье. Поскольку npm не предоставляется в виде отдельного пакета для скачивания, просто установите Node.js с nodejs.org. Подробнее об установке и применении npm, см. страницу Microsoft Virtual Academy «Package Management and Workflow Automation» на bit.ly/1EjRWMx.


Bower — основной диспетчер пакетов, обычно применяемый для клиентской веб-разработки и, по-видимому, это единственный диспетчер пакетов только для клиентской части. Большинство пакетов, используемых в клиентской веб-разработке, например Bootstrap, jQuery и AngularJS, можно устанавливать либо через npm, либо через Bower, но во многих случаях управление зависимостями может оказаться чуть легче при использовании Bower (хотя кто-то со мной не согласится).

Bower-пакеты в отличие от NuGet-пакетов не ограничены единственным типом источника. Bower-пакет может быть конечной точкой Git, папкой файловой системы, URL файлов контента или ZIP-файлов и т. д. Bower интегрируется с реестром пакетов, который перечисляет опубликованные пакеты, но пакеты не обязательно должны перечисляться в Bower для их установки.

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

Bower обычно запрашивает репозитарий Git, поэтому вам понадобится установить msysgit (msysgit.github.io) и выбрать вариант запуска из командной строки, как показано на рис. 1.

Рис. 1. Установите msysgit с поддержкой командной строки

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

Зачем нужен менеджер пакетов, или почему именно Bower

Содержание статьи

Все материалы сюжета:

Надоело ходить на сайты JavaScript-библиотек и качать архивы каждый раз, как надо добавить на сайт очередной jQuery-плагин? Бовер сделает все сам.

Менеджеры пакетов упрощают установку и обновление зависимостей проекта, то есть сторонних библиотек, которые он использует: jQuery, Fotorama, все, что используется на твоем сайте и написано не тобой.

Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — все это заменяется парой команд в терминале.

У многих языков программирования есть стандартные менеджеры пакетов, которыми разработчики пользуются для установки всех библиотек: gem у руби, pip у питона и другие. У серверного яваскрипта есть npm (почему он не подходит для клиентского — дальше), а у клиентского яваскрипта до недавнего времени ничего не было. Было множество разных пакетных менеджеров (Jam, Component, Volo, Ender), но большинство из них так и не стали популярными, а от менеджера пакетов, которым не поставишь нужных библиотек, толку мало.

Почему не npm

Главное отличие npm и Бовера — подход к установке зависимостей пакетов. Npm устанавливает зависимости для каждого пакета отдельно, в папку этого пакета, потом так же ставит зависимости зависимостей и так далее. В клиентском яваскрипте это недопустимо: нельзя подключить на страницу две версии jQuery или любой другой библиотеки. В Бовере каждый пакет устанавливается один раз, и в случае конфликта зависимостей Бовер просто не станет устанавливать пакет, несовместимый с уже установленными.

Бовер — не стандартный менеджер пакетов для клиентского яваскрипта, но самый популярный: сейчас там больше 11 тысяч пакетов.

Бовер не навязывает пользователю свою систему сборки, разработчику пакетов — метод подключения библиотеки (AMD, CommonJS и другие). Все, что делает Бовер, — устанавливает нужные проекту пакеты подходящих версий вместе с их зависимостями. Другими словами: просто загружает файлы нужных библиотек и все, что нужно для их работы, в специальную папку. Остальное остается на усмотрение разработчика.

Установка Бовера

Для работы с Бовером тебе потребуются Node.js и Git. Установка предельно проста: npm install -g bower

Работа с пакетами

Попробуем что-нибудь установить, например jQuery:

Флаг —save говорит Боверу, что он должен сохранить имя пакета и его версию в специальный файл со списком всех зависимостей проекта — bower.json . У нас такого файла еще нет, о чем и говорит строчка «No bower.json file to save to, use bower init to create one» в логе.

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

На вопрос «set currently installed components as dependencies?» нужно ответить «Yes» — все ранее установленные компоненты (в нашем случае это jQuery) автоматически попадут в созданный JSON-файл. А на вопрос «would you like to mark this package as private which prevents it from being accidentally published to the registry?» — тоже «Yes», если вы не делаете библиотеку, которую потом будете публиковать в Бовере.

Поставим еще несколько пакетов (можно устанавливать несколько пакетов сразу):

Команда bower list покажет список всех установленных пакетов. Ты увидишь, что все пакеты зависят от jQuery и что Бовер смог найти удовлетворяющую всех версию jQuery — 2.1.0. Каждый пакет устанавливается в свою папку внутри директории bower_components, вложенных пакетов нет, jQuery встречается только один раз. В корне проекта лежит созданный нами bower.json , но теперь там перечислены уже все пакеты, которые показывает bower list , а не только jQuery.

Для удаления пакетов используется команда bower uninstall —save packageName .

Ты можешь спокойно удалять папку bower_components или добавить ее в свой .gitignore. Команда bower install (без дополнительных параметров) вернет все как было.

Развертывание проекта

Есть два подхода к развертыванию проектов:

  1. В репозиторий добавляется только файл-манифест, и все пакеты устанавливаются во время развертывания проекта. Так в репозитории не хранится ничего лишнего, но, если во время развертывания проекта упадет гитхаб или другой сервер, с которого устанавливаются пакеты, будут проблемы.
  2. В репозиторий добавляется и bower.json , и папка bower_components . Так развертывание не зависит от внешних серверов, но репозиторий раздувается десятками лишних файлов.

Семантические версии (semver)


Semver — это, во-первых, подход к версионированию библиотек: формат МАЖОРНАЯ.МИНОРНАЯ.ПАТЧ и правила, по которым следует увеличивать то или иное число. А во-вторых — это способ описания требуемых версий зависимостей, который используют Бовер и npm.

При установке с флагом —save версии пакетов добавляются в bower.json в виде

1.0.1 . Тильда в начале говорит о том, что при установке будет выбрана версия 1.0.1 или с большим последним числом (ПАТЧ), если она есть. Таким образом, будет установлена версия с последними исправлениями ошибок, но полностью совместимая с той, что указана в bower.json .

Обновление зависимостей

В Бовере есть команда bower update , но она обновляет пакеты с учетом требований, описанных в bower.json . Например, если там требуется jQuery

2.0.0 , то он сможет обновить его, например, до 2.0.9, но 2.1.0 уже не поставит, потому что он не соответствует формуле

Для обновления пакетов (и bower.json ) до действительно последних версий можно воспользоваться bower-update. Устанавливаем:

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

Есть два способа найти нужный пакет: гиковский и обычный. Гиковский:

Обычный: открыть в браузере bower.io/search/.

Автоматическая сборка

Бовер перекладывает проблемы сборки установленных пакетов на плечи разработчика.

Самый легкий способ — просто склеить JS-файлы Грантом, Галпом или любой другой системой сборки, которой ты пользуешься.

Я пользуюсь Грантом, поэтому расскажу, как склеивать пакеты им. О том, как пользоваться Грантом, была большая статья в июльском номере прошлого года, поэтому покажу сразу конфиг плагина grunt-contrib-concat:

У этого способа есть много недостатков: тебе нужно смотреть имена файлов для каждого пакета и следить, чтобы файлы собирались в правильном порядке (например, jQuery должен быть выше, чем скрипты, зависящие от него). Плагин grunt-bower-concat может делать это сам: он автоматически склеивает все установленные зависимости в правильном порядке в один файл:

Руководство по менеджеру пакетов Bower

Для чего нужен Bower?

Существует множество причин, чтобы использовать менеджер пакетов, например, Bower.

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

Например, вы хотите включить в ваш проект библиотеку jQuery. Раньше вам пришлось бы идти на официальный сайт, скачивать архив, распаковать и перетащить нужный фйл в проект. С помощью Bower это можно сделать одной строкой: bower install jquery . В результате jQuery будет установлена в папку bower_components вашего проекта.

Установка Bower

Для работы с нашим менеджером пакетов потребуются Node.js, npm (пакетный менеджер, входящий в Node.js) и Git. Скачайте Node.js с официального сайта и установите его.

Для проверки узнаем версии Node.js и npm, набрав в консоли node ‑v и npm ‑v соответственно.

Мы убедились, что все работает и теперь можем перейти к установке Bower, для этого наберите в консоли npm install -g bower . Ключ –g означает, что пакет (в данном случае Bower) будет установлен глобально. Без этого ключа пакет будет установлен в текущей директории.

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

Пакеты можно установить командой bower install . Например:

Посмотреть установленные пакеты можно командой bower list . Удаляется пакет командой bower uninstall .

Установка определенной версии пакета

Если вам нужна конкретная версия пакета, ее можно установить, указав номер версии:

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

Если вы не уверены, что требуемый пакет существует, введите в консоли bower search . Также вы можете воспользоваться онлайн сервисом:

Если вы хотите посмотреть все установленные пакеты, — введите bower list .

Настройка Bower для проекта

Для использования Bower в проекта вам потребуются 2 файла:

  • .bowerrc — файл, указывающий куда будут загружается компоненты.
  • bower.json Файл, который говорит менеджеру пакетов, какие нужны пакеты.

Директория с компонентами

По-умолчанию, Bower устанавливает пакеты в каталог bower_components, что не всегда требуется. Чтобы изменить каталог по-умолчанию, мы должны создать файл .bowerrc:

Теперь пакеты будут устанавливаться в папку libs . Теперь давайте поговорим об установке нескольких пакетов сразу.

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

Обычно для проекта вы будете иметь больше, чем один пакет и каждый раз писать bower install для каждого пакета — приятного мало. Давайте создадим файл bower.json с пакетами, которые нам нужны:

Теперь, чтобы установить эти пакеты, введите в консоли bower install . После этого, Bower изучит файл bower.json и установит все, что нам нужно в нашу папку libs.

Используем наши Bower-пакеты

Теперь у нас есть все пакеты, которые нам нужны в нашем проекте. Все, что мы должны теперь сделать — это сослаться на них в документе:

Илон Маск рекомендует:  Как добавить два фона к одному элементу через CSS3
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL