Bower

Установка Bower

Встановити Bower легко. Припустимо, що ви вже встановили Node.js і npm (дивіться тут для інформації). Спочатку ініціалізуємо наш проект, створивши файл package.json. Перейдіть до папки проекту і наберіть в командному рядку: version: (0.0.0) 0.0.1 description: entry point: (index. js) public/index.php test command: git repository: keywords: author: Davey Shafik <davey@engineyard.com> license: (ISC) Apache 2.0 About to write to <path>/gulp-bower-example/package.json: { "name": "gulp-bower-example", "version": "0.0. 1", "description": "", "main": "public/index.php", "dependencies": { "bower": "~1.3.5" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Davey Shafik <davey@engineyard.com>", "license": "Apache 2.0" } Is this ok? (yes)

Усі необхідні запити повинні бути зрозумілі, інші можна пропустити.

Тепер можна встановити Bower.

<code>$npm install-g bower

Це зробить команду bower доступною глобально.

Щоб зробити установку локально додатково виконайте:

<code>$ npm install--save-dev bower

Установка відбудеться в ./node_modules/bower, команда bower доступна в ./node_modules/.bin/bower. Щоб додати цю папку в path автоматично, npm включає підкоманду bin, яка поверне шлях до цієї папки, незалежно від того, де ви знаходитесь в проекті. Просто додайте $(npm bin) у свій шлях або використовуйте команду alias наступним чином:

<code>alias npm-exec='PATH=$(npm bin):$PATH'

Тепер можете набрати bower і він підбере правильний варіант (локальний, якщо він існує або глобальний інакше). Якщо ви використовували alias, можна вказати команду npm-exec.

Використання Bower

Як і інші менеджери пакетів Bower використовує файл bower.json для налаштування залежностей.

Подібно Composer і npm, Bower буде ставитися до кожного проекту як до бібліотеки, що встановлюється за своїми правилами. При цьому, чи бажаєте ви просто використовувати Bower для управління залежностями або писати свої власні бібліотеки, налаштування буде таке саме.

<code>$ bower init [?] name: gulp-bower-example [?] version : 0.0.1 [?] description: [?] main file: public/index.php [?] what types of modules does this package expose? [?] keywords: [?] authors: Davey Shafik <davey@engineyard.com> [?] license: Apache 2.0 [?] homepage: [?] set currently installed components as dependencies? Yes [?] add commonly ignored files to ignore list? Yes [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes { name: 'gulp-bower-example', version: '0.0.1', authors: [ 'Davey Shafik <davey@engineyard.com>' ], main: 'public/index.php', license: 'Apache 2.0', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } 
[?] Looks good? Yes

Щоб створити новий файл bower.json, доводиться пройти через безліч запитань. Деякі з них досить очевидні, в той час як інші можуть трохи заплутати. .

який типи modules does this package expose? (які типи модулів підтримує цей пакет?) — якщо ви не створюєте власні бібліотеки, можете пропустити цей пункт.

set currently installed components as dependencies? (задати вже встановлені компоненти як залежність?) — якщо ви встановили пакети вручну за допомогою bower install, то вони будуть додані як залежності у ваш новий bower.json.

add commonly ignored files to ignore List? (додати зазвичай ігноровані файли до списку?) — змушує ігнорувати типові файли та папки, такі як node_modules, bower_components або tests.

to the registry? (хотіли б ви помітити цей пакет як приватний, щоб запобігти його випадковій публікації в реєстрі?) — відповідь yes зупинить вас від випадкової публікації пакета в реєстрі Bower.

З цього моменту ви тепер можете легко встановити пакети, оновлюючи bower.json таким чином:

<code>$ bower install--save jquery bootstrap

Це дозволить встановити останні версії jQuery та Bootstrap в папку bower_components Якщо ви перевірите свій bower.json, він буде оновлений так:

<code>"dependencies": { "jquery": "~2.1.1", "bootstrap": "~ 3.1.1" }

Тепер, якщо ми хочемо встановити ці залежності для перевірки нових версій, можемо просто виконати:

<code>$bower install

Якщо папка webroot не є кореневою для вашого проекту (що вірогідніше так), ви можете легко змінити папку установки, створивши новий файл .bowerrc з таким вмістом:

<code>{ "directory": "public/bower_components" }

Після того, як ви зробили це, видаліть вихідну папку і встановіть заново:

<code>$rm-Rf bower_components $bower install

Ви можете посилатися на файли як /bower_components/<пакет>/dist/<файли>. Наприклад, щоб увімкнути Bootstrap, ви повинні додати наступні два рядки у відповідних місцях:

<code data-language="html"><link href="/bower_components/bootstrap /dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js">

Щоб тримати свої бібліотеки оновленими до сучасних, просто використовуйте bower update: p>

<code>$ bower update bootstrap

Беремо контроль

Bower дає нам повний контроль над встановленням та керуванням нашими бібліотеками та їх залежностями — таким чином легко відстежувати керування версіями та легко розповсюджувати бібліотеки всередині колективу за допомогою bower.json та bower install.

У наступному розділі буде розглянуто як ми можемо працювати з компонентами Bower при розробці та розгортанні проекту.