Guide för nybörjare: Kom igång med pakethanteraren Bower

Bower är en pakethanterare i front-end som byggts av Twitter. Även känd som en pakethanterare för webben, används bower i moderna projekt med öppen källkod och sluten källkod för att lösa många återkommande problem.

Denna artikel kommer att guida dig genom grundläggande användning av bower och avancerad användning för en teammiljö. Jag kommer också att dela med mig av mitt personliga arbetsflöde när jag hanterar bower med ett team av utvecklare.

Problem som bower löser

Att utveckla en webbplats eller en webbapplikation kräver numera användning av många ramverk för front-end, såsom Bootstrap, jQuery, Angular etc.

Hämtning av vart och ett av dessa paket kräver att man navigerar på motsvarande webbplats, hittar lämplig version, laddar ner den, packar ut den och flyttar till slut huvudfilerna till säljarmappen. (t.ex.: main-filen i jquery-paketet är jquery.js)
När du har hämtat filerna i ditt arkiv måste du manuellt besöka alla ovanstående webbplatser (jquery.com, angularjs.com, bootstrap.com) för att kontrollera om det finns uppdateringar och gissa vad? Om det finns en uppdatering måste du upprepa steg 1 för varje paket/uppdatering.
Låt oss anta att vi ska använda Bootstrap som kräver jQuery (så kallat beroende). När du går till getbootstrap.com för att ladda ner det måste du sedan navigera till jquery.com för att ladda ner jquery också.

I sammanfattning hjälper bower dig att hantera dina front-end-paket. Det hjälper dig att ladda ner dem, uppdatera dem och lösa deras beroenden.

Det finns andra fördelar med att använda bower som vi kommer att diskutera senare i den här artikeln, men det här är de viktigaste problemen som bower löser för oss!

Installation och användning

Installation av bower

Bower är en nodmodul och kan installeras med följande kommando:

npm install -g bower

Detta kommer att installera bower globalt på ditt system.

Om du inte har node installerat på din dator måste du ladda ner den från nodejs.org.

Installera paket

För den här handledningen använder vi bower för att installera bootstrap. Processen fungerar för alla andra paket.

bower install bootstrap

Detta kommer att installera bootstrap i den nyligen skapade /bower_components-mappen (på rotnivå).

Bemärk att detta kommer att installera bootstrap 3.2.x som är den senaste versionen när den här artikeln skrivs. Om vi vill installera den senaste versionen i 2.x måste vi köra:

bower install bootstrap#2

Vi kan också ange den exakta versionen med

bower install bootstrap#2.2

Och notera att eftersom bootstrap är beroende av jQuery kommer körning av något av de tidigare kommandona automatiskt att installera jQuery också, för att lösa bootstraps beroenden.

Uppdatering av paket

Om vi vill uppdatera alla våra paket behöver vi bara köra följande kommando:

bower update

Inkludera skript

Det sista steget skulle vara att inkludera de nedladdade stilarna och skripten. Eftersom de alla finns i mappen /bower_components måste vi skriva följande:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Gemensamt arbetsflöde i en teammiljö

Efter att ha använt bower på ovanstående minimalistiska sätt inser vi att det introducerar nya problem när man arbetar med källhantering och/eller i en teammiljö.

