Pentru a construi un site web, ne bazăm în mod obișnuit pe o serie de biblioteci, fie că sunt sub formă de CSS sau JavaScript. Dacă aș construi un mic site web care va afișa un slideshow de imagini, de exemplu, site-ul web ar avea probabil nevoie de jQuery și de un plugin jQuery, Flexslider. Aceste biblioteci sunt dependențele pentru ca site-ul web să funcționeze.
În timp ce adăugarea acestor biblioteci ar trebui să fie o sarcină ușoară, atunci când vine vorba de un site web la scară mare, care necesită mai multe biblioteci, totul ar putea fi greoi și încurcat de la început. S-ar putea să trebuiască să umblați de la un depozit la altul, descărcând fiecare dintre biblioteci, extrăgând pachetele și, în cele din urmă, punându-le în directorul proiectului dumneavoastră.
Când noua versiune va fi disponibilă, va trebui să faceți din nou toate acestea (sună ca o mulțime de muncă, nu-i așa?).
Lectură recomandată: Animate.CSS – Biblioteca CSS3 pentru a crea animații cu ușurință
Dacă asta sună ca ceea ce faceți de mult timp, acest articol ar putea merita citit. Aici vă vom arăta o unealtă la îndemână numită Bower care face ca gestionarea bibliotecilor de site-uri web să fie floare la ureche. Să-l verificăm.
Pentru a începe
Pentru a utiliza Bower, trebuie să instalați Node.js. Deoarece Bower se bazează pe Node.js, ar trebui să puteți rula Bower pe orice platformă: Windows, Mac și Linux.
După ce ați instalat Node.js, deschideți Terminal (sau Command Prompt) și rulați această linie de comandă pentru a instala Bower.
npm install -g bower
Instalarea bibliotecilor
Acum suntem gata să folosim Bower. Să începem prin a căuta o bibliotecă pe care dorim să o punem în directorul proiectului nostru. Presupunând că vă aflați în prezent în interiorul directorului, puteți tasta bower search {name of the library}. Aici, de exemplu, am căutat Normalize.css, o bibliotecă pentru a face ca stilul unui element să fie consecvent în toate browserele.
bower search normalize
Comanda va lista o grămadă de rezultate; nu numai că ne oferă Normalize original, ci ne arată și versiunile Normalize care au fost convertite în LESS, Sass, Stylus și celelalte platforme.
După ce am ales pe care să o instalăm, putem tasta bower install {{name of the repository}}. În acest exemplu, voi instala Normalize LESS, precum și jQuery.
bower install normalize-less jquery
Această comandă va descărca cea mai recentă versiune de normalize-less și jQuery, și o va salva într-un nou folder numit bower_components; ar trebui să găsiți acum folderul creat în directorul proiectului dumneavoastră.
Alternativ, dacă doriți să instalați versiunea mai veche a bibliotecii, puteți rula comanda urmată de numărul versiunii, în acest fel.
bower install jquery#1.10.0
Acum că avem bibliotecile, Normalize și jQuery, în directorul proiectului nostru, putem să le folosim făcând referire la jQuery din folderul bower_components în documentul HTML și să importăm Normalize LESS în cealaltă foaie de stil LESS.
în HTML
<script src="bower_components/jquery/jquery.min.js"></script>
<script src="bower_components/jquery/jquery.min.js"></script>
în LESS
@import "bower_components/normalize-less/normalize.less";
Dacă una dintre biblioteci nu mai este utilizată în site-ul web, o puteți dezinstala cu ușurință cu comanda bower uninstall, astfel.
bower uninstall normalize-less
Actualizarea componentelor Bower
Să spunem că lucrați la proiectul dumneavoastră de câteva luni, iar unele biblioteci pe care le folosiți (cum ar fi jQuery) au lansat o nouă versiune. În această circumstanță, putem folosi Bower pentru a actualiza jQuery la cea mai recentă versiune. Dar mai întâi să verificăm dacă noua versiune a fost înregistrată în bower cu comanda bower list.
Cea mai recentă versiune de jQuery, după cum puteți vedea mai jos, este 2.1.1.
Pentru a actualiza jQuery, putem tasta bower update jquery. După ce actualizarea a fost finalizată, puteți rula din nou comanda bower list pentru a verifica versiunea curentă instalată. Mai jos, după cum puteți vedea, avem acum cea mai recentă versiune de jQuery.
Încheiere
Bower este un instrument foarte util pe care cred că ar trebui să îl folosiți în proiectul dumneavoastră. Este ca și cum ai avea un AppStore, dar pentru lucrurile de pe site-ul tău – putem instala, actualiza și elimina biblioteci în mod convenabil.
În următorul articol ne vom scufunda în Bower și vom explora câteva caracteristici mai avansate. Așa că rămâneți pe recepție.
