Hvad er så godt ved Bower?

Det følgende er et gæsteindlæg af Dan Sundy fra Helios Design Labs. Dan vil både forklare, hvordan man bruger Bower, og argumentere for at gøre det, fra en persons perspektiv, der i starten var modstander af ideen.

Da jeg først begyndte at arbejde med Bower, forstod jeg ikke helt appellen. “Seriøst?” Jeg tænkte. “Er det nu for meget arbejde at downloade og udpakke en fil?” Jeg var heller ikke super begejstret for at proppe en masse nye kommandoer ind i en hjerne, der allerede var bulet i sømmene med Git, Grunt, Gulp, Jekyll, Node osv.

Der er to ting, jeg ville fortælle den version af mig selv for et halvt år siden. For det første, Bower kan gøre lidt mere end at hente en fil eller to. For det andet er det værd at bruge en time på at lære et værktøj, der vil fjerne en gentagende opgave.

Først og fremmest: Hvad pokker er Bower?

For de uindviede er Bower en pakkehåndtering. Den er god til, ja, at administrere pakker – alt det, som du er afhængig af en ekstern forfatter til. Gode eksempler er CSS-frameworks som Bootstrap, biblioteker som jQuery, jQuery-plugins eller JavaScript-frameworks som Angular. Det officielle Bower-websted, Bower.io, siger det nok bedst:

Websites består af mange ting – frameworks, biblioteker, aktiver, værktøjer og regnbuer. Bower administrerer alle disse ting for dig.

Bower fungerer ved at hente og installere pakker fra alle mulige steder og tager sig af at jage, finde, downloade og gemme de ting, du leder efter.

Forudsætninger

Der er nogle ting, du skal bruge, før du kan begynde at arbejde med Bower:

• Kommandolinjen. Jep, det er et kommandolinjeværktøj (det er da ikke så skræmmende).
• Node og NPM. Bower er et Node-modul, så for at få det skal du bruge NPM.
• Git. Bower-pakker er Git-repos. Bower bruger Git til at forstå, hvor pakken er, hvilken version den er på – den slags ting.
• Global installation. Teknisk set kan du installere det i hvert projekt, men du vil sandsynligvis have det overalt.

Sådan installerer du Bower globalt:

$ npm install -g bower

Note: Afhængigt af din opsætning skal du muligvis bruge `sudo npm install -g bower` for at installere det globalt.

Det grundlæggende

For at starte skal du danne dig et billede af mappestrukturen for et nyt websted. Mine ser normalt nogenlunde sådan ud:

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

Der er en `src`-mappe, hvor hovedparten af udviklingsarbejdet foregår. En Gulp build-opgave vil til sidst forberede alt og kompilere vores optimerede kode til en produktionsklar `dist`-mappe.

Lad os sige, at du vil inkludere jQuery i dette projekt. Normalt vil du gå til jquery.com, finde og klikke på det korrekte download-link og derefter udpakke og lægge filerne i den rigtige mappe.

Med Bower skal du blot køre følgende kommando:

$ bower install jquery

Nu er der dukket en mappe `bower_components` op med en mappe `jquery`.

|-.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 har gjort det nemt at få fat i deres kode ved at oprette og registrere en pakke til Bower. De fleste populære biblioteker og frameworks har gjort det samme. Hvis du vil kontrollere, at det aktiv, du vil have, er en Bower-pakke, kan du foretage en søgning:

$ bower search <package-name>

Hvis det ikke er registreret, er det stadig muligt at få fat i repos med git-endpoints som her:

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

Advanced: Hvis du vil være smart, kan du endda installere private repos, som du har adgang til. Se denne videovejledning af Rob Dodson.

Her er nogle andre grundlæggende kommandoer, som du kan bruge til at se og administrere aktiver, som du har installeret.

Liste over alle dine pakker:

$ bower list

Hent oplysninger om enhver pakke, du har installeret:

$ bower info <package-name>

Tjek efter opdateringer med:

$ bower check-new

Derpå, hvis der er opdateringer, opdater en pakke:

$ bower update <package-name>

Men måske har opdateringen til den nyeste version ødelagt noget.

Installer en bestemt version – gammel eller ny – med:

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

