Меню Рубрики

Установка git для bower

Установка git для bower

Bower — A package manager for the web

..psst! While Bower is maintained, we recommend yarn and webpack or parcel for new front-end projects!

Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).

View complete docs on bower.io

Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

See complete command line reference at bower.io/docs/api/

Installing packages and dependencies

We discourage using bower components statically for performance and security reasons (if component has an upload.php file that is not ignored, that can be easily exploited to do malicious stuff).

The best approach is to process components installed by bower with build tool (like Grunt or gulp), and serve them concatenated or using a module loader (like RequireJS).

To uninstall a locally installed package:

On prezto or oh-my-zsh , do not forget to alias bower=’noglob bower’ or bower install jquery\#1.9.1

Never run Bower with sudo

Bower is a user command; there is no need to execute it with superuser permissions.

To use Bower on Windows, you must install Git for Windows correctly. Be sure to check the options shown below:

Note that if you use TortoiseGit and if Bower keeps asking for your SSH password, you should add the following environment variable: GIT_SSH — C:\Program Files\TortoiseGit\bin\TortoisePlink.exe . Adjust the TortoisePlink path if needed.

To use Bower on Ubuntu, you might need to link nodejs executable to node :

Bower can be configured using JSON in a .bowerrc file. Read over available options at bower.io/docs/config.

We welcome contributions of all kinds from anyone. Please take a moment to review the guidelines for contributing.

Note that on Windows for tests to pass you need to configure Git before cloning:

Support us with a monthly donation and help us continue our activities. [Become a backer]

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Copyright (c) 2012-present Twitter and other contributors

источник

#1 — Bower — подробное руководство

Bower — пакетный менеджер для web. Первое подробное руководство в рунете. Пришло время разобрать bower «по косточкам».

Bower — пакетный менеджер для web

Всем привет! Меня зовут Дмитрий Ковальчук и я представляю вам первый урок в курсе «Bower — подробное руководство». Мы пройдем путь от основ, до лучших практик и продвинутых техник.

Начнём с определения. Bower — это пакетный менеджер для web. У него масса преимуществ и им пользуются если не все, то большинство современных опытных frontend специалистов. Сегодня стыдно не знать Bower и это не просто мэйнстрим. Bower действительно упрощает нам жизнь.

Как установить bower?

Для того, чтобы работать с Bower, у вас должны быть установлены node.js c npm, а также git. Я работаю из консоли git bash в оболочке conemu. Вам, особенно если вы новичок, рекомендую также работать именно в git bash. Если у вас нет git и git bash, то скачайте его с официального сайта git-scm.com

Если вы пользователь windows, не забудьте во время установки перевести radio button в положение «Run Git from the Windows Command Prompt». Таким образом, git автоматически будет добавлен в ваш PATH, что в будущем сэкономит вам силы и сбережет ваши нервы.

Что касается node.js и npm, то тут проверить очень просто:

Если вы вместо версии видите что-то вроде «comand not found», тогда жмите на паузу и идите на официальный сайт nodejs nodejs.org и скачивайте последнюю версию продукта.

Если с git и npm повросов и сомнений больше нет, тогда мы можем преступить к работе.

Давайте теперь установим сам bower

И сразу проверим его версию

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

Поиск, инсталляция, обновление и удаление библиотек

Обычно, начинающие разработчики, для того, чтобы скачать какую-либо библиотеку, фреймворк или плагин, лезут в google, находят официальный сайт или репозиторий этого продукта и скачивают необходимые файлы. Вспомните сами, сколько раз вы заходили на jquery.com, чтобы скачать последнюю версию любимой всеми javascript программистами библиотеки?

Кто-то предпочитает хранить самые часто используемые библиотеки в отдельной папочке или копируют из проекта в проект. Работа становится быстрее, но не решается проблема устаривания версии продукта (т.е., когда выйдет новая версия библиотеки, придется опять лезть на официальный сайт).

Некоторые из вас предпочитают подключать библиотеки, используя CDN, т.е. подключают необходимые библиотеки со сторонних хостингов, чтобы увеличить скорость загрузки сайта. И таких разработчиков bower’у есть чем порадовать. Об этом мы еще будем говорить позже.

