Vad är så bra med Bower?

Detta är ett gästinlägg av Dan Sundy från Helios Design Labs. Dan kommer både att förklara hur man använder Bower och argumentera för att göra det, ur perspektivet av någon som till en början motsatte sig idén.

När jag först började arbeta med Bower förstod jag inte riktigt vad som lockade. ”Seriöst?” Jag tänkte. ”Nu är det för mycket arbete att ladda ner och packa upp en fil?” Jag var inte heller särskilt entusiastisk över att klämma in en massa nya kommandon i en hjärna som redan var full av Git, Grunt, Gulp, Jekyll, Node osv.

Det finns två saker som jag skulle säga till den där versionen av mig själv för ett halvt år sedan. För det första kan Bower göra lite mer än att ladda ner en fil eller två. För det andra är det värt att spendera en timme på att lära sig ett verktyg som eliminerar en repetitiv uppgift.

Först och främst:

För den oinvigde är Bower en pakethanterare. Den är bra på att, ja, hantera paket – allt som du är beroende av en extern författare för. Bra exempel är CSS-ramverk som Bootstrap, bibliotek som jQuery, jQuery-plugins eller JavaScript-ramverk som Angular. Den officiella Bower-webbplatsen, Bower.io, säger det nog bäst:

Webbsidor består av många saker – ramverk, bibliotek, tillgångar, verktyg och regnbågar. Bower hanterar alla dessa saker åt dig.

Bower fungerar genom att hämta och installera paket från alla håll, och tar hand om att jaga, hitta, ladda ner och spara det du letar efter.

Förutsättningar

Det finns några saker som du behöver innan du kan börja arbeta med Bower:

• Kommandoraden. Japp, det är ett kommandoradsverktyg (det är inte så skrämmande).
• Node och NPM. Bower är en Node-modul så för att få den behöver du NPM.
• Git. Bower-paket är Git-repos. Bower använder Git för att förstå var paketet finns, vilken version det är på – den sortens saker.
• Global installation. Tekniskt sett kan du installera det i varje projekt, men du vill förmodligen ha det överallt.

För att installera Bower globalt:

$ npm install -g bower

Notera: Beroende på din installation kan du behöva använda `sudo npm install -g bower` för att installera det globalt.

Grunderna

För att börja, bildar du katalogstrukturen för en ny webbplats. Min brukar se ut ungefär så här:

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

Det finns en `src`-mapp där huvuddelen av utvecklingsarbetet görs. En Gulp-bygguppgift kommer så småningom att förbereda allt och kompilera vår optimerade kod till en produktionsfärdig `dist`-mapp.

Vad sägs om att du vill inkludera jQuery i det här projektet. Vanligtvis skulle du gå till jquery.com, hitta och klicka på rätt nedladdningslänk, sedan packa upp och lägga filerna i rätt katalog.

Med Bower kör du bara följande kommando:

$ bower install jquery

Nu har en `bower_components`-katalog med en `jquery`-mapp dykt upp.

|-.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 enkelt att få tag på deras kod genom att skapa och registrera ett paket för Bower. De flesta populära bibliotek och ramverk har gjort detsamma. Om du vill kontrollera att den tillgång du vill ha är ett Bower-paket kan du göra en sökning:

$ bower search <package-name>

Om det inte är registrerat är det fortfarande möjligt att hämta repos med git-endpoints som här:

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

Advanced: Om du vill bli lite mer avancerad kan du till och med installera privata repos som du har tillgång till. Kolla in den här videohandledningen av Rob Dodson.

Här är några andra grundläggande kommandon som du kan använda för att visa och hantera tillgångar som du har installerat.

Lista alla dina paket:

$ bower list

Få information om alla paket som du har installerat:

$ bower info <package-name>

Kontrollera om det finns uppdateringar med:

$ bower check-new

Om det finns uppdateringar uppdaterar du sedan ett paket:

$ bower update <package-name>

Men kanske har uppdateringen till den senaste versionen förstört något.

