Ghid pentru începători: Getting Started with Bower Package Manager

Bower este un manager de pachete front-end construit de Twitter. Cunoscut și sub numele de Manager de pachete pentru Web, bower este folosit în proiecte moderne open source și closed source pentru a rezolva multe probleme recurente.

Acest articol vă va ghida prin utilizarea de bază a bower și utilizarea avansată pentru un mediu de echipă. Voi împărtăși, de asemenea, fluxul meu personal de lucru atunci când mă ocup de bower cu o echipă de dezvoltatori.

Probleme pe care bower le rezolvă

Dezvoltarea unui site web sau a unei aplicații web în zilele noastre necesită utilizarea mai multor framework-uri front-end, cum ar fi Bootstrap, jQuery, Angular, etc.

Descărcarea fiecăruia dintre aceste pachete necesită navigarea pe site-ul web corespunzător, găsirea versiunii adecvate, descărcarea, dezarhivarea și, în cele din urmă, mutarea fișierelor principale în dosarul furnizorului. (de exemplu: fișierul main din pachetul jquery este jquery.js)
După ce ați descărcat fișierele în depozitul dumneavoastră, trebuie să vizitați manual toate site-urile web de mai sus (jquery.com, angularjs.com, bootstrap.com) pentru a verifica dacă există actualizări și ghiciți ce? Dacă există o actualizare, trebuie să repetați pasul 1 pentru fiecare pachet/actualizare.
Să presupunem că vom folosi Bootstrap care necesită jQuery (numit dependență). Când mergeți la getbootstrap.com pentru a-l descărca, va trebui apoi să navigați la jquery.com pentru a descărca și jquery.

În rezumat, bower vă ajută să vă gestionați pachetele front-end. Vă ajută să le descărcați, să le actualizați și să le rezolvați dependențele.

Există și alte beneficii ale utilizării bower pe care le vom discuta mai târziu în acest articol, dar acestea sunt principalele probleme pe care bower le rezolvă pentru noi!

Instalare și utilizare

Instalarea bower

Bower este un modul node, și poate fi instalat cu următoarea comandă:

npm install -g bower

Aceasta va instala bower la nivel global pe sistemul dumneavoastră.

Dacă nu aveți node instalat pe calculator, trebuie să îl descărcați de pe nodejs.org.

Instalarea pachetelor

De dragul acestui tutorial, vom folosi bower pentru a instala bootstrap. Procesul va funcționa pentru orice alt pachet.

bower install bootstrap

Aceasta va instala bootstrap în folderul nou creat /bower_components (la nivelul rădăcinii).

Rețineți că acest lucru va instala bootstrap 3.2.x, care este cea mai recentă versiune la momentul scrierii acestui articol. Dacă dorim să instalăm cea mai recentă versiune în 2.x, trebuie să executăm:

bower install bootstrap#2

de asemenea, putem specifica versiunea exactă cu

bower install bootstrap#2.2

De asemenea, rețineți că, deoarece bootstrap depinde de jQuery, rularea oricăreia dintre comenzile anterioare va instala automat și jQuery, pentru a rezolva dependențele lui bootstrap.

Actualizarea pachetelor

Dacă dorim să actualizăm toate pachetele noastre, trebuie doar să executăm următoarea comandă:

bower update

Includerea scripturilor

Ultimul pas ar fi să includem stilurile și scripturile descărcate. Deoarece toate acestea se află în interiorul folderului /bower_components, va trebui să scriem următoarea comandă:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Flux de lucru comun într-un mediu de echipă

După ce am folosit bower în modul minimalist de mai sus, ne dăm seama că acesta introduce noi probleme atunci când lucrăm cu controlul sursei și/sau într-un mediu de echipă.

