Bower — Bower + Galp


Содержание

Bower, Gulp и Yeoman

Для управления зависимостями приложений в PHP есть Composer, в Ruby есть Bundler, а для Node.js есть npm. Независимо от среды, эти инструменты значительно улучшают рабочий процесс разработки.

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

Это всё хорошо звучит для PHP, Ruby и Node.js. но что насчёт фронтенда?

Мы всё чаще обращаемся к таким библиотекам как jQuery, Angular.js, Bootstrap, Foundation и ко множеству плагинов, которые идут вместе с ними. В конечном итоге мы, как правило, управляем библиотеками вручную — через подмодули или обычно только скачивая и распаковывая zip-файлы и вручную задавая зависимости (обычно методом проб и ошибок).

Решением является Bower. Он, как и Bootstrap ранее, сделан ребятами из Twitter и служит «менеджером пакетов для веб».

Содержание

Дэви Шафик

Профессиональный разработчик на PHP, с более чем 15-летним опытом. Автор нескольких книг и множества статей по PHP и связанных с ним технологиях.

Tools

Sponsors (become one):

Bower is used together with other tools to integrate with all sorts of setups and workflows.

Grunt

grunt-bower-concat
Grunt task for automatically concat all installed Bower components.

grunt-wiredep
Inject your Bower components right into your HTML using Grunt.

grunt-bower-requirejs
Automagically wire-up installed Bower components into your RequireJS config. Also available as a standalone CLI tool.

grunt-bower-task
Grunt plugin to automate Bower commands; allow the configuration of the files needed allowing to filter out the minimal in the project.

grunt-preen
A Grunt plugin to preen unwanted files and folders from packages installed via Bower.

gulp-google-cdn
Replaces script references with Google CDN ones, based on bower.json

main-bower-files
Iterates through dependencies and returns an array of files defined in the main property of the packages bower.json .

preen
A Node.js module to preen unwanted files and folders from packages installed via Bower. Preen can also be used via the CLI.

gulp-bower-normalize
A gulp plugin to copy files into a normalized file structure, arranged by package name and asset type.

Rails & Ruby

d-i/half-pipe
Gem to replace the Rails asset pipeline with a Grunt-based workflow, providing dependencies via Bower.

Rails Assets
Rails Assets is the frictionless proxy between Bundler and Bower.

ruby-bower
Ruby binding for Bower commands (Uses node/execjs instead of shelling out)

spagalloco/bower
Bower integration for your Ruby apps (sprockets).

Dandelion
Dandelion provides an integration with Bower. All Bower components are scanned and automatically converted into vendor bundles. See blog post.

Apps & IDEs

CodeKit
CodeKit is a Mac app that helps you build websites faster and better.

Telerik AppBuilder
Build iOS, Android and Windows Phone 8 hybrid apps using a single pure HTML5, CSS and JavaScript codebase. See blog post.

Webstorm
With integrated Bower package manager, you’ll be able to search for, install and manage client-side libraries and frameworks for your project with ease, right in the IDE.

NetBeans
Netbeans can resolve Bower dependencies for you from within the IDE. See blog post

Visual Studio 2015
Visual Studio has built-in support for searching, installation and managing of Bower packages. This includes rich auto-completion in bower.json to Bower specific commands and UI elements in Solution Explorer.

Package Intellisense for Visual Studio 2013
NPM and Bower package Intellisense directly in the Visual Studio JSON editor. See blog post.

Everything Else

alfred-workflows
A collection of Alfred workflows that includes Bower integration.

bowerder
The bower components loader for browsers. Easly import components main files to your project.

bowcat
npm package. Quickly concatenate your project’s bower dependencies. Like grunt-bower-concat but without the weight and complexity of grunt.

BowerStatic
Serve Bower-managed static resources using Python WSGI

Pyramid_BowerStatic
Use Bower via BowerStatic with the Pyramid framework

kooshy-fe
Integrates a web-based interface for Bower.


paulmillr/read-components
reads root bower.json, opens bower.json of all packages and their dependencies and auto-calculates concatenation order.

octo-linker/github-linker
Google Chrome Extension which links dependencies listed bower.json on GitHub to their project’s pages.

requirejs-plugin-bower
Requirejs plugin for creating & loading Path/Shim configurations automatically from bower.json dependencies (InBrowser & InBuild)

flask-bower
Flask-Bower is a flask extension to serve bower installed packages — also on Github

brackets-bower
Bower extension for Brackets. It lets you manage your application’s dependencies: search, install, update, remove and more. Support for bower.json and .bowerrc files.

