För att bygga en webbplats använder vi ofta ett antal bibliotek, oavsett om det är i form av CSS eller JavaScript. Om jag skulle bygga en liten webbplats som ska visa ett bildspel, till exempel, skulle webbplatsen förmodligen behöva jQuery och ett jQuery-plugin, Flexslider. Dessa bibliotek är beroenden för att webbplatsen ska fungera.
Om det borde vara lätt att lägga till dessa bibliotek, men när det gäller en storskalig webbplats som kräver fler bibliotek kan allt bli besvärligt och ställa till det redan från början. Du kan behöva traska från ett arkiv till ett annat arkiv, ladda ner varje bibliotek, extrahera paketen och slutligen lägga dem i din projektkatalog.
När den nya versionen blir tillgänglig måste du göra allt detta igen (låter som mycket arbete, eller hur?).
Rekommenderad läsning: Om det låter som vad du har gjort i evigheter kan den här artikeln vara värd att läsa. Här kommer vi att visa dig ett praktiskt verktyg som heter Bower och som gör det enkelt att hantera webbplatsbibliotek. Låt oss kolla in det.
Kom igång
För att använda Bower måste du installera Node.js. Eftersom Bower är baserat på Node.js bör du kunna köra Bower på alla plattformar: Windows, Mac och Linux.
När du har installerat Node.js öppnar du Terminal (eller kommandotolken) och kör den här kommandoraden för att installera Bower.
npm install -g bower
Installation av bibliotek
Nu är vi redo att använda Bower. Låt oss börja med att söka efter ett bibliotek som vi vill lägga i vår projektkatalog. Om vi antar att du för närvarande befinner dig i katalogen kan du skriva bower search {name of the library}. Här sökte jag till exempel efter Normalize.css, ett bibliotek för att göra ett elements stil konsekvent i alla webbläsare.
bower search normalize
Kommandot kommer att lista en massa resultat; inte bara att det ger oss den ursprungliga Normalize, det visar oss också Normalize-versioner som har konverterats till LESS, Sass, Stylus och de andra plattformarna.
När vi väl har valt vilket som ska installeras, kan vi skriva bower install {{name of the repository}}. I det här exemplet kommer jag att installera Normalize LESS samt jQuery.
bower install normalize-less jquery
Detta kommando kommer att ladda ner den senaste versionen av normalize-less och jQuery och spara den i en ny mapp som heter bower_components; du bör nu hitta mappen som skapats i din projektkatalog.
Alternativt kan du köra kommandot följt av versionsnumret på det här sättet om du vill installera den äldre versionen av biblioteket.
bower install jquery#1.10.0
Nu när vi har biblioteken, Normalize och jQuery, i vår projektkatalog kan vi använda dem genom att referera till jQuery från mappen bower_components i HTML-dokumentet och importera Normalize LESS i det andra LESS-stilsbladet.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Om ett av biblioteken inte längre används på webbplatsen kan du enkelt avinstallera det med kommandot bower uninstall, så här.
bower uninstall normalize-less
Uppdatera Bower-komponenterna
Säg att du har arbetat med ditt projekt i flera månader och att vissa bibliotek som du använder (som jQuery) har släppt en ny version. I denna omständighet kan vi använda Bower för att uppdatera jQuery till den senaste versionen. Men först ska vi kontrollera om den nya versionen har registrerats i bower med kommandot bower list.
Den senaste versionen av jQuery är, som du kan se nedan, 2.1.1.
För att uppdatera jQuery kan vi skriva bower update jquery. När uppdateringen är klar kan du köra kommandot bower list igen för att kontrollera den aktuella installerade versionen. Nedan kan du se att vi nu har den senaste versionen av jQuery.
Avsluta
Bower är ett riktigt behändigt verktyg som jag tycker att du bör utnyttja i ditt projekt. Det är som att ha en AppStore, men för dina webbplatsgrejer – vi kan installera, uppdatera och ta bort bibliotek på ett bekvämt sätt.
I nästa artikel kommer vi att dyka ner i Bower och utforska några mer avancerade funktioner. Så håll utkik.
