Aloittelijoiden opas: Getting Started with Bower Package Manager

Bower on Twitterin kehittämä front-end-paketinhallintaohjelma. Bower tunnetaan myös nimellä Package manager for the Web, ja sitä käytetään nykyaikaisissa avoimen lähdekoodin ja suljetun lähdekoodin projekteissa monien toistuvien ongelmien ratkaisemiseen.

Tämä artikkeli opastaa sinut bowerin peruskäytön ja edistyneen käytön läpi tiimiympäristössä. Kerron myös henkilökohtaisesta työnkulustani, kun käsittelen boweria kehittäjätiimin kanssa.

Ongelmat, jotka bower ratkaisee

Web-sivuston tai web-sovelluksen kehittäminen vaatii nykyään monien front-end-kehysten, kuten Bootstrapin, jQueryn, Angularin jne. käyttöä.

1. Kunkin näistä paketeista lataaminen vaatii navigoimista vastaavalle verkkosivulle, sopivan version etsimistä, lataamista, pakkauksen purkamista ja lopuksi päätiedostojen siirtämistä myyjän kansioon. (esim. jquery-paketissa oleva main-tiedosto on jquery.js)
2. Kun tiedostot on ladattu arkistoosi, sinun on käytävä manuaalisesti kaikilla edellä mainituilla sivustoilla (jquery.com, angularjs.com, bootstrap.com) tarkistamassa päivitykset ja arvaa mitä? Jos päivitys on olemassa, sinun on toistettava vaihe 1 jokaisen paketin/päivityksen kohdalla.
3. Oletetaan, että aiomme käyttää Bootstrapia, joka vaatii jQuerya (kutsutaan riippuvuudeksi). Kun menet osoitteeseen getbootstrap.com lataamaan sen, sinun on sen jälkeen siirryttävä osoitteeseen jquery.com lataamaan myös jquery.

Yhteenvetona bower auttaa sinua hallitsemaan front-end-paketteja. Se auttaa sinua lataamaan ne, päivittämään ne ja ratkaisemaan niiden riippuvuudet.

Bowerin käytöstä on muitakin hyötyjä, joita käsittelemme myöhemmin tässä artikkelissa, mutta nämä ovat tärkeimmät asiat, jotka bower ratkaisee meille!

Asennus ja käyttö

Bowerin asentaminen

Bower on node-moduuli, ja se voidaan asentaa seuraavalla komennolla:

npm install -g bower

Tämä asentaa bowerin globaalisti järjestelmääsi.

Jos sinulla ei ole nodea asennettuna koneellesi, sinun on ladattava se osoitteesta nodejs.org.

Pakettien asentaminen

Tässä opetusohjelmassa käytämme boweria bootstrapin asentamiseen. Prosessi toimii minkä tahansa muun paketin kanssa.

bower install bootstrap

Tämä asentaa bootstrapin juuri luotuun /bower_components-kansioon (juuritasolla).

Huomaa, että tämä asentaa bootstrapin 3.2.x:n, joka on uusin versio tätä artikkelia kirjoitettaessa. Jos haluamme asentaa uusimman version 2.x:n, meidän on suoritettava:

bower install bootstrap#2

voimme myös määrittää tarkan version komennolla

bower install bootstrap#2.2

Huomaa myös, että koska bootstrap on riippuvainen jQuerysta, minkä tahansa edellisen komennon suorittaminen asentaa automaattisesti myös jQueryn, jotta bootstrapin riippuvuudet voidaan ratkaista.

Pakettien päivittäminen

Jos haluamme päivittää kaikki pakettimme, riittää, että suoritamme seuraavan komennon:

bower update

Skriptien sisällyttäminen

Viimeisenä vaiheena olisi ladata ladatut tyylit ja skriptit mukaan. Koska ne kaikki sijaitsevat /bower_components-kansion sisällä, meidän täytyy kirjoittaa seuraava:

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

Yleinen työnkulku tiimiympäristössä