Читайте также:  Установка вентиляции в фитнес

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

ПОИСК

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

Или прямо в консоли. Давайте попробуем найти jquery

источник

Пакетные менеджеры на примере Bower.

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

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

Здесь не будет споров о том, умер или не умер Bower, и стоит или не стоит его использовать в проектах.

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

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

Для чего нужны пакетные менеджеры?

Каждый из нас сталкивался с тем, что в разрабатываемый проект необходимо добавить стороннее расширение, это может быть популярная js библиотека jquery или плагин fancybox , или может быть css библиотека normalize.css . В любом случае нам приходится открывать сайт решения, или страницу на github, скачивать архив, распаковывать, а затем устанавливать себе на проекте.

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

Кроме того, при установки одного решения очень часто нужно, чтобы было обязательно установлено и другое, связанное с ним решение. Например, опять же, для работы fancybox необходимо установить библиотеку jquery . Таким образом получается что одно решение зависит от другого.

Эти и некоторые другие задачи решают пакетные менеджеры, в частности Bower, о котором сегодня пойдет речь.

Установка bower

Для работы bower необходимо установить nodejs и git!

В данной статье мы не будем рассматривать установку этих решений, так как это делается весьма просто. Скачать и установить node.js можно по ссылке — https://nodejs.org/en/ , скачать и установить git — https://git-scm.com/

Далее нам необходимо установить непосредственно, Bower, делать мы это будем через npm . Заходим в терминал и выполняем команду для установки:

Флаг -g говорит о том, что мы хотим установить Bower глобально.

После этого мы можем проверить работу пакетного менеджера выполнив команду:

Текущая установленная версия bower

Если все ок, то на экране терминала мы увидим уставленную версию Bower.

Выполнив команду help мы получим список всех доступных команд в пакетном менеджере.

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

Инициализация Bower и установка пакетов.

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

Перед выполнением команды установки пакета в проект, необходимо перейти в директорию проекта в терминале (команда cd ).

Для полноценной работы Bower необходимо выполнить инициализацию пакетного менеджера в проекте.

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

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

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

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

Многие команды в bower имеют сокращенный вид, например, для install — это i , кроме того в одной команде мы можем перечислить сразу несколько пакетов сразу:

В случае успешной установки пакетов в папке проекте появится директория bower_components , в которой будут располагаться скаченные пакеты.

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

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

Например, попробуем установить fancybox , без предварительной установки jquery:

Таким образом Bower скачает конкретную версию плагина fancybox , отметит его как флагом «для продакшена» и дополнительно скачает подходящую для работы версию библиотеки jquery.

Как вы поняли, флаг -S (или флаг —save ) показывает, что данный пакет в дальнейшем необходим на продакшене, если пакет необходимо использовать только для разработки, то необходимо указать флаг -D (или флаг —save-dev ).

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

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

Читайте также:  Установка vts с рекуператором

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

Если мы зайдем в скаченную папку пакета, то увидим, что в папке очень много «мусора», и необходимо найти нужные для подключения файлы. Это можно сделать с помощью следующей команды:

Просмотр основных файлов проекта

Флаг —path позволяет получить путь до нужных файлов.

К сожалению, Bower не предлагает решений по внедрению скаченных пакетов непосредственно в проект, это необходимо делать с помощью сторонних решений, например таких как Gulp или Webpack .

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

Конечно же, вы можете столкнуться с ситуацией, когда не помните название пакета, тогда вы можете найти необходимый пакет через поиск на официальном сайте Bower — https://bower.io/search/

Или же, найти официальный сайт или страницу на github и посмотреть там имя пакета в системе bower.

Например, на сайте плагина fancybox :

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

источник

Bower для всего

Если вы не живёте в норе, то хорошо осведомлены о том, что JavaScript вращает всё вокруг нас. Многие из удивительных идей, что я обнаружил в экосистеме Rails, теперь вырвались в космос JavaScript и способствуют распространению замечательных продуктов. Три столпа: Yeoman, Bower и Grunt.

