Wat is er zo goed aan Bower?

Hier volgt een gastbijdrage van Dan Sundy van Helios Design Labs. Dan legt uit hoe je Bower kunt gebruiken en bepleit het gebruik ervan, vanuit het perspectief van iemand die er in eerste instantie tegenop zag.

Toen ik voor het eerst met Bower begon te werken, snapte ik de aantrekkingskracht niet helemaal. “Serieus?” Dacht ik. “Is het nu te veel werk om een bestand te downloaden en uit te pakken?” Ik was ook niet super enthousiast over het proppen van een stel nieuwe commando’s in een brein dat al uitpuilde uit zijn voegen met Git, Grunt, Gulp, Jekyll, Node, enz.

Er zijn twee dingen die ik tegen die versie van een half jaar geleden van mezelf zou zeggen. Ten eerste, Bower kan een beetje meer doen dan een bestand of twee downloaden. Ten tweede, een uur spenderen aan het leren van een tool die een repetitieve taak elimineert is het waard.

First Things First: Wat is Bower?

Voor de niet-ingewijden, Bower is een package manager. Het is goed in, nou ja, het beheren van pakketten-alles waarvoor je afhankelijk bent van een externe auteur. Goede voorbeelden zijn CSS frameworks zoals Bootstrap, bibliotheken zoals jQuery, jQuery plugins, of JavaScript frameworks zoals Angular. De officiële Bower website, Bower.io, zegt het waarschijnlijk het beste:

Web sites zijn gemaakt van een heleboel dingen – frameworks, bibliotheken, activa, hulpprogramma’s, en regenbogen. Bower beheert al deze dingen voor je.

Bower werkt door pakketten van overal op te halen en te installeren, en zorgt voor het jagen, vinden, downloaden en opslaan van de dingen die je zoekt.

Vereisten

Er zijn een aantal dingen die je nodig hebt voordat je met Bower aan de slag kunt:

• De commandoregel. Yup, het is een command line tool (kom op het is niet zo eng).
• Node en NPM. Bower is een Node module dus om het te krijgen heb je NPM nodig.
• Git. Bower pakketten zijn Git repo’s. Bower gebruikt Git om te begrijpen waar het pakket is, welke versie het is, dat soort dingen.
• Globale installatie. Technisch gezien zou je het in elk project kunnen installeren, maar waarschijnlijk wil je het overal hebben.

Om Bower globaal te installeren:

$ npm install -g bower

Note: Afhankelijk van je setup moet je misschien `sudo npm install -g bower` gebruiken om het globaal te installeren.

The Basics

Om te beginnen, stel je de mappenstructuur voor een nieuwe site voor. De mijne ziet er meestal zo uit:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Er is een `src` map waar het grootste deel van het ontwikkelwerk wordt gedaan. Een Gulp bouwtaak zal uiteindelijk alles voorbereiden en onze geoptimaliseerde code compileren in een productieklare `dist` map.

Laten we zeggen dat je jQuery in dit project wilt opnemen. Normaal gesproken zou je naar jquery.com gaan, de juiste download link zoeken en aanklikken, dan uitpakken en de bestanden in de juiste directory zetten.

Met Bower voer je gewoon het volgende commando uit:

$ bower install jquery

Nu is er een `bower_components` directory met een `jquery` folder verschenen.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery heeft het makkelijk gemaakt om hun code te krijgen door een package voor Bower te maken en te registreren. De meeste populaire bibliotheken en frameworks hebben hetzelfde gedaan. Als je wilt controleren of de asset die je wilt een Bower package is, kun je een zoekopdracht uitvoeren:

$ bower search <package-name>

Als het niet geregistreerd is, is het nog steeds mogelijk om repo’s te pakken met git endpoints zoals deze:

$ bower install git://github.com/example-user/example-package.git

Geavanceerd: Als je het te gek wilt maken, kun je zelfs privé repo’s installeren waar je toegang tot hebt. Bekijk deze video tutorial door Rob Dodson.

Hier zijn enkele andere basis commando’s die je kunt gebruiken om geïnstalleerde assets te bekijken en te beheren.

Lijst van al uw pakketten:

$ bower list

Ontdek informatie over elk pakket dat u hebt geïnstalleerd:

$ bower info <package-name>

Controleer op updates met:

$ bower check-new

Dan, als er updates zijn, update een pakket:

