For at bygge et websted bruger vi ofte en række biblioteker, hvad enten det er i form af CSS eller JavaScript. Hvis jeg f.eks. ville bygge et lille websted, der skal vise et billeddiasshow, ville webstedet sandsynligvis have brug for jQuery og et jQuery-plugin, Flexslider. Disse biblioteker er de afhængigheder, der er nødvendige for, at webstedet kan fungere.
Mens tilføjelsen af disse biblioteker burde være en nem opgave, kan det hele blive besværligt og rodet sammen fra starten, når det drejer sig om et stort websted, der kræver flere biblioteker. Du skal måske trawle fra et repository til et andet repository, downloade hvert enkelt bibliotek, udpakke pakkerne og til sidst lægge dem i din projektmappe.
Når den nye version bliver tilgængelig, skal du gøre alt dette igen (lyder som en masse arbejde, ikke?).
Anbefalet læsning: Animate.CSS – CSS3 Library To Create Animation Easily
Hvis det lyder som det, du har gjort i evigheder, er denne artikel måske værd at læse. Her vil vi vise dig et praktisk værktøj kaldet Bower, der gør det nemt at administrere biblioteker til hjemmesider. Lad os tjekke det ud.
Gå i gang
For at bruge Bower skal du installere Node.js. Da Bower er baseret på Node.js, bør du kunne køre Bower på alle platforme: Når du har installeret Node.js, skal du åbne Terminal (eller kommandoprompt) og køre denne kommandolinje for at installere Bower.
npm install -g bower
Installation af biblioteker
Nu er vi klar til at bruge Bower. Lad os starte med at søge et bibliotek, som vi ønsker at lægge i vores projektmappe. Hvis vi antager, at du i øjeblikket er inde i mappen, kan du skrive bower search {name of the library}. Her søgte jeg f.eks. efter Normalize.css, et bibliotek til at gøre et elements stil konsistent i alle browsere.
bower search normalize
Kommandoen vil liste en masse resultater; ikke nok med at den giver os den originale Normalize, den viser os også Normalize-versioner, der er blevet konverteret til LESS, Sass, Stylus og de andre platforme.
Når vi har valgt, hvilken en vi vil installere, kan vi skrive bower install {{name of the repository}}. I dette eksempel vil jeg installere Normalize LESS samt jQuery.
bower install normalize-less jquery
Denne kommando vil downloade den nyeste version af normalize-less og jQuery og gemme den i en ny mappe med navnet bower_components; du bør nu finde den oprettede mappe i din projektmappe.
Alternativt, hvis du vil installere den ældre version af biblioteket, kan du køre kommandoen efterfulgt af versionsnummeret, på denne måde.
bower install jquery#1.10.0
Nu, hvor vi har bibliotekerne, Normalize og jQuery, i vores projektmappe, kan vi bruge dem ved at henvise til jQuery fra mappen bower_components i HTML-dokumentet og importere Normalize LESS i det andet LESS-stilsark.
i HTML
<script src="bower_components/jquery/jquery.min.js"></script>
i LESS
@import "bower_components/normalize-less/normalize.less";
Hvis et af bibliotekerne ikke længere bruges på webstedet, kan du nemt afinstallere det med bower uninstall-kommandoen, som her.
bower uninstall normalize-less
Opdatering af Bower-komponenterne
Lad os sige, at du har arbejdet på dit projekt i flere måneder, og nogle biblioteker, som du bruger (f.eks. jQuery), har udgivet en ny version. I denne omstændighed kan vi bruge Bower til at opdatere jQuery til den nyeste version. Men lad os først tjekke, om den nye version er blevet registreret i bower med kommandoen bower list.
Den nyeste version af jQuery er, som du kan se nedenfor, 2.1.1.
For at opdatere jQuery kan vi skrive bower update jquery. Når opdateringen er afsluttet, kan du køre kommandoen bower list igen for at bekræfte den aktuelle installerede version. Nedenfor kan du se, at vi nu har den nyeste version af jQuery.
Wrap Up
Bower er et virkelig praktisk værktøj, som jeg synes, du bør udnytte i dit projekt. Det er som at have en AppStore, men til dine webside-ting – vi kan installere, opdatere og fjerne biblioteker bekvemt.
I den næste artikel vil vi dykke ned i Bower og udforske nogle mere avancerede funktioner. Så stay tuned.