Käytettyämme boweria edellä esitetyllä minimalistisella tavalla, huomaamme, että se tuo uusia ongelmia, kun työskentelemme lähdekoodinhallinnan kanssa ja/tai tiimiympäristössä.

1. Bower ei lataa vain pääjakelutiedostoja, vaan se lataa myös koko jquery-, bootstrap- yms. repositoryn. Tämä voi paisuttaa versionhallintahistoriaasi, eikä sitä missään nimessä suositella.
2. Ei myöskään pääjakelutiedostoja (dist/jquery.js, dist/css/bootstrap.css) ole minifioitu, eikä bower koskaan minifioi jakelutiedostoja, koska se on paketinhallintaohjelma, ei build-työkalu.
3. Sinun täytyy manuaalisesti varmistaa, että lataat jqueryn, ennen kuin lataat bootstrap:in (koska bootstrap:llä on jquery:n riippuvuussuhteena).
4. Joudut lisäämään manuaalisesti uuden <script>-tagin jokaiselle uudelle paketille (ja ehkä uuden <link rel=”stylesheet”/>, jos se sisältää css-tiedostoja.

Vaihe 1: Asenna bower

ja varmista, että jokainen henkilö tiimissäsi asentaa sen myös globaalisti.

Vaihe 2: Sulje bower_components pois versiohallinnasta

Lisää bower_components omaan .gitignore. Tämä ohjeistaa Gitiä sivuuttamaan kaikki bower_components-tiedostot. Näin jokaisella kehittäjällä (tiimissä) on paikallinen kopio tarvittavista front-end-kirjastoista. Älä huolehdi siitä, että jokaisella kehittäjällä on eri versio. Korjaamme sen kohta.

Vaihe 3: Asenna tarvittavat paketit

Asenna tarvittavat front-end-paketit, sanotaan vaikka jQuery ja bootstrap.

bower install jquery#1 bootstrap --save

--save-lippu ohjeistaa boweria luomaan (jos sitä ei ole olemassa) bower.json-tiedoston ja sisällyttämään asennetut paketit siihen. Tämä on esimerkki luodusta bower.json-tiedostosta:

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

huomatkaa, että siinä on versiorajoitus ~3.2.0. Tämä varmistaa, että kaikki tiimin jäsenet työskentelevät samalla bootstrap-versiolla, tilde tarkoittaa, että syyn pitäisi olla kohtuullisen lähellä määritettyä syytä.

Vaihe 4: Tiimin jäsenet voivat nyt suorittaa: bower install

Kun kuka tahansa kehittäjä, jolla on pääsy arkistoon, suorittaa bower install, se asentaa kaikki riippuvuudet (bootstrap ja jquery tässä tapauksessa).

Loppuja vaiheita varten tarvitsemme Gruntia tai Gulpia.

Vaihe 5: Integrointi Build-työkalujen kanssa

Grunt ja Gulp ovat build-työkaluja, joita käytetään yleisten ja toistuvien tehtävien automatisointiin, kuten skriptien pienentämiseen, kuvien optimointiin, tyylisarjojen pienentämiseen, lessin/sassin/stylusin kääntämiseen. Bower toimii hyvin Gruntin/Gulpin kanssa valmiiden lisäosien vuoksi. Tässä opetusohjelmassa käsittelen Gruntia, mutta löydät kuitenkin samanlaisen vaihtoehdon Gulpille.

Gruntissa on lisäosa nimeltä grunt-bower-concat, joka kokoaa jokaisen bower-komponenttisi kaikki päätiedostot yhteen bower.js tiedostoon. Jonka voit sitten käyttää Gruntia pienentämään (uglify), jolloin tuloksena on bower.min.js.

Grunt bower concat esimerkkikonfiguraatio:

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

Huomautus: jos käytät Gulpia, samanlainen plugin on olemassa osoitteessa: https://github.com/ck86/main-bower-files/

Huomautus: Ruby on Railsia ja muita varten tarkista seuraava linkki: http://bower.io/docs/tools/

Vaihe 6: Sisällytä skriptit

Seuraavilla skripteillä sisällytät skriptisi kerran ja aina kun lisäät uuden front-end-paketin, se liitetään automaattisesti vastaavaan tiedostoon (bower.css tai bower.js)

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

Vaihe 7: Enemmän bower-automaatiota

Voit automatisoida boweria lisää. Oletetaan, että työskentelet tiimissä ja lisäät uuden bower-komponentin (bower install typeahead.js). Et halua lähettää kaikille sähköpostia, jossa kehotat heitä suorittamaan bower install. Voimme automatisoida sen grunt-watchin ja grunt-execin avulla:

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

Tässä tapahtuu se, että aina kun muokkaat bower.json-tiedostoa, grunt ajaa automaattisesti komennon bower install. Kun toimitat muutoksesi ja työtoverisi vetää koodisi, grunt-watch havaitsee muutoksen bower.json:ssä, jolloin se ajaa automaattisesti komennon bower install.

Miten muokkaan boweria omassa työnkulussani

Kun on kyse paketinhallinnasta, käytän työnkulussani monia niistä. Käytän npm:ää gruntin ja sen lisäosien hallintaan. Composeria PHP-toimittajakirjastojeni hallintaan, boweria front-end-pakettieni hallintaan ja lopuksi ruby gemsia Capistranon hallintaan (paketti, jota käytetään käyttöönoton automatisointiin).

Päätin, että haluan npm:n olevan main paketinhallinta. Joten aloin kietoa kaikki tärkeimmät komennot package.json:n skriptiosion sisälle. Esimerkiksi:

• npm run migrate: siirtää tietokannan ja luo migraatiotiedostot (PHP-kohtaiset)
• npm test: ajaa yksikkötestit
• npm run protractor: ajaa loppu-2-päätteiset testit
• 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) and finally grunt