Bower nu doar descarcă fișierele principale de distribuție, dar descarcă și întregul depozit de jquery, bootstrap, etc. Acest lucru vă poate umfla istoricul de control al revizuirilor și este total nerecomandat.
De asemenea, fișierele principale de distribuție (dist/jquery.js, dist/css/bootstrap.css) nu sunt minificate, iar bower nu va minifica niciodată fișierele de distribuție deoarece este un manager de pachete, nu un instrument de construire.
Trebuie să vă asigurați manual că încărcați jquery înainte de a încărca bootstrap (deoarece bootstrap are jquery ca dependență).
Trebuie să adăugați manual un nou tag <script> pentru fiecare pachet nou (și poate un nou <link rel=”stylesheet”/> dacă acesta conține fișiere css.

Pasul 1: Instalați bower

și asigurați-vă că fiecare persoană din echipa dvs. îl instalează și ea la nivel global.

Pasul 2: Excludeți bower_components din controlul reviziei

Adaugați bower_components la .gitignore. Acest lucru va instrui Git să ignore tot fișierul bower_components. În acest fel, fiecare dezvoltator (într-o echipă) va avea o copie locală a bibliotecilor front-end necesare. Nu vă faceți griji că fiecare dezvoltator are o versiune diferită. Vom rezolva asta în câteva rânduri.

Pasul 3: Instalați pachetele necesare

Instalați pachetele front-end necesare, să spunem jQuery și bootstrap.

bower install jquery#1 bootstrap --save

Semnalizatorul --save va instrui bower să creeze (dacă nu există) un fișier bower.json și să includă în el pachetele instalate. Acesta este un exemplu de fișier bower.json generat:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

notați cum există o constrângere de versiune ~3.2.0. Acest lucru va asigura că toți membrii echipei vor lucra pe aceeași versiune de bootstrap, tilda înseamnă că motivul ar trebui să fie rezonabil de apropiat de motivul specificat.

Pasul 4: Membrii echipei pot rula acum: bower install

Când orice dezvoltator care are acces la depozit rulează bower install, acesta instalează toate dependențele (bootstrap și jquery în acest caz).

Pentru pașii rămași, avem nevoie de Grunt sau Gulp.

Pasul 5: Integrarea cu instrumentele de construire

Grunt și Gulp sunt instrumente de construire, folosite pentru a automatiza sarcini comune și recurente, cum ar fi minificarea scripturilor, optimizarea imaginilor, minificarea foilor de stil, compilarea less/sass/stylus. Bower joacă bine cu Grunt/Gulp datorită pluginurilor gata făcute. În acest tutorial mă voi referi la Grunt, însă veți găsi o alternativă similară pentru Gulp.

Grunt are un plugin numit grunt-bower-concat care compilează toate fișierele principale pentru fiecare componentă bower pe care o aveți într-un fișier bower.js. Pe care îl puteți folosi apoi Grunt pentru a minifica (uglify), rezultând bower.min.js.

Grunt bower concat sample configuration:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Nota: dacă folosiți Gulp, există un plugin similar la: https://github.com/ck86/main-bower-files/

Nota: Pentru Ruby on Rails și altele, verificați următorul link: http://bower.io/docs/tools/

Pasul 6: Includeți scripturile

Cu următoarele scripturi, includeți scripturile dvs. o singură dată și ori de câte ori adăugați un nou pachet front-end, acesta va fi concatenat automat în fișierul corespunzător (bower.css sau bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Pasul 7: Mai multă automatizare bower

Puteți automatiza în continuare bower. Să spunem că lucrați într-o echipă și adăugați o nouă componentă bower (bower install typeahead.js). Nu doriți să trimiteți un e-mail tuturor spunându-le să ruleze bower install. O putem automatiza cu grunt-watch și grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Ce se întâmplă aici, este că ori de câte ori editați fișierul bower.json, grunt execută automat comanda bower install. Când vă confirmați modificările, iar colegul dvs. vă extrage codul, grunt-watch va detecta o modificare în bower.json, care va rula automat comanda bower install.

Cum personalizez bower în propriul meu flux de lucru

Când vine vorba de managerii de pachete, folosesc multe dintre ele în fluxul meu de lucru. Folosesc npm pentru a gestiona grunt și plugin-urile sale. Composer pentru a-mi gestiona bibliotecile furnizorului PHP, bower pentru a-mi gestiona pachetele front-end și, în cele din urmă, ruby gems pentru a gestiona Capistrano (un pachet care este folosit pentru a automatiza implementările).

Am decis că vreau ca npm să fie managerul de pachete main. Așa că am început să înfășor toate comenzile principale în interiorul secțiunii de script a package.json mele. De exemplu:

npm run migrate: migrează baza de date și generează fișiere de migrare (specifice PHP)
npm test: rulează teste unitare
npm run protractor: rulează teste end-2-end
npm run deploy-staging: implementează codul pe mașinile de staging
npm run deploy-production: implementează codul pe mașinile de producție
npm start: rulează npm install (pre-start), bower update (post-instalare) și în final grunt

Iată ce se întâmplă în spatele scenei. Luați în considerare următorul fișier package.json:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Dacă vă uitați la secțiunea de scripturi, veți vedea că prestart: rulăm npm install. Deoarece package.json este inclus în depozitul nostru, dacă cineva adaugă o nouă devDependency, trebuie să putem instala cu ușurință aceeași versiune. (Rețineți că pre start este prima comandă declanșată atunci când executați npm start).

post install (care este declanșată de npm install), execută următoarea comandă: bower update --unsafe-perm (--unsafe-perm a fost adăugat doar pentru că bower-update eșua pe un Mac). Acest lucru va menține toate pachetele noastre front-end la zi.

start:și, în cele din urmă, comanda start rulează grunt.

Cu această configurație, ori de câte ori orice dezvoltator din echipa dvs. dorește să înceapă să lucreze la proiect, pur și simplu navighează în directorul proiectului și rulează npm start pentru a începe să lucreze imediat.

Utilizarea acestei abordări este foarte eficientă deoarece puteți include și alte scripturi care să fie rulate de la npm, cum ar fi npm run migrate, npm run deploy-staging, etc.

Utilizând această abordare, nu numai că încurajăm utilizarea liniei de comandă și automatizarea, ci o uniformizăm.

Vezi că am legat npm install cu bower update. Puteți face un pas mai departe și să legați toți ceilalți manageri de pachete cu npm install. În acest caz, rularea npm install ar rula toate comenzile următoare:

bower update
composer update --no-dev
gem update

Încheiere

Bower este un instrument uimitor care rezolvă probleme fundamentale ale aplicațiilor web moderne. Toți oamenii sunt încurajați să îl folosească (și chiar și noul Visual Studio este livrat cu Bower și Grunt/Gulp în zilele noastre).

Poate fi configurat cu ușurință atunci când dezvoltați solo, totuși, dacă lucrați într-o echipă, trebuie să urmați pașii prezentați în acest articol pentru a asigura un flux de lucru fără probleme între toți dezvoltatorii din echipă.

Arquidia Mantina