Django-bower
Easy way to use bower with your Django project

Как я могу интегрировать Bower с Gulp.js?

Я пытаюсь написать задачу gulp, которая выполняет несколько вещей

  1. Установить зависимости Бауэра
  2. Сконцентрировать эти зависимости в одном файле в порядке зависимостей

Я надеялся сделать это без указания путей к этим зависимостям. Я знаю, что есть команда bower list —paths , но я не уверен, возможно ли связать ее вместе.

Есть какие-нибудь мысли?

Редактировать

Поэтому я пытаюсь использовать gulp-bower-files , и я получаю ошибку eaccess, и ее нет создание объединенного файла.

gulpfile.js

bower.json

, и я продолжаю сталкиваться с этой ошибкой

Настройка окружения для работы с Bower, Gulp, Jade и Stylus

Jade и Stylus — препроцессоры для языков HTML и CSS. Они позволяют писать более аккуратный и красивый код, соблюдая принцип DRY (Don’t Repeat Yourself), используя переменные, циклы, условия и модули.

Код jade хранится в файлах *.jade, из которых препроцессор собирает статичные HTML-документы. Код stylus хранится в файлах *.styl, из которых препроцессор собирает статичные CSS-документы.

Gulp — сборщик проектов, который упрощает работу верстальщика, автоматизируя рутинные задачи. В нашем случае он будет запускать препроцессоры jade и stylus, отслеживать изменения в файлах и сохранять скомпилированные стили и страницы в отдельную папку.

Bower — менеджер библиотек. Он упрощает поиск и скачивание библиотек, фреймворков и jQuery-плагинов.

Препроцессоры, Bower и Gulp работают на платформе node.js. Скачать и установить node.js можно с официального сайта: https://nodejs.org/en/

Для работы Bower нужно установить систему контроля версий Git. Уметь работать с ней не обязательно. Скачать установщик Git можно с официального сайта: http://git-scm.com/download

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

Создайте новую папку, в которой будет храниться весь проект. Например, project.

Откройте консоль Git в этой папке (правый клик > Git Bash here).

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

После завершения установки запустите в консоли команду глобальной установки gulp

Создайте в папке project файл gulpfile.js. В этом файле будут описаны команды для Gulp по работе с препроцессорами.

Для работы с Jade и Stylus нам понадобятся плагины gulp (установленный локально), gulp-jade и gulp-stylus. Для этого запустите в консоли команду

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

Для установки библиотек jquery и bootstrap выполните в консоли команду

После установки в папке проекты должна появиться директория bower_components с установленными библиотеками. По сути Bower копирует в папку bower_components мастер-ветку библиотеки из репозитория на Github. Нужные для работы файлы находятся уже внутри папки плагина.

В папке dev создайте новую папку libs и скопируйте туда файлы jquery.min.js, bootstrap.min.js, bootstrap.min.css из директорий соответствующих библиотек в bower_components

Последний шаг — создание двух папок в директории project:

  • source — папка, в которой будут храниться файлы препроцессоров
  • dev — папка, в которую будут сохраняться скомпилированные стили и страницы

Настройка gulp

Откройте в редакторе файл gulpfile.js и впишите в него следующий код:

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

После этого мы можем приступать к написанию “тасков” — заданий ( task). У нас будет три основных задания:


  • compile_jade — запускает препроцессор jade
  • compile_stylus — запускает препроцессор stylus
  • watch — отслеживание изменений в файлах

Задания в Gulp описываются методом gulp.task(), принимающим два параметра:

  • Строка с названием задания
  • Функция, в которой будет выполняться само задание

Для jade это будет выглядеть так:

Gulp работает следующим образом: в начале задания ему на вход подаются файлы препроцессора. После этого строится цепочка “пайпов” — методов, которые обрабатывают эти файлы в одном потоке. это может быть что угодно — сжатие, склеивание файлов, проверка на ошибки, добавление вендорных префиксов и т. д. В нашем случае будет только два “пайпа” — запуск препроцессора и копирование файлов в папку dev

Целиком задание для Jade выглядит следующим образом

Аналогично для Stylus

И целиком gulpfile.js выглядит так:

Работа с Jade и Stylus

Синтаксис jade и stylus можно изучить на официальных сайтах:

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

Создаем в папке source файлы:

После этого мы должны запустить нашу задачу compile_jade, которую ранее описали в файле gulpfile.js. Для этого нужно выполнить в консоли следующую команду:

После запуска этой команды Gulp возьмет файл index.jade, и передаст его препроцессору. Препроцессор вставит вместо include содержимое подключаемых jade-файлов и обработает все
в один файл — index.html. После обработки препроцессором Gulp берет этот файл и копирует его из своего потока в папку dev. В итоге мы получаем вот такой index.html:

Цукерберг рекомендует:  7 малоизвестных, но очень полезных функций в PHP

То же самое делаем с файлом style.styl:

И получаем файл style.css в папке dev:

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

Для того, чтобы не лезть в консоль после каждого сохранения изменений в jade и stylus файлах, в Gulp есть встроеная функция gulp.watch. Она следит за изменением указанных файлов и запускает нужные задачи. В нашем случае нужно отслеживать изменение всех файлов jade и stylus, после чего запускать определенную задачу. Функция watch принимает два параметра:

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

Допишите в gulpfile.js следующий код:

source/*.jade означает, что Gulp будет следить за всеми файлами с расширением *.jade, которые лежат в папке source

Теперь попробуйте запустить из консоли задачу watch, внесите какие-нибудь изменения в файлы jade и styl и сохраните их. В консоли должно быть примерно следующее:

Если добавить в конец файла gulpfile.js строку

то в консоли можно выполнить только команду gulp. Это запустит таск default, который, в свою очередь, поочередно запустит задачи compile_jade, compile_stylus и watch.

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

Как установить NodeJs, Gulp и Bower под *ubuntu (кратко)

Данная статья скорее необходимость, чем подробное руководство по node, gulp, bower и npm. Дело в том, что последующие пару статей затронут материал касающийся верстки. А я последнее время все больше и больше использую такие «механизмы» для облегчения и оптимизации рабочего процесса.

Краткое описание:
Gulp — сборщик проектов написанный на node.js
Bower — менеджер пакетов для фронтенда в web. Так же написан на node.js
Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код)
Npm — пакетный мендежер для node.js (а Gulp и Bower являются его пакетами)

И так, что нам нужно в итоге? — установленные и рабочие Gulp и Bower. Которые в последствии позволят нам увеличить производительность в плане web разработки.

А для этого, нам потребуется установить Node.js и Npm. Поехали.

Установка

Установка NodeJs:

Устанавливаем менеджер пакетов Npm:

Не знаю как под Windows, но под ubuntu это делается очень просто :). Даже ничего предварительно не нужно скачивать. Ввел команду, и вуаля — все готово.

Установка Gulp:

это установит gulp глобально, давая доступ к gulp CLI (т. е. те работать с ним через терминал/консоль)

Установка Bower:

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

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


На данный момент, package.json для моего Gulp файла имеет следующий вид:

Данные пакеты используются мной для верстки WordPress тем.

Сам gulpfile.js, имеет код:

Как этим всем воспользоваться? Создаем два выше указанных файла, и вставляем в них код выше. Далее, переходим в командную строку и вводим:

Это заставит npm установить все пакеты из файла package.json в каталог проекта.

Подождав финиша установки пакетов, запускаем наш gulpfile.js не сложной командой:

после чего, все должно заработать и отобразить ошибку.

Bower

Им пользоваться не сложнее. Все доступные пакеты можно найти через поисковик бовера ( https://bower.io/search/ ). Кстати, с пакетами npm и gulp такая же ситуация, у них есть свои поисковые страницы — http://gulpjs.com/plugins/ и https://www.npmjs.com/

Файл bower.json может иметь следующий вид:

Звездочка обозначает последнюю версию доступного скрипта. Но по какой-то причине, это не всегда срабатывает. Поэтому отслеживайте вашу консоль и вносите соответствующие директивы в ваш bower.json файл.

Вы можете создать вспомогательный файл для Bower «.bowerrc». В нем, я указываю лишь директорию куда должны быть установлены скаченные библиотеки:

Устанавливать библиотеки через Bower так же просто как и устанавливать пакеты npm:

Хочу еще раз обратить ваше внимание на то, что установка пакетов и скриптов через файлы package.json и bower.json значительно сокращает затрачиваемое время на разработку.

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

Bower — Bower + Galp

This task is designed for gulp 3+.

Install packages into the bower_components directory from bower.json dependencies:

  • To install packages into a custom directory, pass the directory option:
  • To set the current working directory, pass the cwd option:
  • By default gulp-bower runs ‘install’ command for Bower. Using cmd property, you can specify the custom command (e.g. update):
  • opts.directory — string Install directory. Default: taken from .bowerrc config or bower_components
  • opts.cwd — string Current working directory. Default: process.cwd()
  • opts.cmd — string bower command. Default: install
  • opts.interactive — boolean Enable prompting on version conflicts. Default: false
  • opts.verbosity — number Set verbosity level. Default: 2
    • — No output
    • 1 — Error output
    • 2 — Info
  • Drop dependency on deprecated gulp-util . (by TheDancingCode)
  • Added verbosity options, prompting, .bowerrc handling, tests and CI. (by Crevil)
  • Fixed command passing to also handle nested commands (by mechanoid)
  • Fixed dependencies (by serbrech)


  • Fixed #19
  • Fixed undefined cwd bug
  • Fixed dependencies versions (by Karl-Gustav)
  • Fixed cwd bug (by mlegenhausen)
  • Added commands support (by Keksinautin)
  • Added ability to pass in an initialization object that allows a cwd to be specified (by cb1kenobi)
  • Emits «end», so the consumer knows when bower is done installing (by agzam)
  • fixed custom bower directory bug
  • add logging (by squarejaw)
  • parse .bowerrc for the bower install directory or allow the user to specify the directory (by eboskma)

Kickstarting Angular with Gulp and Browserify, Part 1 — Gulp and Bower

Last update: Aug 14, 2014 • angular

Let’s develop an Angular boilerplate. Why? Despite the plethora of Angular seeds/generators/templates/boilerplates/starters/etc. on Github, none of them will ever do exactly what you want unless you build your own, piece by piece. By designing your own, you will better understand each component as well as how each fits into the greater project. Stop fighting against a boilerplate that just doesn’t fit your needs and start from scratch. Keep it simple, as you learn the process.

In this first part, we’ll start with Angular and Gulp, getting a working project setup. Next time we’ll add Browserify into the mix.

This tutorial assumes you have Node.js installed and have working knowledge of NPM and Angular. Just want the code? Get it here.

Contents

Project Setup

Install Dependencies

Setup a project folder and create a package.json file:

The npm init command helps you create your project’s base configuration through an interactive prompt. Be sure to update the ‘entry point’ to ‘gulpfile.js’. You can just accept the defaults on the remaining prompts.

Do the same for Bower:

Accept all the defaults. After the file is created update the ignore list:

Install global dependencies:

Bower install directory

You can specify where you want the dependencies (commonly known as bower components) installed to by adding a .bowerrc file and adding the following code:

Install local dependencies:

The —save flag adds the dependencies to the package.json and bower.json files, respectively.

We’ll address each of these dependencies shortly. For now, be sure you understand the project’s core dependencies:

  • Gulp is a Javascript task runner, used to automate repetitive tasks (i.e., minifying, linting, testing, building, compiling) to simplify the build process.
  • Bower manages front-end dependencies.

Folder Structure

Let’s setup a base folder structure:

Add the files and folders not already included. This structure is based on the popular Angular Seed boilerplate, developed by the Angular team.

To start, we just need the following code:

This allows us to serve our future Angular app on a development server running on port 8888.


Let’s test it out. Add the word ‘hi’ to the index.html file, then run the following command:

Navigate to http://localhost:8888/ and you should see ‘hi’ staring back at you. Let’s build a quick sample app. Keep the server running…

Develop a Sample App

index.html

This should look familiar. The ng-app directive initiates an Angular app while ng-view sets the stage for routing.

main.js

Again, this should be relatively straightforward. We setup the basic Angular code to establish a route handler along with a controller that passes the variable test to the template.

partial1.html

Now let’s add the partial template:

Back in your browser, refresh the page. You should see the text:

Create the Build

Now that our app is working locally, let’s modify our gulpfile.js to generate a deployable build. Kill the server.

What’s happening here?

  1. gulp-jshint checks for code quality in the JS files. If there are any issues the build fails and all errors output to the console.
  2. gulp-clean removes the entire build folder so that we start fresh every time we generate a new build.
  3. gulp-uglify and gulp-minify-css minify JS and CSS, respectively.

Build commands

Default

The default task, gulp , is a compound task that runs both the lint and connect tasks. Again, this just serves the files in the “app” folder on http://localhost:8888/.

Build

The build task creates a new directory called “dist”, runs the linter, minifies the CSS and JS files, and copies all the HTML files and Bower Components. You can then see what the final build looks like on http://localhost:9999/ before deployment. You should also run the clean task before you generate a build.

Conclusion

Well, hopefully you now have a better understanding of how Gulp can greatly simply the build process, handling a number of repetitive tasks. Next time we’ll clean up some of the mess that the Bower components leave behind by adding Browserify into the mix and detail a nice workflow that you can use for all your Angular projects.

Leave questions and comments below. Cheers!

Сборка Gulp для разработки проекта

Основный список инструментов

Список инструментов, посредством которых создадим окружение для разработки фронтенд составляющей проекта (сайта):

  • Node.js (среда для выполнения JavaScript приложений);
  • npm (пакетный менеджер, входящий в Node.js, его будем использовать для загрузки Gulp, плагинов к нему и Bower);
  • Git (система контроля версий, необходима для работы Bower);
  • Bower (пакетный менеджер, будем использовать для загрузки таких библиотек как Bootstrap, jQueryи Popover);
  • Gulp (инструмент, который будем использовать для сборки проекта и выполнения других веб задач).

Файловая структура проекта

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого он её создаёт.

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

Bootstrap 4 — Файловая структура проекта, сборку которого будем осуществлять с помощью Gulp

Для этого в корне проекта создадим папку assets , файлы gulpfile.js (будет содержать задачи для сборщика проекта Gulp) и .bowerrc (конфигурационный файл для менеджера Bower с помощью которого будем загружать Bootstrap, jQuery и Popper). В папке assets создадим ещё 2 папки: src (для исходных кодов), build (для готовых файлов, их в эту папку будет помещать сборщик Gulp). В папке src создадим ещё 6 каталогов ( bower_components , fonts , img , js , style и template ) и 1 файл ( index.html ).

Цукерберг рекомендует:  Реклама - Реклама на канале Сыендук ЗАДРОТСКАЯ ЯРОСТЬ

Директорию bower_components отведём под компоненты, которые будем загружать с помощью Bower.

Директорию fonts будем использовать под шрифты.

В директорию img будем помещать исходные файлы изображений.

Директорию js будем использовать для js-файлов: main.js и my.js . Файл my.js будем использовать для написания своих скриптов, а main.js – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге build ).

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, можно, например, с помощью дополнительного SCSS файла main.scss . Другими словами именно с помощью этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к данному файлу можно также подключить файл с переопределёнными переменными Bootstrap, а также SCSS файл (например, my.scss ), в котором вы будете описывать свои стили.

Содержимое файла main.scss (пример):

Список js-файлов (находятся в каталоге ./js/dist/ ):


Определять какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, будем посредством main.js .

Импортирование нужных файлов в main.js будем осуществлять посредством Gulp плагина gulp-rigger(он будет установлен и подключен к проекту позже), используя следующую конструкцию:

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и свои js-файлы.

Содержимое файла main.js (пример):

Установка инструментов

Установим инструменты «Node.js», «Git», «Gulp» и «Bower». С помощью их будем создавать окружение для комфортной разработки фронтенд проекта.

Установка Gulp. Для установки Gulp необходимо открыть командную консоль и выполнить в ней команду:

Ключ -g указывает npm, что пакет необходимо загружать не в текущую, а в основную папку.

Установка Bower. Установка Bower выполняется также как и Gulp.

Инициализация проекта и установка зависимостей

Начинается разработка проекта обычно с создания файла package.json (манифеста).

Файл package.json будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:

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

Ключ —save-dev необходим, чтобы при установке пакета, информация о нём, автоматически прописывалась в секцию devDependencies файла package.json .

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

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

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

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

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:

Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Создание сборщика проекта (gulpfile.js)

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

Файл gulpfile.js представляет собой список задач, которые будут выполнять следующие действия:

  • сбор нескольких файлов стилей в один, компиляция полученного scss в css, добавление автопрефиксов, минимизация CSS и создание source map;
  • импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
  • сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

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

Откроем файл gulpfile.js и вставим в него следующее содержимое:

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

Синтаксис создания задач на Gulp очень прост:

Функционал же задачи в большинстве случаев состоит из следующих действий:

  • выборки исходных файлов;
  • вызова различных плагинов, которые делают что-то с этими файлами;
  • выгрузки полученных файлов в папку назначения.

Как использовать окружение

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp.


После ввода этой команды запустится задача по умолчанию ( default ). Эта задача запустит задачи build , webserver и watch . Задача build осуществит сборку проекта для продакшена. Все полученные файлы она поместит в папку build . Задача webserver запустит локальный веб-сервер с «живой перезагрузкой» страниц. Задача watch будет отслеживать изменения исходных файлов в папке src и автоматически запускать необходимые задачи. В результате содержимое папки build всегда будет находиться в актуальном состоянии.

A Beginners Guide to Package Manager Bower and Using Gulp to Manage Components

Package managers like Composer for PHP and NPM for Node have become essential tools for simplifying a developer’s life. A package manager is a tool for keeping track of what you’ve installed, as well as installing and upgrading packages. They also check for dependencies and compatibility. Bower is a package manager for the web.

The web is built from various frameworks, libraries and plugins. Bower’s job is to make managing these “packages” easy. With Bower you can quickly download things like jQuery and plugins, as well as CSS frameworks and much more.

Let’s Install Bower

Bower uses Node, so make sure you’ve installed it before proceeding to install Bower. You can check if Node is installed by opening up a terminal and running the following command:-

If you get something like ‘command not found’ you will need to install it. You can get it from the Node website.

Now we should be ready to globally install Bower. To do this we’ll use the Node Package Manager (npm) from the terminal:-

If you’re running this from OSX or Linux you will probably need to run this as an administrator so prepend it with sudo .

Setup Bower for a Project

For each of your projects that you want to use Bower with you will need to initialise it. From the terminal navigate to a project’s folder; something like:-

From now on all the commands we’ll be running will be from the project’s root folder. The project needs a file called bower.json. Create one in the project’s folder, the contents of the file should be something like:-

Alternatively you could generate the file by running bower init and answering the questions asked. It’s up to you which method you prefer.

We should now be in a position to start installing some packages.

Finding Packages

There are a few of ways of finding Bower packages. You can search via the Bower website or alternatively you can use the command line.

To search for packages from the terminal you use Bower’s search command followed by what you’re searching for:-

For example, to search for jQuery packages:-

Try it yourself. You should see a very long list of available packages.

Installing a Package

To install a package you can use Bower’s install command:-

This will download the specified package to a bower_components folder in the project’s root (we’ll look at changing this in a moment). The —save flag tells Bower to add the package to the bower.json file for future reference.

Let’s give it a try and install jQuery:-

You should find the latest version of jQuery downloaded to bower_components and the package added to bower.json. The version installed should have been output to the terminal.

If you want to fetch a specific version you can append the version number after the package name:-

So for a specific version of jQuery:-

If Bower can’t find an exact match it will attempt to offer you a choice of versions to install.

Another neat trick that Bower will perform is that if you attempt to install a package that depends on another one it will download both and make sure the packages are compatible.

Updating Packages

To update your packages simply use Bower’s update command:-

Uninstall a Package

To uninstall a package use Bower’s uninstall command:-

The —save flag will remove the package from the bower.json file as well as uninstall it.

bower_components

By default Bower is going to download everything to the bower_components folder. We can change this using the directory setting in the .bowerrc file. If this file doesn’t yet exist you will need to add it to the same folder that contains your bower.json file. This file is a JSON file for defining your Bower settings. To change the folder that Bower installs packages add the directory setting like:-

This will cause Bower to download everything to public/vendor/ instead of bower_components.

It may be worth excluding the bower_components folder from your repository if you’re using something like Git by adding the folder to your .gitignore file. Then whenever you pull down your code you can reinstall all the Bower managed packages by running:-

Excluding the bower_components folder will keep the size of your repository small, but not everyone agrees with excluding this; Addy Osmani has put together something arguing for-and-against checking in front-end dependencies which is worth a look when you have time.

Using the Installed Packages

How you use the packages downloaded by Bower is left up to you. One of the neat features of Bower.

One approach is to directly link to assets in the bower_components folder (or whatever you have configured it to be in the .bowerrc file). However, you ideally want to keep the size and number of assets included in your web pages to a minimum. Using a task runner like Gulp can help achieve this.

Managing Components with Gulp


If you’re not familiar with Gulp I recommend you take a look at my Beginners Guide to the Task Runner Gulp before reading on. I’m not going to explain what Gulp is or how it works here.

What I am going to show is how you can use Gulp to take the assets from installed Bower packages and combine them into smaller files suitable for delivering to the end user on the web.

Цукерберг рекомендует:  5 причин для гика прийти на ММСО

The Gulp examples that follow are going to be using the excellent gulp-load-plugins plugin so that plugins don’t need to be individually declared in the gulp file. If you haven’t come across this plugin yet take a look at my Automatically Load Gulp Plugins with gulp-load-plugins post. The top of the gulpfile will look like this:-

JavaScript

We’re going to be using the main-bower-files and gulp-filter plugins to grab files from the installed Bower packages. So for example, we can retrieve all the main JS files from our Bower packages like this:-

plugins.mainBowerFiles() returns an array of all the main files from the packages and plugins.filter(‘*.js’) uses gulp-filter to pass only JS files.

Let’s put this in a task and combine all the JS files from the Bower packages appended with JS files from our project then minify everything:-

plugins.mainBowerFiles().concat(jsFiles) returns an array of all the main files from the packages combined with files defined in the jsFiles array we’ve defined. Any JS files from our project will be defined in this latter array. We’re then combining and minifying the scripts with the gulp-concat and gulp-uglify plugins.

Running gulp js will create a single minified JS file, www/public/js/main.js.

We can now do the same thing for any CSS files:-

This will output a single minified CSS file called main.css containing all the CSS rules from our Bower packages and project much like we just d >CSS files are concatenated? For example, say we’ve installed normalize.css ( bower install normalize.css —save ); >CSS file. We can sort the filtered CSS files by piping to the gulp-order plugin:-

This will ensure normalize.css is included before all the other CSS files.

We now have one JavaScript file and one CSS file to include on our webpages.

Final Words

Bower is an excellent tool for developers looking to make life that little bit simpler. You don’t need to use Gulp to work with Bower packages, but I hope I’ve shown how it can make working with Bower easier. Other task runners like Grunt can be used instead of Gulp if that’s your thing. Otherwise you can just link directly to files downloaded by Bower, although you lose the benefits of minimising the size and number of assets to include with a page that you get from using a task runner.

I hope I’ve got you interested in Bower. Go check out Bower for yourselves!

Published on Wednesday 24 September 2014

Comments

antonio | 21 October 2014 #

Hey Andy,
Thanks for creating such a helpful post. I have been able to get the ‘js task’ to work, but I am having problems with the ‘css task’.

When the ‘css task’ is run, I don’t get any errors, notifications (from terminal) or any file outputs, (css in this case).
Here is a gist of what I have thus far.

I’d appreciate any insight!

Andy | 21 October 2014 #

Thanks for the comment. Glad the post has been helpful.

I’m not familiar with some of the Gulp plugins you’re using with your CSS task. Does it work if you exclude the mainBowerFiles() so that you’re source is just gulp.src(sassSources)? I would try disabling some of the processes in your task to try and pinpoint where things are failing.

M Kheel | 4 December 2014 #

Thanks so much! I’ve been searching for a gulp / grunt plugin like this for very long time.

John | 5 January 2015 #

I’m trying to use this idea to concatenate my backbone.js with bower, yet it never concats in the order of dependency, meaning, for example, backbone-relational is always added before backbone, and causes an error in the console.

Have you come across a solution to this?

Andy | 6 January 2015 #

Hi John, have you tried using gulp-order as described above to reorder your JS files?

Corey | 12 February 2015 #

Hey Andy, would like to also express my thanks and gratitude for such an awesome post. You helped me “connect the dots”!

Dave | 19 February 2015 #

Hi Andy,
I’ve installed a repo via Bower and there’s a bunch of different files in there. I need to add two of them to my html file and whilst I can do that manually, i’m using gulp wiredep to do this automatically for me in a task.
How/where can I define which files from a repo I want to use? It appears to be automatic and I’d like control over it.
Cheers,
Dave

Andy | 20 February 2015 #

Hi Dave, I’m not familiar with gulp-wiredep. The Bower packages come with the files defined in their individual bower.json file. As far as I am aware this can’t be overridden. My personal approach for specifying which files from a package to use is with the main-bower-files and gulp-filter plugins as described above.

vh | 23 February 2015 #

How can i include multiple files in main tag of package.json ? ex “main”: [ “jquery.flot.js”, “jquery.flot.time.js” ],

James Van Leuven | 22 March 2015 #


I’m running into an error with gulp-uglify

my package.json devDependencies:

my bower.json list:

PS E:\hostingspaces\admin2\www\bookt.in> gulp
[13:35:22] Using gulpfile E:\hostingspaces\admin2\www\bookt.in\gulpfile.js
[13:35:22] Starting ‘scripts’…
[13:35:24] Finished ‘scripts’ after 2.44 s
[13:35:24] Starting ‘css’…
[13:35:24] Finished ‘css’ after 74 ms
[13:35:24] Starting ‘default’…
[13:35:24] Finished ‘default’ after 19 μs

events.js:85 throw er; // Unhandled ‘error’ event ^
Error at new JS_Parse_Error (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:189:18) at js_error (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:197:11) at parse_error (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:299:55) at next_token (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:544:9) at E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:415:16 at E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:509:24 at handle_slash (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:485:20) at next_token (E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:538:27) at E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:415:16 at E:\hostingspaces\admin2\www\bookt.in\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:509:24

I’ve googled it of course, and I’m not finding a solution.
When I comment out “.pipe(plugins.uglify())” it concat’s no issue, but of course, it’s not minified.

Anirudh Banarji | 23 March 2015 #

I also wrote a tutorial and wanted to share it here in case it helps someone http://www.anirudhbanarji.com/getting-started-with-bower/

Håkan Öström | 12 April 2015 #

Actually it is possible (as Dave asked) to define which files to include (or exclude) from individual bower packages when using main-bower-files. Take a look at the Overrides option.
https://github.com/ck86/main-bower-files#overrides-options

Shane | 4 May 2015 #

To anyone having issues with the CSS :

The plugin gulp-uglify is for JS only, therefore trying to compress CSS with it throws an error.

Use gulp-minify instead!

Shane | 4 May 2015 #

Excellent tutorial by the way!

This stuff can be extremely intimidating for someone just dipping into bower and gulp, and you did a great job taking away that intimidation!

Dolorian | 12 May 2015 #

Very nice and helpful tutorial! It really helped me see Bower + Gulp in a different light (was rather skeptical about their utility before).

Something I am not quite clear on yet, what can one do in the case of jQuery plugins like Fancybox and Flexslider or an utility like Font Awesome which not only have .css and .js files but also have a folder with images (or fonts in the case of Font Awesome)? How would one go about setting up a task (or tasks) to handle these modules?

Kevin | 30 July 2015 #

Andy, is there any way you (or anyone here) could consider making a super simple repository with a basic structure, package.json, gulpfile.js with two or three bower components installed? For the life of me, I can’t get it to work and I’m sure I’m missing something rudimentary.

I keep getting an error ‘TypeError: Cannot read property ‘on’ of undefined at DestroyableTransform.Readable.pipe’

Kevin | 30 July 2015 #

OK, after almost thinking I was going completely insane, I realized that I was using gulp-load-plugins v. 0.2.0

In the readme, I see that the camelize didn’t default to true until 0.3.0

Thus I had to declare `camelize: true` in the options for `gulp-load-plugins` (or update gulp-load-plugins)

Thanks for the writeup!

Owen | 5 September 2015 #

Just wanted to say a big thanks, as other have said, there’s a lot to get to grips to with Bower and it’s not intuitive to begin. Really helpful stuff.

Digimix | 17 September 2015 #

Hey Andy, thanks for putting together this Bower/Gulp great tutorial! I’ll be sharing it as a reference during some upcoming training sessions.

Andy | 18 September 2015 #

Hi Digimix, thanks. Good to know it is useful and getting shared.

C.S. Rhymes | 22 October 2015 #

Thanks for this article. I have been looking at using Bower for a while now and this article is a great introduction explaining what it can do and how you can use it!

Joel Duckworth | 2 May 2020 #

Thanks for your article, I ran into issues because your use of plugins.filter was using
“*.js”
instead of
“**/*.js”