Bower laddar inte bara ner huvuddistributionsfilerna, utan laddar också ner hela repositoriet för jquery, bootstrap, etc. Detta kan blockera din revisionskontrollhistorik och rekommenderas absolut inte.
Alltså huvuddistributionsfiler (dist/jquery.js, dist/css/bootstrap.css) är inte minifierade, och bower kommer aldrig att minifiera distributionsfiler eftersom det är en pakethanterare, inte ett byggverktyg.
Du måste manuellt se till att ladda jquery innan du laddar bootstrap (eftersom bootstrap har jquery som ett beroende).
Du måste manuellt lägga till en ny <script>-tagg för varje nytt paket (och kanske en ny <link rel=”stylesheet”/> om det innehåller css-filer.

Steg 1: Installera bower

och se till att varje person i ditt team installerar det globalt också.

Steg 2: Exkludera bower_components från revisionskontroll

Lägg till bower_components till din .gitignore. Detta kommer att instruera Git att ignorera alla bower_components-filer. På så sätt kommer varje utvecklare (i ett team) att ha en lokal kopia av de nödvändiga front-end-biblioteken. Oroa dig inte för att varje utvecklare har en annan version. Vi fixar det om några minuter.

Steg 3: Installera de nödvändiga paketen

Installera de nödvändiga front-end-paketen, låt oss säga jQuery och bootstrap.

bower install jquery#1 bootstrap --save

Flaggan --save kommer att instruera bower att skapa (om den inte finns) en bower.json-fil och inkludera de installerade paketen i den. Detta är ett exempel på den genererade bower.json-filen:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

Märk hur det finns en versionsbegränsning ~3.2.0. Detta säkerställer att alla teammedlemmar arbetar med samma version av bootstrap, tilde betyder att orsaken ska ligga ganska nära den angivna orsaken.

Steg 4: Teammedlemmarna kan nu köra: bower install

När en utvecklare som har tillgång till arkivet kör bower install installeras alla beroenden (bootstrap och jquery i det här fallet).

För de återstående stegen behöver vi Grunt eller Gulp.

Steg 5: Integrera med byggverktyg

Grunt och Gulp är byggverktyg som används för att automatisera vanliga och återkommande uppgifter, t.ex. förminskande av skript, optimering av bilder, förminskande av formatmallar, kompilering av less/sass/stylus. Bower fungerar bra tillsammans med Grunt/Gulp på grund av färdiga plugins. I den här handledningen kommer jag att täcka Grunt, men du kommer att hitta ett liknande alternativ för Gulp.

Grunt har en insticksmodul som heter grunt-bower-concat som kompilerar alla huvudfiler för varje bower-komponent du har till en bower.js fil. Som du sedan kan använda Grunt för att minifiera (uglify), vilket resulterar i bower.min.js.

Grunt bower concat exempelkonfiguration:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Notera: om du använder Gulp finns ett liknande plugin på: https://github.com/ck86/main-bower-files/

Anmärkning: För Ruby on Rails och andra, se följande länk: http://bower.io/docs/tools/

Steg 6: Inkludera skript

Med följande skript inkluderar du dina skript en gång och när du lägger till ett nytt front-end-paket kommer det automatiskt att sammanfogas i motsvarande fil (bower.css eller bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Steg 7: Mer bower-automatisering

Du kan ytterligare automatisera bower. Låt oss säga att du arbetar i ett team och lägger till en ny bower-komponent (bower install typeahead.js). Du vill inte skicka e-post till alla och tala om för dem att de ska köra bower install. Vi kan automatisera det med grunt-watch och grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Vad som händer här är att när du redigerar filen bower.json kör grunt automatiskt kommandot bower install. När du lägger in dina ändringar och din kollega drar din kod kommer grunt-watch att upptäcka en ändring i bower.json som då automatiskt kör kommandot bower install.

Hur jag anpassar bower i mitt eget arbetsflöde

När det kommer till pakethanterare så använder jag många av dem i mitt arbetsflöde. Jag använder npm för att hantera grunt och dess plugins. Composer för att hantera mina PHP-leverantörsbibliotek, bower för att hantera mina front-end-paket och slutligen ruby gems för att hantera Capistrano (ett paket som används för att automatisera distributioner).

Jag bestämde mig för att jag vill att npm ska vara mainpakethanteraren. Så jag började linda in alla huvudkommandon i min package.jsons skriptsektion. Till exempel:

npm run migrate: migrerar databasen och genererar migrationsfiler (PHP-specifikt)
npm test: kör enhetstester
npm run protractor: kör end-2-end-tester
npm run deploy-staging:
npm run deploy-production: distribuerar kod till produktionsmaskiner
npm start: kör npm install (före start), bower update (efter installation) och slutligen grunt

Här är vad som händer bakom kulisserna. Tänk på följande package.json-fil:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Om du tittar på avsnittet om skript ser du att prestart: vi kör npm install. Eftersom package.json ingår i vårt arkiv måste vi, om någon lägger till ett nytt devDependency, enkelt kunna installera samma version om någon lägger till ett nytt devDependency. (Observera att pre start är det första kommandot som utlöses när du kör npm start).

post install (som utlöses av npm install), kör följande kommando: bower update --unsafe-perm (--unsafe-perm lades bara till eftersom bower-update misslyckades på en Mac). Detta kommer att hålla alla våra front-end-paket uppdaterade.

start:och slutligen körs kommandot start grunt.

Med den här inställningen, närhelst någon utvecklare från ditt team vill börja arbeta med projektet, navigerar han helt enkelt till projektkatalogen och kör npm start för att börja arbeta direkt.

Att använda det här tillvägagångssättet är mycket effektivt eftersom du kan inkludera andra skript som ska köras från npm, som npm run migrate, npm run deploy-staging osv.

Med det här tillvägagångssättet uppmuntrar vi inte bara till kommandoradsanvändning och automatisering, utan vi gör det faktiskt enhetligt.

Du kan se att vi har bundit npm install med bower update. Du kan ta detta ett steg längre och binda alla dina andra pakethanterare med npm install. I ett sådant fall skulle körning av npm install köra alla följande kommandon:

bower update
composer update --no-dev
gem update
gem update

Wrapping it up

Bower är ett fantastiskt verktyg som löser grundläggande problem med moderna webbapplikationer. Alla uppmuntras att använda det (och till och med den nya Visual Studio levereras numera med Bower och Grunt/Gulp).

Det kan enkelt ställas in när du utvecklar ensam, men om du arbetar i ett team måste du följa de steg som presenteras i den här artikeln för att säkerställa ett smidigt arbetsflöde mellan alla utvecklare i teamet.

Arquidia Mantina