A weboldal építéséhez általában számos könyvtárra támaszkodunk, legyen az CSS vagy JavaScript formájában. Ha például egy kis weboldalt építenék, amely egy képi diavetítést jelenítene meg, a weboldalnak valószínűleg szüksége lenne jQuery-re és egy jQuery pluginra, a Flexsliderre. Ezek a könyvtárak a weboldal működéséhez szükséges függőségek.
Míg ezeknek a könyvtáraknak a hozzáadása egyszerű feladatnak kellene lennie, ha egy nagyszabású weboldalról van szó, amely több könyvtárat igényel, minden nehézkes és eleve kusza lehet. Előfordulhat, hogy egyik tárolóhelyről a másikra kell vándorolnia, letöltenie az egyes könyvtárakat, kicsomagolnia a csomagokat, és végül a projekt könyvtárába helyeznie őket.
Amikor az új verzió elérhetővé válik, mindezt újra meg kell tennie (sok munkának hangzik, igaz?).
Elolvasásra ajánlott: Animate.CSS – CSS3 Library To Create Animation Easily
Ha ez úgy hangzik, mint amit már régóta csinálsz, akkor ezt a cikket érdemes elolvasnod. Itt bemutatunk egy praktikus eszközt, a Bower-t, amellyel a weboldalak könyvtárainak kezelése gyerekjáték. Nézzük meg.
Kezdés
A Bower használatához telepítened kell a Node.js-t. Mivel a Bower a Node.js-re épül, a Bower-t minden platformon futtathatod: Windows, Mac és Linux.
Amint telepítettük a Node.js-t, nyissuk meg a Terminált (vagy a parancssort), és futtassuk ezt a parancssort a Bower telepítéséhez.
npm install -g bower
Könyvtárak telepítése
Most készen állunk a Bower használatára. Kezdjük azzal, hogy keresünk egy könyvtárat, amit a projektkönyvtárunkba akarunk tenni. Feltételezve, hogy jelenleg a könyvtáron belül vagyunk, beírhatjuk a bower search {name of the library} billentyűt. Itt például a Normalize.css-t kerestem, egy olyan könyvtárat, amely egy elem stílusát konzisztenssé teszi minden böngészőben.
bower search normalize
A parancs egy csomó találatot fog felsorolni; nem csak az eredeti Normalize-t adja meg, hanem a Normalize LESS, Sass, Stylus és a többi platformra konvertált változatait is.
Ha kiválasztottuk, melyiket szeretnénk telepíteni, beírhatjuk a bower install {{name of the repository}} parancsot. Ebben a példában a Normalize LESS-t, valamint a jQuery-t fogom telepíteni.
bower install normalize-less jquery
Ez a parancs letölti a normalize-less és a jQuery legújabb verzióját, és egy új, bower_components nevű mappába menti; a létrehozott mappát most már a projektkönyvtárunkban kell megtalálnunk.
Alternatívaként, ha a könyvtár régebbi verzióját szeretnénk telepíteni, akkor a parancsot a verziószámmal követve futtathatjuk, így.
bower install jquery#1.10.0
Most, hogy a könyvtárak, a Normalize és a jQuery a projektkönyvtárunkban vannak, használhatjuk őket úgy, hogy a HTML dokumentumban hivatkozunk a jQuery-re a bower_components mappából, a Normalize LESS-t pedig importáljuk a másik LESS stíluslapban.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Ha valamelyik könyvtárat már nem használjuk a weboldalon, akkor a bower uninstall paranccsal egyszerűen eltávolíthatjuk, így.
bower uninstall normalize-less
A Bower komponensek frissítése
Tegyük fel, hogy már több hónapja dolgozol a projekteden, és néhány általad használt könyvtár (például a jQuery) új verziót adott ki. Ilyen körülmények között a Bower segítségével frissíthetjük a jQuery-t a legújabb verzióra. De előbb nézzük meg, hogy az új verzió regisztrálva van-e a bowerben a bower list paranccsal.
A jQuery legújabb verziója, ahogy alább láthatjuk, a 2.1.1.
A jQuery frissítéséhez beírhatjuk a bower update jquery parancsot. A frissítés befejezése után újra futtathatjuk a bower list parancsot, hogy ellenőrizzük az aktuálisan telepített verziót. Az alábbiakban láthatjuk, hogy most már a jQuery legújabb verziójával rendelkezünk.
Wrap Up
A Bower egy igazán praktikus eszköz, amit szerintem érdemes kihasználni a projektünkben. Olyan, mintha lenne egy AppStore-unk, de a weboldalunk dolgaihoz – könyvtárakat telepíthetünk, frissíthetünk és távolíthatunk el kényelmesen.
A következő cikkben elmerülünk a Bowerben és felfedezünk néhány fejlettebb funkciót. Maradjanak velünk.
