Websivuston rakentamisessa turvaudumme yleisesti useisiin kirjastoihin, olipa kyse sitten CSS:stä tai JavaScriptistä. Jos rakentaisin esimerkiksi pienen verkkosivuston, joka näyttää kuvien diaesityksen, sivusto tarvitsisi todennäköisesti jQuerya ja jQuery-lisäosaa, Flexslideriä. Nämä kirjastot ovat riippuvuuksia, jotta verkkosivusto toimisi.
Vaikka näiden kirjastojen lisäämisen pitäisi olla helppo tehtävä, kun kyseessä on laajamittainen verkkosivusto, joka vaatii useampia kirjastoja, kaikki voi olla hankalaa ja sekaisin alusta alkaen. Saatat joutua kiertämään arkistosta toiseen, lataamaan jokaisen kirjaston, purkamaan paketit ja lopulta laittamaan ne projektin hakemistoon.
Kun uusi versio tulee saataville, joudut tekemään kaiken tämän uudestaan (kuulostaa paljolta työltä, eikö?).
Suositeltavaa lukemista: Animate.CSS – CSS3-kirjasto animaatioiden luomiseen helposti
Jos tämä kuulostaa siltä, mitä olet tehnyt iät ja ajat, tämä artikkeli saattaa olla lukemisen arvoinen. Tässä näytämme sinulle kätevän työkalun nimeltä Bower, joka tekee verkkosivukirjastojen hallinnoinnista helppoa. Tutustutaanpa siihen.
Aloittaminen
Käyttääksesi Boweria sinun on asennettava Node.js. Koska Bower perustuu Node.js:ään, sinun pitäisi pystyä käyttämään Boweria kaikilla alustoilla: Windows, Mac ja Linux.
Kun olet asentanut Node.js:n, avaa Terminal (tai komentorivi) ja suorita tämä komentorivi Bowerin asentamiseksi.
npm install -g bower
Kirjastojen asentaminen
Nyt olemme valmiita käyttämään Boweria. Aloitetaan etsimällä kirjasto, jonka haluamme laittaa projektimme hakemistoon. Olettaen, että olet tällä hetkellä hakemiston sisällä, voit kirjoittaa bower search {name of the library}. Tässä esimerkiksi etsin Normalize.css:ää, kirjastoa, joka tekee elementin tyylistä yhdenmukaisen kaikissa selaimissa.
bower search normalize
Komento listaa joukon tuloksia; sen lisäksi, että se antaa meille alkuperäisen Normalize-kirjaston, se näyttää myös Normalize-versiot, jotka on muunnettu LESS:iin, Sass:iin, Sass:iin, Stylus:iin ja muuhun alustaan.
Kun olemme valinneet asentamamme kirjaston, voimme antaa bower install {{name of the repository}}. Tässä esimerkissä asennan Normalize LESSin sekä jQueryn.
bower install normalize-less jquery
Tämä komento lataa uusimman version normalize-lessistä ja jQuerysta ja tallentaa sen uuteen kansioon nimeltä bower_components; sinun pitäisi nyt löytää luotu kansio projektihakemistostasi.
Vaihtoehtoisesti, jos haluat asentaa kirjaston vanhemman version, voit suorittaa komennon ja sen perässä versionumeron näin.
bower install jquery#1.10.0
Nyt kun meillä on kirjastot, Normalize ja jQuery, projektihakemistossamme, voimme käyttää niitä viittaamalla jQueryyn bower_components-kansiosta HTML-dokumentissa ja tuomalla Normalize LESS:n toisessa LESS-tyylitaulussa.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Jos jotakin kirjastoa ei enää käytetä verkkosivulla, voit poistaa sen helposti bower uninstall-komennolla bower uninstall, esimerkiksi näin.
bower uninstall normalize-less
Bower-komponenttien päivittäminen
Esitettäkö, että olet työskennellyt projektisi parissa useita kuukausia, ja jotkut käyttämäsi kirjastot (kuten jQuery) ovat julkaisseet uuden version. Tässä tilanteessa voimme käyttää Boweria jQueryn päivittämiseen uusimpaan versioon. Tarkistetaan kuitenkin ensin, onko uusi versio rekisteröity boweriin bower list-komennolla.
JQueryn uusin versio on, kuten alla näkyy, 2.1.1.
JQueryn päivittämiseksi voimme kirjoittaa bower update jquery. Kun päivitys on valmis, voit suorittaa bower list-komennon uudelleen tarkistaaksesi nykyisen asennetun version. Alla näet, että meillä on nyt jQueryn uusin versio.
Wrap Up
Bower on todella kätevä työkalu, jota kannattaa mielestäni hyödyntää projektissasi. Se on kuin AppStore, mutta verkkosivujuttujasi varten – voimme asentaa, päivittää ja poistaa kirjastoja kätevästi.
Seuraavassa artikkelissa sukellamme Boweriin ja tutkimme joitakin kehittyneempiä ominaisuuksia. Pysy siis kuulolla.