Installera någon specifik version-gammal eller ny-med:

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

Detta är definitivt inte en uttömmande lista. Om du är intresserad av att komma igång rekommenderar jag att du gör ett testprojekt och arbetar igenom en av de många handledningar som finns på nätet. Den här från Treehouse är utmärkt: Getting Started with Bower. Sedan kan du gräva i alla kommandon genom att kolla in Bowers API.

Hey, But Wait, There’s More!

Det lilla utvecklingsteamet jag arbetar med har använt Bower under det senaste året eller så. Även om pakethantering via kommandoraden var bra, var jag inte såld förrän vi började använda filerna `bower.json` och `.bowerrc`.

.bowerrc

Filen `.bowerrc` kan göra ett antal saker, men jag har mest sett att den används för att ändra namnet på och platsen för katalogen `bower_components`. (Detta gjorde mig glad eftersom jag hatade att ha den där slumpmässiga mappen `bower_components` som flöt runt i projektroten).

Här är hur en `.bowerrc`-fil kan se ut:

{ "directory": "src/components"}

Optionsalternativet directory skickar paket till den plats som är mest meningsfull – i det här fallet, katalogen `src/`. Ta en titt på den nya projektstrukturen:

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

Märk att mappen `bower_components/` är borta och att det finns en `components/`-mapp i `src/`-katalogen.

Advanced: Det är en bra idé att använda något som gulp-usemin eller grunt-usemin för att ta hand om concatenation och minification för alla extra stilar och skript.

Hur kan filen `bower.json` hjälpa oss?

bower.json

Filen `bower.json` liknar mycket Node-filen `package.json`. Det är en manifestfil där du kan ange alternativ. Låt oss ta en titt på ett exempel (som kan genereras genom att köra 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 hel del av de här alternativen finns där om du registrerar den här repo:n som ett Bower-paket. Men ser du devDependencies-objektet längst ner? Det objektet uppdateras automatiskt om du bifogar --save-dev till ett Bower-kommando, så här:

$ bower install jquery --save-dev

Nu om en annan kodare kör `bower install` kommer datorn att installera allt från devDependencies-listan i den mapp som anges i `.bowerrc`. På samma sätt, om en utvecklare lägger till ett paket eller uppdaterar en paketversion med hjälp av --save-dev, kan hela teamet synkronisera sina tillgångar med hjälp av bower install (efter att ha hämtat den senaste versionen av filen `bower.json`).

Då allt jakt- och insamlingsarbete har eliminerats med filen `bower.json` finns det inte längre något behov av att versionera någon av dessa tillgångar. Mappen `components/` kan läggas till i filen `.gitignore` för att hålla ditt repository smidigt.

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

Parting Shot

Jag lyssnade på ett avsnitt av min favoritpodcast om webbutveckling (wink, wink) och värdarna pratade om huruvida Bower faktiskt var användbart eller bara en tillfällig modefluga. De undrade om dess poäng är att göra nedladdning enklare eller om den används för att uppdatera versioner av dina bibliotek, som ruby gems gör. De talade om att det är en ”front-endy NPM” (jag parafraserar).

Det fina är att den gör alla dessa saker. Du kan använda den för att ladda ner och hålla koden uppdaterad, men du kan ta det längre. Bower kan hjälpa dig att hålla projektbibliotek och ramverk synkroniserade, eller integrera det med andra verktyg som Yeoman för att trimma bort ännu mer tid från din utvecklingskonfiguration. Dessutom kan du skapa och registrera egna Bower-paket så att du snabbt (och säkert) kan installera och uppdatera dem i alla dina projekt.

Oh, och angående frågan som fick igång diskussionen: Du skulle inte använda Bower för att installera WordPress, och WordPress bör inte finnas i din mapp `bower_components`. Men du kan använda Bower i ditt WordPress-tema för att hantera externa tillgångar (ladda bara inte bibliotek som jQuery som redan ingår i WordPress-kärnan).