Bij het bouwen van een website maken we vaak gebruik van een aantal bibliotheken, of die nu in de vorm van CSS of JavaScript zijn. Als ik bijvoorbeeld een kleine website zou bouwen die een diavoorstelling met afbeeldingen weergeeft, zou de website waarschijnlijk jQuery en een jQuery-plugin, Flexslider, nodig hebben. Deze bibliotheken zijn de afhankelijkheden voor de website om te functioneren.
Hoewel het toevoegen van deze bibliotheken een gemakkelijke taak zou moeten zijn, wanneer het gaat om een grootschalige website die meer bibliotheken vereist, zou alles omslachtig en vanaf het begin in de war kunnen zijn. Je moet misschien van de ene repository naar de andere slepen, elk van de bibliotheken downloaden, de pakketten uitpakken, en ze tenslotte in je projectdirectory zetten.
Wanneer de nieuwe versie beschikbaar komt, moet je dat allemaal opnieuw doen (klinkt als veel werk, toch?).
Aanbevolen lectuur: Animate.CSS – CSS3 Library To Create Animation Easily
Als dat klinkt als wat je al tijden doet, is dit artikel misschien de moeite waard om te lezen. Hier laten we je een handige tool zien, Bower genaamd, die het beheren van website bibliotheken een fluitje van een cent maakt.
Aan de slag
Om Bower te gebruiken, moet je Node.js installeren. Aangezien Bower is gebaseerd op Node.js, zou je Bower op elk platform moeten kunnen draaien: Windows, Mac, en Linux.
Als je Node.js hebt geïnstalleerd, open je Terminal (of Command Prompt) en voer je deze opdrachtregel uit om Bower te installeren.
npm install -g bower
Bibliotheken installeren
Nu zijn we klaar om Bower te gebruiken. Laten we beginnen met het zoeken naar een bibliotheek die we in onze project directory willen plaatsen. In de veronderstelling dat u zich momenteel in de directory bevindt, kunt u bower search {name of the library} typen. Hier heb ik bijvoorbeeld gezocht naar Normalize.css, een bibliotheek om de stijl van een element consistent te maken in alle browsers.
bower search normalize
Het commando geeft een lijst met resultaten; niet alleen geeft het ons de originele Normalize, het toont ons ook Normalize versies die zijn omgezet naar LESS, Sass, Stylus, en de andere platforms.
Als we eenmaal hebben gekozen welke we willen installeren, kunnen we bower install {{name of the repository}} typen. In dit voorbeeld zal ik normalize LESS en jQuery installeren.
bower install normalize-less jquery
Dit commando zal de laatste versie van normalize-less en jQuery downloaden, en opslaan in een nieuwe map met de naam bower_components; je zou de map nu aangemaakt in je project directory moeten vinden.
Alternatief, als je de oudere versie van de bibliotheek wilt installeren, kun je het commando gevolgd door het versienummer uitvoeren, op deze manier.
bower install jquery#1.10.0
Nu we de bibliotheken, Normalize en jQuery, in onze projectdirectory hebben staan, kunnen we ze gebruiken door in het HTML-document te verwijzen naar de jQuery uit de map bower_components en Normalize LESS te importeren in het andere LESS-stylesheet.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Als een van de bibliotheken niet meer in de website wordt gebruikt, kunt u de installatie ervan eenvoudig ongedaan maken met het bower uninstall commando, zoals dit.
bower uninstall normalize-less
De Bower Componenten bijwerken
Stel dat u al een paar maanden aan uw project werkt, en dat van sommige bibliotheken die u gebruikt (zoals jQuery) een nieuwe versie is uitgebracht. In deze situatie kunnen we Bower gebruiken om jQuery bij te werken naar de laatste versie. Maar laten we eerst controleren of de nieuwe versie is geregistreerd in bower met het bower list commando.
De laatste versie van jQuery, zoals je hieronder kunt zien, is 2.1.1.
Om jQuery bij te werken, kunnen we bower update jquery typen. Zodra de update is voltooid, kunt u bower list commando opnieuw uitvoeren om de huidige geïnstalleerde versie te controleren. Hieronder, zoals je kunt zien, hebben we nu de laatste versie van jQuery.
Wrap Up
Bower is een erg handige tool waarvan ik denk dat je die in je project zou moeten gebruiken. Het is alsof je een AppStore hebt, maar dan voor je website – we kunnen eenvoudig bibliotheken installeren, updaten en verwijderen.
In het volgende artikel duiken we in Bower en verkennen we wat meer geavanceerde functies. Dus blijf kijken.
