Guide for begyndere: Kom godt i gang med Bower Package Manager

Bower er en front-end pakkehåndtering, der er udviklet af Twitter. Bower er også kendt som en pakkehåndtering for internettet og bruges i moderne open source- og closed source-projekter til at løse mange tilbagevendende problemer.

Denne artikel vil guide dig gennem grundlæggende brug af bower og avanceret brug for et teammiljø. Jeg vil også dele min personlige arbejdsgang, når jeg har med bower at gøre med et team af udviklere.

Problemer, som bower løser

Udvikling af et websted eller en webapplikation kræver i dag brug af mange front-end frameworks, såsom Bootstrap, jQuery, Angular osv.

Download af hver af disse pakker kræver, at man navigerer på det tilsvarende websted, finder den relevante version, downloader den, udpakker den, udpakker den og til sidst flytter hovedfilerne til mappen med leverandører. (f.eks.: main-filen i i jquery-pakken er jquery.js)
Når du har hentet filerne i dit arkiv, skal du manuelt besøge alle de ovennævnte websteder (jquery.com, angularjs.com, bootstrap.com) for at tjekke efter opdateringer, og gæt hvad? Hvis der er en opdatering, skal du gentage trin 1 for hver pakke/opdatering.
Lad os antage, at vi skal bruge Bootstrap, som kræver jQuery (kaldet afhængighed). Når du går til getbootstrap.com for at downloade det, skal du derefter navigere til jquery.com for også at downloade jquery.

Sammenfattende hjælper bower dig med at administrere dine front-end-pakker. Det hjælper dig med at hente dem, opdatere dem og løse deres afhængigheder.

Der er andre fordele ved at bruge bower, som vi vil diskutere senere i denne artikel, men dette er de vigtigste problemer, som bower løser for os!

Installation og brug

Installation af bower

Bower er et node-modul, og det kan installeres med følgende kommando:

npm install -g bower

Dette vil installere bower globalt på dit system.

Hvis du ikke har node installeret på din computer, skal du downloade det fra nodejs.org.

Installation af pakker

Med henblik på denne vejledning bruger vi bower til at installere bootstrap. Processen vil fungere for enhver anden pakke.

bower install bootstrap

Dette vil installere bootstrap i den nyoprettede /bower_components-mappe (på rodniveau).

Bemærk, at dette vil installere bootstrap 3.2.x, som er den seneste version på det tidspunkt, hvor denne artikel skrives. Hvis vi ønsker at installere den nyeste version i 2.x, skal vi køre:

bower install bootstrap#2

Vi kan også angive den nøjagtige version med

bower install bootstrap#2.2

Og bemærk også, at fordi bootstrap afhænger af jQuery, vil kørsel af en af de foregående kommandoer automatisk også installere jQuery for at løse bootstraps afhængigheder.

Opdatering af pakker

Hvis vi ønsker at opdatere alle vores pakker, skal vi blot køre følgende kommando:

bower update

Inkluderer scripts

Det sidste trin vil være at inkludere de downloadede stilarter og scripts. Da de alle befinder sig i mappen /bower_components, skal vi skrive følgende:

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

Fælles arbejdsgang i et teammiljø

Efter at have brugt bower på ovenstående minimalistiske måde, indser vi, at det introducerer nye problemer, når vi arbejder med kildekontrol og/eller i et teammiljø.

