Beginnershandleiding: Aan de slag met Bower Package Manager

Bower is een front-end pakketbeheerder gebouwd door Twitter. Ook bekend als een pakketbeheerder voor het web, wordt bower gebruikt in moderne open source- en closed source-projecten om veel terugkerende problemen op te lossen.

Dit artikel zal je door het basisgebruik van bower leiden en door geavanceerd gebruik voor een teamomgeving. Ik zal ook mijn persoonlijke workflow delen bij het omgaan met bower met een team van ontwikkelaars.

Problemen die bower oplost

Het ontwikkelen van een website of webapplicatie vereist tegenwoordig het gebruik van veel front-end frameworks, zoals Bootstrap, jQuery, Angular, enz.

1. Het downloaden van elk van deze pakketten vereist het navigeren naar de bijbehorende website, het vinden van de juiste versie, het downloaden, uitpakken en ten slotte het verplaatsen van de mainfiles naar de vendor map. (b.v.: het main bestand in het jquery pakket is jquery.js)
2. Nadat je de bestanden hebt gedownload in je repository, moet je handmatig alle bovenstaande websites bezoeken (jquery.com, angularjs.com, bootstrap.com) om te controleren op updates en raad eens? Als er een update is, moet je stap 1 herhalen voor elk pakket/update.
3. Laten we aannemen dat we Bootstrap gaan gebruiken die jQuery vereist (dependency genoemd). Wanneer u naar getbootstrap.com gaat om het te downloaden, moet u vervolgens naar jquery.com navigeren om jquery ook te downloaden.

In samenvatting, bower helpt u uw front-end pakketten te beheren. Het helpt je ze te downloaden, bij te werken en hun afhankelijkheden op te lossen.

Er zijn nog andere voordelen van het gebruik van bower die we later in dit artikel zullen bespreken, maar dit zijn de belangrijkste problemen die bower voor ons oplost!

Installatie en gebruik

Bower installeren

Bower is een node module, en kan geïnstalleerd worden met het volgende commando:

npm install -g bower

Dit installeert bower globaal op uw systeem.

Als u node niet op uw computer hebt geïnstalleerd, moet u het downloaden van nodejs.org.

Pakketten installeren

In het belang van deze tutorial gebruiken we bower om bootstrap te installeren. Het proces zal werken voor elk ander pakket.

bower install bootstrap

Dit zal bootstrap installeren in de nieuw aangemaakte /bower_components map (op root niveau).

Merk op dat dit bootstrap 3.2.x gaat installeren, wat de laatste versie is op het moment van schrijven van dit artikel. Als we de laatste versie in 2.x willen installeren, moeten we het volgende uitvoeren:

bower install bootstrap#2

we kunnen ook de exacte versie opgeven met

bower install bootstrap#2.2

Ook moeten we opmerken dat omdat bootstrap afhankelijk is van jQuery, het uitvoeren van een van de vorige commando’s automatisch ook jQuery zal installeren, om zo de afhankelijkheden van bootstrap op te lossen.

Pakketten bijwerken

Als we al onze pakketten willen bijwerken, hoeven we alleen maar het volgende commando uit te voeren:

bower update

Inclusief scripts

De laatste stap zou zijn om de gedownloade stijlen en scripts op te nemen. Omdat ze allemaal in de /bower_components map staan, moeten we het volgende schrijven:

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

Gemeenschappelijke workflow in een team omgeving

Nadat we bower op de bovenstaande minimalistische manier hebben gebruikt, realiseren we ons dat het nieuwe problemen introduceert wanneer je met source control en/of in een team omgeving werkt.