$ bower update <package-name>

Maar misschien heeft het updaten naar de laatste versie iets kapot gemaakt.

Installeer een specifieke versie-oud of nieuw-mee:

$ bower install <package-name>#<version>

Dit is zeker geen uitputtende lijst. Als u geïnteresseerd bent om te beginnen, raad ik u aan om een testproject te maken en één van de vele tutorials die online te vinden zijn door te nemen. Deze van Treehouse is geweldig: Aan de slag met Bower. Daarna kun je je verdiepen in alle commando’s door Bower’s API te bekijken.

Hey, maar wacht, er is meer!

Het kleine ontwikkelteam waar ik mee werk, gebruikt Bower al een jaar of wat. Hoewel pakketbeheer via de opdrachtregel geweldig was, was ik niet verkocht totdat we de `bower.json` en `.bowerrc` bestanden begonnen te gebruiken.

.bowerrc

Het `.bowerrc` bestand kan een aantal dingen doen, maar ik heb het meestal gebruikt zien worden om de naam en locatie van de `bower_components` directory te veranderen. (Dit maakte me blij omdat ik er een hekel aan had om die willekeurige `bower_components` map in de project root te hebben).

Hier ziet een `.bowerrc` bestand er uit:

{ "directory": "src/components"}

De directory optie stuurt pakketten naar een locatie die het meest logisch is-in dit geval, de `src/` directory. Kijk eens naar de nieuwe project structuur:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Merk op dat de `bower_components/` map weg is en dat er een `components/` map in de `src/` directory staat.

Geavanceerd: Het is een goed idee om iets als gulp-usemin of grunt-usemin te gebruiken om te zorgen voor aaneenschakeling en minificatie voor alle extra stijlen en scripts.

Dus hoe kan het `bower.json` bestand ons helpen?

bower.json

Het `bower.json` bestand lijkt veel op Node’s `package.json`. Het is een manifest bestand dat je toelaat om opties op te geven. Laten we eens kijken naar een voorbeeld (dat kan worden gegenereerd door bower init uit te voeren):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Veel van deze opties zijn er voor het geval je deze repo registreert als een Bower package. Maar zie je het devDependencies object helemaal onderaan? Dat object wordt automatisch bijgewerkt als je --save-dev toevoegt aan een Bower commando, zoals dit:

$ bower install jquery --save-dev

Als nu een collega-ontwikkelaar `bower install` uitvoert, zal de computer alles uit de devDependencies lijst installeren in de map die is opgegeven in `.bowerrc`. Op dezelfde manier, als een ontwikkelaar een package toevoegt of een package versie update met --save-dev, kan het hele team hun assets synchroniseren met bower install (na het ophalen van de laatste versie van het `bower.json` bestand).

Omdat al het jagen en verzamelen is geëlimineerd met het `bower.json` bestand, is het niet langer nodig om een versie van deze assets te maken. De `components/` map kan worden toegevoegd aan het `.gitignore` bestand om je repository lean en mean te houden.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Parting Shot

Ik was aan het luisteren naar een aflevering van mijn favoriete web dev podcast (wink, wink) en de gastheren waren aan het chatten over de vraag of Bower eigenlijk wel nuttig is, of slechts een voorbijgaande rage. Ze vroegen zich af of het de bedoeling is om downloaden gemakkelijker te maken of dat het gebruikt wordt om versies van je bibliotheken te updaten, zoals ruby gems doen. Ze hadden het erover dat het een “front-endy NPM” is (ik parafraseer).

Het mooie is, het doet al die dingen. Je kunt het gebruiken voor het downloaden en up-to-date houden van code, maar je kunt ook verder gaan. Bower kan je helpen om projectbibliotheken en frameworks synchroon te houden, of het integreren met andere tools zoals Yeoman om nog meer tijd van je dev setup af te halen. Plus, je kunt je eigen Bower packages maken en registreren, zodat je ze snel (en veilig) in al je projecten kunt installeren en updaten.

Oh, en wat betreft de vraag die de discussie op gang bracht: Je zou Bower niet gebruiken om WordPress te installeren, en WordPress zou niet in je `bower_components` map moeten staan. Maar je zou Bower binnen je WordPress thema kunnen gebruiken om externe assets te beheren (laad alleen geen bibliotheken zoals jQuery die al in de WordPress core zitten).