Bower downloader ikke kun hoveddistributionsfiler, men downloader også hele repositoryet af jquery, bootstrap osv. Dette kan opblæse din revisionskontrolhistorik og kan slet ikke anbefales.
Også hoveddistributionsfiler (dist/jquery.js, dist/css/bootstrap.css) er ikke minificeret, og bower vil aldrig minificere distributionsfiler, fordi det er en pakkehåndtering, ikke et byggeværktøj.
Du skal manuelt sørge for at indlæse jquery før du indlæser bootstrap (fordi bootstrap har jquery som afhængighed).
Du skal manuelt tilføje et nyt <script>-tag for hver ny pakke (og måske et nyt <link rel=”stylesheet”/>, hvis den indeholder css-filer.

Trin 1: Installer bower

og sørg for, at alle personer i dit team også installerer det globalt.

Trin 2: Udeluk bower_components fra revisionskontrol

Tilføj bower_components til din .gitignore. Dette vil instruere Git om at ignorere alle bower_components-filen. På den måde vil hver udvikler (i et team) have en lokal kopi af de nødvendige front-end-biblioteker. Du skal ikke bekymre dig om, at hver udvikler har en anden version. Det løser vi om lidt.

Trin 3: Installer de nødvendige pakker

Installer de nødvendige front-end-pakker, lad os sige jQuery og bootstrap.

bower install jquery#1 bootstrap --save

Flaget --save vil instruere bower om at oprette (hvis det ikke findes) en bower.json-fil og inkludere de installerede pakker i den. Dette er et eksempel på den genererede bower.json-fil:

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

bemærk, hvordan der er en versionsbegrænsning ~3.2.0. Dette sikrer, at alle teammedlemmer arbejder på den samme version af bootstrap, tilde betyder, at grunden skal ligge rimeligt tæt på den angivne grund.

Trin 4: Teammedlemmer kan nu køre: bower install

Når en udvikler, der har adgang til repositoriet, kører bower install, installerer den alle afhængighederne (bootstrap og jquery i dette tilfælde).

For de resterende trin har vi brug for Grunt eller Gulp.

Trin 5: Integrer med build-værktøjer

Grunt og Gulp er build-værktøjer, der bruges til at automatisere almindelige og tilbagevendende opgaver, f.eks. minifying scripts, optimering af billeder, minifying stylesheets, kompilering af less/sass/stylus. Bower spiller godt sammen med Grunt/Gulp på grund af færdiglavede plugins. I denne tutorial vil jeg dække Grunt, men du vil finde et lignende alternativ til Gulp.

Grunt har et plugin kaldet grunt-bower-concat, som kompilerer alle hovedfilerne for hver bower-komponent, du har, i en bower.js fil. Som du så kan bruge Grunt til at minificere (uglify), hvilket resulterer i bower.min.js.

Grunt bower concat prøvekonfiguration:

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

Note: Hvis du bruger Gulp, findes der et lignende plugin på:

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

https://github.com/ck86/main-bower-files/

Note: For Ruby on Rails og andre kan du se følgende link: http://bower.io/docs/tools/

Trin 6: Inkluder scripts

Med følgende scripts inkluderer du dine scripts én gang, og hver gang du tilføjer en ny front-end-pakke, vil den automatisk blive sammenkædet i den tilsvarende 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>

Trin 7: Mere bower-automatisering

Du kan yderligere automatisere bower. Lad os sige, at du arbejder i et team, og du tilføjer en ny bower-komponent (bower install typeahead.js). Du ønsker ikke at sende en e-mail til alle for at fortælle dem, at de skal køre bower install. Vi kan automatisere det med grunt-watch og grunt-exec:

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

Det, der sker her, er, at når du redigerer bower.json-filen, kører grunt automatisk kommandoen bower install. Når du committer dine ændringer, og din kollega trækker din kode, vil grunt-watch registrere en ændring i bower.json, som derefter automatisk vil køre kommandoen bower install.

Sådan tilpasser jeg bower i min egen arbejdsgang

Når det kommer til pakkehåndtering, bruger jeg mange af dem i min arbejdsgang. Jeg bruger npm til at administrere grunt og dets plugins. Composer til at administrere mine PHP-leverandørbiblioteker, bower til at administrere mine front-end-pakker og endelig ruby gems til at administrere Capistrano (en pakke, der bruges til at automatisere implementeringer).

Jeg besluttede mig for, at jeg vil have npm som main pakkehåndtering. Så jeg begyndte at indpakke alle hovedkommandoer inde i min package.jsons scriptsektion. For eksempel:

npm run migrate: migrerer databasen og genererer migreringsfiler (PHP-specifik)
npm test: kører enhedstests
npm run protractor: kører end-2-end-tests
npm run deploy-staging: udruller kode til staging-maskiner
npm run deploy-production: udruller kode til produktionsmaskiner
npm start: kører npm install (før start), bower update (efter installation) og til sidst grunt

Her er, hvad der sker bag kulisserne. Overvej følgende 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" }}

Hvis du kigger på afsnittet scripts, vil du se, at prestart: vi kører npm install. Fordi package.json er inkluderet i vores repository, skal vi, hvis nogen tilføjer en ny devDependency, nemt kunne installere den samme version, hvis nogen tilføjer en ny devDependency. (Bemærk, at pre start er den første kommando, der udløses, når du kører npm start).

post install (som udløses af npm install), kører følgende kommando: bower update --unsafe-perm (--unsafe-perm blev kun tilføjet, fordi bower-update mislykkedes på en Mac). Dette vil holde alle vores front-end-pakker opdateret.

start:og til sidst kører kommandoen start grunt.

Med denne opsætning, når en udvikler fra dit team ønsker at begynde at arbejde på projektet, navigerer han blot til projektmappen og kører npm start for at begynde at arbejde med det samme.

Det er meget effektivt at bruge denne tilgang, fordi du kan inkludere andre scripts til at køre fra npm, som npm run migrate, npm run deploy-staging osv.

Med denne tilgang opmuntrer vi ikke kun til Command Line Usage og automatisering, vi gør det faktisk ensartet.

Du kan se, at vi har bundet npm install med bower update. Du kan tage dette et skridt videre og binde alle dine andre pakkeadministratorer med npm install. I så fald vil kørsel af npm install køre alle følgende kommandoer:

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

Wrapping it up

Bower er et fantastisk værktøj, der løser grundlæggende problemer med moderne webapplikationer. Alle opfordres til at bruge det (og selv det nye Visual Studio leveres med Bower og Grunt/Gulp nu om dage).

Det kan nemt sættes op, når du udvikler alene, men hvis du arbejder i et team, skal du følge de trin, der er præsenteret i denne artikel, for at sikre en smidig arbejdsgang mellem alle udviklere i teamet.

Arquidia Mantina