1. Bower download niet alleen de belangrijkste distributie bestanden, maar het download ook de hele repository van jquery, bootstrap, etc. Dit kan je revisiebeheer geschiedenis opblazen en is totaal niet aan te raden.
2. Ook de belangrijkste distributie bestanden (dist/jquery.js, dist/css/bootstrap.css) zijn niet geminificeerd, en bower zal nooit distributie bestanden minifiëren omdat het een package manager is, geen build tool.
3. Je moet er handmatig voor zorgen dat je jquery laadt voordat je bootstrap laadt (omdat bootstrap jquery als een dependency heeft).
4. Je moet handmatig een nieuwe <script> tag toevoegen voor elk nieuw pakket (en misschien een nieuwe <link rel=”stylesheet”/> als het css bestanden bevat.

Stap 1: Installeer bower

en zorg ervoor dat iedereen in je team het ook wereldwijd installeert.

Stap 2: Sluit bower_components uit van revisiebeheer

Voeg bower_components toe aan je .gitignore. Dit zal Git instrueren om al het bower_components bestand te negeren. Op die manier zal iedere ontwikkelaar (in een team) een lokale kopie hebben van de benodigde front-end bibliotheken. Maak je geen zorgen dat elke ontwikkelaar een andere versie heeft. Dat lossen we zo op.

Stap 3: Installeer de benodigde pakketten

Installeer de benodigde front-end pakketten, laten we zeggen jQuery en bootstrap.

bower install jquery#1 bootstrap --save

De --save vlag zal bower instrueren om (als het nog niet bestaat) een bower.json bestand aan te maken en de geïnstalleerde pakketten daarin op te nemen. Dit is een voorbeeld van het gegenereerde bower.json bestand:

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

merk op dat er een versiebeperking ~3.2.0 is. Dit zorgt ervoor dat alle teamleden op dezelfde versie van bootstrap werken, tilde betekent dat de reden redelijk dicht bij de opgegeven reden moet liggen.

Stap 4: Teamleden kunnen nu uitvoeren: bower install

Wanneer een ontwikkelaar die toegang heeft tot de repository bower install uitvoert, installeert het alle afhankelijkheden (bootstrap en jquery in dit geval).

Voor de resterende stappen hebben we Grunt of Gulp nodig.

Stap 5: Integreer met Build tools

Grunt en Gulp zijn build tools, die gebruikt worden om veel voorkomende taken te automatiseren, zoals het minifiëren van scripts, het optimaliseren van afbeeldingen, het minifiëren van stylesheets, het compileren van less/sass/stylus. Bower werkt goed samen met Grunt/Gulp vanwege de kant-en-klare plugins. In deze tutorial ga ik Grunt behandelen, maar je zult een vergelijkbaar alternatief vinden voor Gulp.

Grunt heeft een plugin genaamd grunt-bower-concat die alle hoofdbestanden compileert voor elke bower component die je hebt in een bower.js bestand. Die je vervolgens kunt gebruiken Grunt om minify (uglify), wat resulteert in bower.min.js.

Grunt bower concat voorbeeldconfiguratie:

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

Note: als je Gulp gebruikt, een soortgelijke plugin bestaat op: https://github.com/ck86/main-bower-files/

Note: voor Ruby on Rails en anderen, zie de volgende link: http://bower.io/docs/tools/

Stap 6: Scripts opnemen

Met de volgende scripts neemt u uw scripts eenmaal op en telkens wanneer u een nieuw front-endpakket toevoegt, wordt dit automatisch samengevoegd in het overeenkomstige bestand (bower.css of bower.js)

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

Stap 7: Meer bower-automatisering

U kunt bower verder automatiseren. Stel dat je in een team werkt en je voegt een nieuw bower component toe (bower install typeahead.js). Je wilt niet iedereen emailen om te vertellen dat ze bower install moeten uitvoeren. We kunnen het automatiseren met grunt-watch en grunt-exec:

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

Wat er hier gebeurt, is dat wanneer je het bower.json bestand bewerkt, grunt automatisch het bower install commando uitvoert. Wanneer je je wijzigingen commit, en je collega haalt je code op, dan zal grunt-watch een wijziging in bower.json detecteren die dan automatisch het bower install commando uitvoert.

Hoe ik bower aanpas in mijn eigen workflow

Als het op package managers aankomt, gebruik ik er een heleboel in mijn workflow. Ik gebruik npm om grunt en zijn plugins te beheren. Composer om mijn PHP vendor libraries te beheren, bower om mijn front-end packages te beheren en tenslotte ruby gems om Capistrano te beheren (een pakket dat wordt gebruikt om deployments te automatiseren).

Ik heb besloten dat ik npm de main package manager wil laten zijn. Dus begon ik alle hoofdcommando’s in te pakken in mijn package.json script sectie. Bijvoorbeeld:

• npm run migrate: migreert de database en genereert migratie bestanden (PHP specifiek)
• npm test: voert unit tests uit
• npm run protractor: voert end-2-end tests uit
• npm run deploy-staging: deploys code to staging machines
• npm run deploy-production: deploys code to production machines
• npm start: runs npm install (pre-start), bower update (post-install) en tenslotte grunt

Hier ziet u wat er achter de schermen gebeurt. Beschouw het volgende package.json bestand:

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

Als u naar de scripts sectie kijkt, zult u zien dat prestart: we npm install uitvoeren. Omdat package.json is opgenomen in onze repository, moeten we, als iemand een nieuwe devDependency toevoegt, gemakkelijk dezelfde versie kunnen installeren. (Merk op dat pre start het eerste commando is dat getriggerd wordt wanneer je npm start uitvoert).

post install (die getriggerd wordt door npm install), voert het volgende commando uit: bower update --unsafe-perm(de --unsafe-perm is alleen toegevoegd omdat bower-update niet werkte op een Mac). Dit zorgt ervoor dat al onze front-end pakketten up-to-date blijven.

start:en tot slot wordt het commando start uitgevoerd grunt.

Met deze instelling kan elke ontwikkelaar van je team die aan het project wil gaan werken, gewoon naar de projectdirectory navigeren en npm start uitvoeren om meteen aan de slag te gaan.

Het gebruik van deze aanpak is zeer effectief, omdat u andere scripts kunt opnemen om vanuit npm uit te voeren, zoals npm run migrate, npm run deploy-staging, enzovoort.

Door deze aanpak stimuleren we niet alleen het gebruik van de commandoregel en automatisering, maar maken we het ook uniform.

U kunt zien dat we npm install met bower update hebben gekoppeld. U kunt een stap verder gaan en al uw andere pakketbeheerders binden met npm install. In dat geval zou npm install alle volgende commando’s uitvoeren:

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

Wrapping it up

Bower is een geweldige tool die fundamentele problemen met moderne webapplicaties oplost. Iedereen wordt aangemoedigd om het te gebruiken (en zelfs de nieuwe Visual Studio wordt tegenwoordig geleverd met Bower en Grunt/Gulp).

Het kan gemakkelijk worden opgezet als je alleen ontwikkelt, maar als je in een team werkt, moet je de stappen in dit artikel volgen om een soepele workflow tussen alle ontwikkelaars in het team te garanderen.