Otherwise the filter doesn’t pick up the files in subdirectories from mainBowerFiles

Baymediasoft | 28 July 2020 #

Could you please explain when deploying web server what need to do?. The path in ref=“bower_components/bootstrap/dist/css/bootstrap.css”> isn’t really helping then, correlated to the ease of using a CDN . I have so far seen no Bower tutorial mention this part, what to do when files go on the server.

Neil | 29 December 2020 #

This is great but once i’ve ended up with the main.js and main.css files what about references in those to other assets like font files, images, svg’s etc? Those file path references will surely all be incorrect now as the assets are still located in the depths of the bower-components directory and the new main.js/.css files are in (most likely /public/assets).

Any suggestions about how to make these secondary assets link up or move them to /public/assets but at the same time updating the references in main.js/.css ?

Dallas | 13 September 2020 #

This was super helpful. Thanks!! Some interesting things I learned — if your bower package JSON is messed up, it’s possible to have a gulp task look like it ran correctly but not generate files or throw errors. Also, in case it helps anyone, using pump instead of .pipe is great for debugging. Another simple way of debugging was for me to just print out to the console which directories were being included with jsFiles. I’d never worked with these tools before, so even simple things like that helped me understand what each piece of the commands were doing.

Как я могу интегрировать Bower с Gulp.js?

Я пытаюсь написать задачу gulp, которая делает несколько вещей

  • Установите зависимости Bower
  • Согласовать эти зависимости в один файл в порядке зависимостей

Я надеялся сделать это, не указывая пути к этим зависимостям. Я знаю, что есть команда bower list —paths , но я не уверен, можно ли связать ее вместе.

Изменить

Итак, я пытаюсь использовать gulp-bower-files, и я получаю ошибку eaccess и не создаю конкатенированный файл.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих