Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Средний
2 урока
(23 минуты)
Курс
Bower
Bower - пакетный менеджер для web. Перед вами подробный и наиболее полный в рунете видеокурс руководство по работе с Bower. Даже если вы давно знакомы с Bower, данный видеокурс будет вам полезен и раскроет некоторые не очевидные нюансы работы.

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

В данном уроке мы рассмотрим три инструмента, которые дополняют bower и делают работу с ним более удобной. Речь пойдет о gulp-google-cdn, main-bower-files, preen. Наслаждайтесь! Скоро приложу подробную статью с кодом.

Bower — tools

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

Давайте перейдём на официальный сайт проекта в раздел Tools bower.io/docs/tools/

Для того, чтобы сделать работу с Bower более приятной разработчики со всего света используют Bower вместе с другими инструментами автоматизации, такими, как Grunt, Gulp, Ruby. Также существуют различные Bower-плагины для работы популярными редакторами. А также с CodeKit, если вы пользователь MacOS, Visual Studio и много с чем ещё.

Я люблю gulp, поэтому дальше будем говорить именно о gulp решениях.

gulp-google-cdn

Ссылка на плагин

Данный плагин заменяет ваши javascript библиотеки подключенные локально на аналогичные из google-cdn.

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

  • В gulpfile.js мы будем писать таски для gulp.
  • В bower.json — сохранять зависимости проекта, a в
  • package.json будет сохранять все необходимые для разработки модули npm.
  • Разумеется, нам также понадобится index.html файл, в который мы будем подключать различные библиотеки, установленные при помощи bower

Установим сам gulp и gulp-google-cdn. Не забываем в конце команды указать ключ -D, чтобы новые зависимости прописались в файл манифест npm.

Затем копируем из документации плагина код и вставляем его в наш gulpfile.js

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

Затем, при помощи команды bower i установим jquery.

Теперь в index.html файле создадим очень простую структуру. Быстрее всего это можно сделать, как вы знаете, при помощи emmet.

И подключим jquery из папки bower.

Теперь, чтобы поменять вызов jquery из папки на вызов из cdn, достаточно просто написать в консоли

что вызовет таск по умолчанию, который переложит обновленный index.html файл в папку dist, но уже с новым путём до jquery. Разумеется, вы можете настроить gulp так, как будет более уместно в вашем конкретном случае.

Если вы плохо знакомы с gulp, тогда я предлагаю вам ознакомиться с соответствующим курсом на нашем канале.

main-bower-files

Ссылка на плагин

Следующий плагин, работу которого я предлагаю сегодня рассмотреть — это main-bower-files. Данный плагин предлагает нам один из путей избавления от лишних файлов, а точнее поможет нам извлечь из всех сотен файлов скаченных bower’ом в папку bower_components только нужные нам файлы.

В данный момент, в зависимостях нашего проекта находится только jquery. Давайте посмотрим его bower.json файл. Мы видим:

Значит плагин main-bower-files вынет из папки bower_components только файл jquery.js. Если мы, например, хотим вынуть другой файл, к примеру jquery.min.js, для этого нам нужно переопределить главный файл для jquery. Как это делается, мы рассмотрим чуть позже, на примере bootstrap.

gulpfile.js

И установим сам плагин main-bower-files

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

Обязательно укажем место назначения — куда будут складываться главные файлы. Место вы выбираете сами. В моём случае это будет папка dist/mainfiles

Теперь, когда всё готово, просто вызовем gulp таск

и насладимся результатом его работы: нужный файл jquery.js скопирован из папки bower_components в папку, которую мы и указывали.

Теперь давайте установим bootstrap

Обязательно с ключем -S, чтобы bootstrap добавился в наш файл манифест, как новая зависимость проекта. Убедимся также, что папочка с фреймворком скачалась в папку bower_components. И заглянем в главный файл bower.json bootstrap. В ключе main мы видим два файла: bootstrap.less и bootstrap.js

Вы уже догадались, что будет после того, как мы напишем в консоли команду(?):

Видим, что скопировались файлы, которые являются для bootstrap главными по-умолчанию. Но я не хочу работать с less. Чаще всего, мне нужны другие файлы, причем минифицированные. Мы это можем изменить двумя способами.

СПОСОБ 1: Переопределим главные файлы для bootstrap прямо внутри gulp таска.

Делается это довольно просто. Мы передаём в функцию, которую мы назвали mainBowerFiles новый параметр «overrides», в котором пишем «bootstrap» и для ключа «main» определяем массив главных файлов

В нашем случае это:

  • «bootstrap.min.js»,
  • «bootstrap.min.css»,
  • «bootstrap-theme.min.css»

gulpfile.js

Удалим созданную на предыдущем этапе папку mainfiles. И заново запустим задачу gulp mainfiles.

Результат полностью соответствует нашим ожиданиям.

Давайте теперь разделим задачи на 2: css, js. Две разные задачи дадут нам больше свободы действий и позволят работать с css и js файлами по отдельности.

Первая задача будет называться mainJS. Для неё мы будем фильтровать только js файлы. Из из js файлов для bootstrap мы укажем, что нас интересует именно минифицированная версия скрипта bootstrap.min.js

Вторая задача будет называться mainCSS. Аналогично предыдущей мы отфильтруем только css файлы и для bootstrap переопределим в качестве главных таблиц стилей: bootstrap.min.css и bootstrap-theme.min.css

Сначала запустим задачу mainJS. Два файла были успешно скопированы в новую папку.

Затем mainCSS. И здесь всё без сюрпризов. СSS файлы скопированы в папку CSS и теперь мы можем спокойно подключить их к нашему index.html файлу.

СПОСОБ 2: Переопределим главные файлы для bootstrap прямо внутри bower.json

Это именно тот способ, который предпочитаю я, т.к. код получается более компактный. Мы всё также переопределяем главные файлы для bower, но на этот раз делаем это не в gulpfile.js, а прямо в нашем bower.json

bower.json

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

Preen

Ссылка на пакет

Последний npm пакет, работу которого мы сегодня рассмотрим называется — Preen.

Подход Preen координально отличается, от предлагаемого в main-bower-files. Он, на мой взгляд, несколько не профессиональный, но я уверен, что многим из зрителей он придется по душе.

Preen просто-напросто уничтожает все неиспользуемые файлы из bower_components, оставляя только те файлы, которые мы сами его попросим оставить.

Давайте посмотрим его в работе.

Я предлагаю скопировать gulp task прямо из документации и установить preen глобально в нашу систему.

Работу preen мы рассмотрим на примере jquery. Если говорить о jquery, то обычным разработчикам нужны только те файлы, которые находятся в папке dist, а именно jquery.js для локальной разработки и jquery.min.js для продакшен версии.

Напишем соответствующее правило в нашем bower.json

bower.json

Далее, всё, что нам нужно — это просто написать в консоли команду

Работа выполнена!

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

Остались вопросы — пишите в комментариях к видео, я постараюсь на всё ответить.

Впереди нас ждёт еще больше интересного. С вами был Дмитрий Ковальчук, канал LOftBlog, всем пока!

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#2 — Bower — подробное руководство

  1. foo:

    «В данный момент, в зависимостях нашего проекта находится только jquery. Давайте посмотрим его bower.json файл.» — у меня такого файла нет, видимо, из-за строки «»directory»: «app/bower»» в «.bowerrc». Что делать?

  2. dobro:

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

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

Рекомендуемые курсы