Here’s what’s happening behind the scenes. Tarkastellaan seuraavaa package.json-tiedostoa:

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

Jos katsot skriptit-osiota, näet, että prestart: ajamme npm install. Koska package.json sisältyy arkistoomme, jos joku lisää uuden devDependencyn, meidän on voitava asentaa sama versio helposti. (Huomaa, että pre start on ensimmäinen komento, joka käynnistyy, kun suoritat npm startin).

post install (jonka käynnistää npm install), suorittaa seuraavan komennon: bower update --unsafe-perm (--unsafe-perm lisättiin vain siksi, että bower-update epäonnistui Macilla). Tämä pitää kaikki front-end-pakettimme ajan tasalla.

start:ja lopuksi komento start suorittaa grunt.

Tämän asetelman avulla aina kun kuka tahansa tiimisi kehittäjä haluaa aloittaa projektin työstämisen, hän vain siirtyy projektin hakemistoon ja suorittaa npm start aloittaakseen työskentelyn heti.

Tämän lähestymistavan käyttäminen on erittäin tehokasta, koska voit sisällyttää muita skriptejä ajettavaksi npm:stä, kuten npm run migrate, npm run deploy-staging jne.

Tällä lähestymistavalla emme ainoastaan kannusta komentorivin käyttöön ja automatisointiin, vaan teemme siitä itse asiassa yhdenmukaisen.

Näet, että sidoimme npm install:n bower update:n kanssa. Voit mennä askeleen pidemmälle ja sitoa kaikki muut paketinhallintasi npm install:n kanssa. Tällöin ajamalla npm install ajettaisiin kaikki seuraavat komennot:

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

Wrapping it up

Bower on hämmästyttävä työkalu, joka ratkaisee nykyaikaisten web-sovellusten perustavanlaatuisia ongelmia. Kaikkia ihmisiä kannustetaan käyttämään sitä (ja jopa uusi Visual Studio toimitetaan nykyään Bowerin ja Gruntin/Gulpin kanssa).

Se voidaan ottaa helposti käyttöön, kun kehität yksin, mutta jos työskentelet tiimissä, sinun on kuitenkin noudatettava tässä artikkelissa esiteltyjä vaiheita varmistaaksesi sujuvan työnkulun tiimin kaikkien kehittäjien välillä.