Проблема, которую мне нужно решить, следующая — какой лучший способ получить код некоторой библиотеки с Github и сделать его легко доступным для пользователей без клонирования проекта? Потому что это довольно отстало, не так ли?

Генераторы Yeoman

Первоначально я наткнулся на generator-sass-boilerplate, «Генератор Yeoman для быстрого скаффолдинга из стилей Sass». Это очень интересный подход для создания сложной библиотеки и позволяет пользователю настраивать установку. Но для простой библиотеки кода, которой, возможно, требуются только несколько функций и примесей, данный метод слишком накладной.

Bower — вот ответ

Недавно я наткнулся на новые посты, которые на самом деле рассказывают что есть Bower и что он лучше всего. И меня осенило, что это и есть ответ!

Для тех, кто не в курсе, Bower является чрезвычайно простым решением для управления фронтенд-пакетами.

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

Красота Bower в его простоте. У Bower есть реестр, но он не на 100% необходим. Общая команда такая: bower install , где может указывать на огромное число вариантов, что позволяет чрезвычайно просто делиться некоторым кодом. Прекрасно!

Придерживаясь темы «чрезвычайно просто» вы можете с помощью Bower легко вытащить хранилище в ваш проект без его клонирования. Даже если у него нет файла bower.json.

Например Stipe, библиотека для Compass которую я написал, не известна Bower вообще.

Запустите эту команду в любой папке и вы вытяните всё хранилище без истории Github. Это само по себе довольно интересно.

Начало работы с Bower

Начать довольно просто. Предполагая, что Node и npm уже установлен, выполните:

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

Я не буду здесь вдаваться в мельчайшие подробности, но 99% времени вам просто нужно выполнить:

Как указано выше, существуют альтернативные методы установки, но основным решением является файл bower.json в хранилище и его регистрация в Bower.

Если в вашем проекте есть файл bower.json, о котором пойдёт речь в следующем разделе, вы можете добавить флаг —save при установке и это добавит библиотеку в качестве зависимости в ваш проект. Мило.

Когда вы распространяете проект, то пользователю, который его клонирует, достаточно только запустить $ bower install и он будет тянуть все внешние ресурсы. Красота!

Коммит или не коммит!?

Эта новая система создания и распространения ресурсов поднимает интересный вопрос — нужно ли коммитить все пакеты Bower или нет? В мире Ruby на самом деле Gem не является частью проекта, но связан с проектом и никогда не коммитится в систему контроля версий проекта. В этом новом JavaScript-мире зависимые пакеты Node и Bower являются ссылками в манифесте, подобно Gemfile в Ruby, но в действительности установлены в корневую папку проекта.

Существует целая дискуссия по этому вопросу. Я смотрю на это так — когда вы устанавливаете библиотеку Bower, вы оставляете её как зависимость или вносите модификации?

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

Создание нового пакета Bower

Создать новый пакет Bower снова на самом деле просто.

В консоли это инициализирует ряд вопросов, ответы на которые будут включены в новый созданный файл bower.json. Пишите что пожелаете, но всё что на самом деле нужно, это следующее:

И это всё на самом деле. Вы только что создали свою первую библиотеку ресурсов Bower. Теперь двигайтесь вперед и стройте — свои ресурсы, документацию и т. д., ваш пакет готов в любое время!

Для простого тестирования вспомните трюк $ bower install git://github.com/. Запустите это с новым хранилищем и увидите, как оно устанавливается.

Читайте также:  Установка временного ограждения строительной площадки смета

Будьте внимательны на этом этапе и с содержимым пакета. На мой взгляд, я вижу Bower как отличный способ для распространения небольших, специальных библиотек кода. Когда я тяну пакет через Bower, то действительно хочу всю документацию, тесты, демонстрационные ресурсы и др. В качестве примера я собираюсь взять Bourbon, для этого выполните:

Запустив эту установку вы получите всё хранилище. Мне не нужно хранилище целиком, всё, что мне действительно требуется это папка dist/. Чтобы решить эту проблему, другой разработчик сделал форк Bourbon и создал новое хранилище с названием bower-bourbon:

Выполнив эту установку вы на деле получите только то, что находится в папке dist/. Но эти форки заслуживают доверия?

ОБНОВЛЕНИЕ. До моего внимания довели, что при установке тянется версия Bourbon 3.2 Beta и она, кажется, не полностью функциональна. В этом разделе я не намерен говорить «плохой Bourbon», а просто показываю, что в некоторых случаях с помощью Bower вы получите больше библиотек, чем действительно хотите.

Регистрация Bower

После того, как пакет готов к выпуску, зарегистрируйте его в Bower. Критерии довольно простые:

  1. убедитесь, что ваше хранилище содержит файл bower.json;
  2. вы должны использовать семантическую версионность;
  3. ваш пакет должен быть доступен через Git, например, на Github.

После того, как всё это у вас есть, выполните следующую команду с новым именем пакета и хранилищем Git:

Регистрация проходит безболезненно. После того, как вы получите зелёный свет на всё, сделайте проверку и выполните $ bower install .

Bower и Sass

Bower и Sass — это библиотеки, которые удивительно сочетаются друг с другом. Есть небольшие хранилища по всему Github на Ruby Gem/Compass, но их сложность бывает слишком накладной. Вы должны сделать либо форк, либо клон или не дай бог, скопировать и вставить код в свой проект. Что? Мы не цивилизованные?

В мире Ruby разработчики привыкли к тому, что Gem и Compass установлены в безопасном неприкасаемом месте. Новый Gem добавляется в Gemfile и мы просто ссылаемся на библиотеку в проекте.

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

В новом мире JavaScript, библиотека добавляется в манифест bower.json или просто устанавливается, но вместо того, чтобы находиться в неопределённом месте, устанавливается в корень проекта. Это сохраняет всё простым с точки зрения установки, но означает, что Sass импортируется в относительную папку. Небольшая разница, но отличается от того, к чему мы привыкли.

Итак, как выглядит пакет Sass Bower? Давайте возьмём простой проект, который я создал с именем sass-icon-fonts. Этот пакет является просто парой примесей, которые позволяет разработчику легко создавать набор правил @font-face , а также быстро генерировать набор правил со шрифтовыми иконками. Мини-библиотека поставляется с инструкциями и очень простым API.

Теперь представив что вы создаёте Node-проект и хотите использовать этот пакет в качестве ресурса, выполните:

$ bower install sass-icon-fonts —save

Эта команда установит пакет и добавит зависимость в ваш файл bower.json. Создайте в корне проекта папку sass/, а внутри неё файл application.scss. В корне также находится папка bower_components. Для доступа к вашему файлу application.scss вам нужно импортировать относительный путь к библиотеке, как показано в следующей строке:

Предыдущий пример работает и я считаю его приемлемым, но не замечательным. Роясь дальше в Grint-Sass API я обнаружил функцию includePaths. Она позволяет вам установить путь импорта.

Теперь у нас есть это в Gruntfile.js и вы можете легко ссылаться на основной файл манифеста библиотеки через простой импорт Sass, например, так:

Bower в npm

Одна из вещей, которые я нахожу немного раздражающей при использовании Bower — это то, что я должен выполнять различные команды при инициализации нового проекта. У меня уже есть npm, почему бы просто не связать их вместе?

Да, да, вы можете. В файле package.json просто расширьте объект scripts и передайте команду bower install. Вот почему я действительно люблю эту штуку!

Теперь, при запуске npm install вы не только установите все пакеты Node, но и заодно пакеты Bower. Прекрасно!

Bower за фаерволом

Если вы оказались за фаерволом, который не разрешает протокол git://, это можно исправить. Для начала я предлагаю сделать вручную клон с использованием протокола https://, чтобы убедиться, что это действительно проблема. Если протокол https:// работает, то вы можете сделать следующее обновление:

Резюме

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

Не нужны больше форки, клонирование, удаление папки .git/, достаточно просто включить библиотеку в проект. Я смотрю на создание модулей Sass также в совершенно новом свете. Не то, чтобы Compass был сложен, но Bower освобождает меня от нескольких зависимостей. А это было реальной проблемой во многих проектах.

источник

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