Dette er bestemt ikke en udtømmende liste. Hvis du er interesseret i at komme i gang, anbefaler jeg, at du laver et testprojekt og arbejder dig igennem en af de mange tutorials, der kan findes online. Denne af Treehouse er fantastisk: Getting Started with Bower. Derefter kan du grave dig ned i alle kommandoerne ved at tjekke Bowers API.

Hey, But Wait, There’s More!

Det lille udviklerteam, jeg arbejder med, har brugt Bower i det sidste års tid eller deromkring. Selvom pakkehåndtering via kommandolinjen var fantastisk, var jeg ikke solgt, før vi begyndte at bruge filerne `bower.json` og `.bowerrc`.

.bowerrc

Filen `.bowerrc` kan gøre en række ting, men jeg har mest set den bruges til at ændre navnet på og placeringen af mappen `bower_components`. (Det gjorde mig glad, fordi jeg hadede at have den tilfældige `bower_components`-mappe flydende rundt i projektroden).

Sådan kan en `.bowerrc`-fil se ud:

{ "directory": "src/components"}

Optionen directory sender pakker til en placering, der giver mest mening – i dette tilfælde `src/`-mappen. Tag et kig på den nye projektstruktur:

|-.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

Bemærk, at mappen `bower_components/` er væk, og at der er en `components/`-mappe i mappen `src/`.

Advanced: Det er en god idé at bruge noget som gulp-usemin eller grunt-usemin til at tage sig af sammenkædning og minificering for alle de ekstra stilarter og scripts.

Så hvordan kan filen `bower.json` hjælpe os?

bower.json

Den `bower.json`-fil ligner meget Node’s `package.json`. Det er en manifestfil, der giver dig mulighed for at angive indstillinger. Lad os se på et eksempel (som kan genereres ved at køre bower init):

{ "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" }}

En masse af disse indstillinger er der i tilfælde af, at du registrerer dette repo som en Bower-pakke. Men kan du se devDependencies-objektet helt nede i bunden? Dette objekt vil automatisk blive opdateret, hvis du tilføjer --save-dev til en Bower-kommando, som her:

$ bower install jquery --save-dev

Nu, hvis en medkoordinator kører `bower install`, vil computeren installere alt fra devDependencies-listen i den mappe, der er angivet i `.bowerrc`. På samme måde, hvis en udvikler tilføjer en pakke eller opdaterer en pakkeversion ved hjælp af --save-dev, kan hele holdet synkronisere deres aktiver ved hjælp af bower install (efter at have hentet den seneste version af filen `bower.json`).

Da alt jagt- og indsamlingsarbejdet er blevet elimineret med filen `bower.json`, er der ikke længere behov for at versionere nogen af disse aktiver. Mappen `components/` kan føjes til filen `.gitignore` for at holde dit repository slankt og effektivt.

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

Parting Shot

Jeg lyttede til et afsnit af min yndlings-podcast om webudvikling (wink, wink), og værterne snakkede om, hvorvidt Bower faktisk var nyttigt eller blot en forbigående modefænomen. De spekulerede på, om dens pointe er at gøre downloading lettere, eller om den bruges til at opdatere versioner af dine biblioteker, ligesom ruby gems gør. De talte om, at det er en “front-endy NPM” (jeg omskriver).

Det smukke er, at det gør alle disse ting. Du kan bruge det til at downloade og holde kode opdateret, men du kan tage det videre. Bower kan hjælpe dig med at holde projektbiblioteker og frameworks synkroniseret, eller integrere det med andre værktøjer som Yeoman for at skære endnu mere tid af din udviklingsopsætning. Desuden kan du oprette og registrere dine egne Bower-pakker, så du hurtigt (og sikkert) kan installere og opdatere dem i alle dine projekter.

Oh, og med hensyn til det spørgsmål, der fik diskussionen i gang: Du ville ikke bruge Bower til at installere WordPress, og WordPress bør ikke ligge i din `bower_components`-mappe. Men du kan bruge Bower i dit WordPress-tema til at administrere eksterne aktiver (lad blot være med at indlæse biblioteker som jQuery, der allerede er inkluderet i WordPress-kernen).