Mikä Bowerissa on niin hienoa?

Seuraava on Helios Design Labsin Dan Sundyn vieraskirjoitus. Dan sekä selittää, miten Boweria voi käyttää että perustelee sen käyttöä sellaisen henkilön näkökulmasta, joka aluksi vastusti ajatusta.

Kun aloin työskennellä Bowerin kanssa, en oikein ymmärtänyt sen vetovoimaa. ”Oikeasti?” Ajattelin. ”Nytkö on liikaa työtä ladata ja purkaa tiedosto?” En myöskään ollut kovin innoissani siitä, että ahdin kasan uusia komentoja aivoihin, jotka olivat jo pullollaan Gitin, Gruntin, Gulpin, Jekyllin, Noden jne. kanssa.

On kaksi asiaa, jotka kertoisin tuolle puolen vuoden takaiselle versiolle itsestäni. Ensinnäkin, Bower voi tehdä vähän muutakin kuin ladata tiedoston tai kaksi. Toiseksi, tunnin käyttäminen sellaisen työkalun opetteluun, joka poistaa toistuvan tehtävän, on sen arvoista.

First Things First:

Aloittelemattomille Bower on paketinhallintaohjelma. Se on hyvä, noh, hallitsemaan paketteja – kaikkea, minkä suhteen olet riippuvainen ulkoisesta tekijästä. Hyviä esimerkkejä ovat CSS-kehykset kuten Bootstrap, kirjastot kuten jQuery, jQuery-lisäosat tai JavaScript-kehykset kuten Angular. Bowerin virallinen verkkosivusto, Bower.io, kertoo sen luultavasti parhaiten:

Web-sivustot koostuvat monista asioista – kehyksistä, kirjastoista, resursseista, apuohjelmista ja sateenkaarista. Bower hallinnoi kaikkia näitä asioita puolestasi.

Bower toimii hakemalla ja asentamalla paketteja kaikkialta, huolehtien etsimiesi asioiden metsästämisestä, löytämisestä, lataamisesta ja tallentamisesta.

Edellytykset

On joitakin asioita, joita tarvitset, ennen kuin voit aloittaa työskentelyn Bowerin kanssa:

• Komentorivi. Jep, se on komentorivityökalu (c’mon se ei ole niin pelottava).
• Node ja NPM. Bower on Noden moduuli, joten sen käyttämiseen tarvitaan NPM.
• Git. Bower-paketit ovat Git-reposia. Bower käyttää Gitiä ymmärtääkseen, missä paketti on, missä versiossa se on – ja sen sellaista.
• Globaali asennus. Teknisesti voisit asentaa sen jokaiseen projektiin, mutta luultavasti haluat, että se on kaikkialla.

Asenna Bower globaalisti:

$ npm install -g bower

Huomautus: Asetuksistasi riippuen saatat joutua käyttämään `sudo npm install -g bower` asentaaksesi sen globaalisti.

Perusasiat

Aloittaaksesi kuvittele hakemistorakennetta uutta sivustoa varten. Omani näyttävät yleensä jotakuinkin tältä:

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

Tässä on `src`-kansio, jossa suurin osa kehitystyöstä tehdään. Gulpin build-tehtävä valmistelee lopulta kaiken ja kääntää optimoidun koodimme tuotantokelpoiseen `dist`-kansioon.

Esitettäkö, että haluat sisällyttää jQueryn tähän projektiin. Tavallisesti menisit osoitteeseen jquery.com, etsisit oikean latauslinkin ja klikkaisisit sitä, sitten purkaisisit paketin ja laittaisit tiedostot oikeaan hakemistoon.

Bowerilla suoritat vain seuraavan komennon:

$ bower install jquery

Nyt on ilmestynyt `bower_components`-hakemisto, jossa on `jquery`-kansio.

|-.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 on tehnyt koodinsa saamisen helpoksi luomalla ja rekisteröimällä paketin Bowerille. Useimmat suositut kirjastot ja kehykset ovat tehneet samoin. Jos haluat tarkistaa, että haluamasi asset on Bower-paketti, voit tehdä haun:

$ bower search <package-name>

Jos sitä ei ole rekisteröity, on silti mahdollista napata reposit git-päätepisteillä näin:

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

Advanced: Jos haluat hienostella, voit jopa asentaa yksityisiä reposia, joihin sinulla on pääsy. Katso tämä Rob Dodsonin tekemä video-opastus.

Tässä on joitain muita peruskomentoja, joilla voit tarkastella ja hallita asentamiasi resursseja.

Luetteloi kaikki pakettisi:

$ bower list

Hae tietoja mistä tahansa asentamastasi paketista:

$ bower info <package-name>

Tarkista päivitykset:

$ bower check-new

Silloin, jos päivityksiä on, päivitä paketti:

$ bower update <package-name>

Mutta ehkäpä viimeisimpään versioon päivittäminen rikkoi jotain.

Asenna jokin tietty versio-vanha tai uusi-miten:

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

Tämä ei todellakaan ole tyhjentävä luettelo. Jos olet kiinnostunut aloittamisesta, suosittelen tekemään testiprojektin ja käymään läpi jonkin netistä löytyvistä lukuisista opetusohjelmista. Tämä Treehousen tekemä on loistava: Getting Started with Bower. Sitten voit syventyä kaikkiin komentoihin tutustumalla Bowerin API:han.

Hei, mutta odota, on vielä lisää!

Pieni kehitystiimi, jonka kanssa työskentelen, on käyttänyt Boweria viimeisen noin vuoden ajan. Vaikka pakettien hallinta komentorivin kautta oli hienoa, en ollut myyty ennen kuin aloimme käyttää `bower.json`- ja `.bowerrc`-tiedostoja.

.bowerrc

`.bowerrc`-tiedostolla voi tehdä monia asioita, mutta olen nähnyt sitä useimmiten käytettävän `bower_components`-hakemiston nimen ja sijainnin muuttamiseen. (Tämä teki minut onnelliseksi, koska inhosin sitä, että satunnainen `bower_components`-kansio leijui ympäriinsä projektin juuressa).

Tältä `.bowerrc`-tiedosto voi näyttää:

{ "directory": "src/components"}

Hakemisto-vaihtoehto lähettää paketit paikkaan, joka on järkevin – tässä tapauksessa `src/`-hakemistoon. Katso uutta projektirakennetta:

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

Huomaa, että `bower_components/`-kansio on kadonnut ja `src/`-hakemistossa on `components/`-kansio.

Advanced:

Miten `bower.json`-tiedosto voi auttaa meitä?

bower.json

Tiedosto `bower.json` näyttää paljolti samalta kuin Noden `package.json`-tiedosto. Se on manifestitiedosto, jonka avulla voit määrittää asetuksia. Katsotaanpa esimerkkiä (joka voidaan luoda ajamalla 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" }}

Monet näistä vaihtoehdoista ovat olemassa siinä tapauksessa, että rekisteröit tämän repon Bower-paketiksi. Mutta näetkö devDependencies objektin aivan alareunassa? Tuo objekti päivittyy automaattisesti, jos liität --save-dev Bower-komentoon, näin:

$ bower install jquery --save-dev

Ja nyt, jos toinen koodari ajaa `bower install`, tietokone asentaa kaiken devDependencies-luettelon devDependencies-luettelosta kansioon, joka on määritelty kohdassa `.bowerrc`. Vastaavasti, jos yksi kehittäjä lisää paketin tai päivittää paketin version käyttämällä --save-dev, koko tiimi voi synkronoida omaisuuseränsä käyttämällä bower install (vedettyään uusimman version `bower.json`-tiedostosta).

Kun kaikki metsästys- ja keräilytyö on poistettu `bower.json`-tiedoston avulla, ei ole enää tarvetta versioida mitään näistä omaisuuseristä. `components/`-kansion voi lisätä `.gitignore`-tiedostoon, jotta arkistosi pysyy laihana ja keskinkertaisena.

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

Parting Shot

Kuuntelin erästä jaksoa suosikkipodcastistani web dev (vinkki, vinkki) ja isännät keskustelivat siitä, oliko Bower oikeasti hyödyllinen vai pelkkä ohimenevä villitys. He pohtivat, onko sen tarkoitus tehdä lataamisesta helpompaa vai käytetäänkö sitä kirjastojen versioiden päivittämiseen, kuten ruby gemit tekevät. He puhuivat siitä, että se on ”front-endy NPM” (parafraasin).

Kauneus on siinä, että se tekee kaikkia näitä asioita. Voit käyttää sitä koodin lataamiseen ja päivittämiseen, mutta voit viedä sitä pidemmälle. Bower voi auttaa sinua pitämään projektikirjastot ja kehykset synkronoituina, tai integroida sen muihin työkaluihin, kuten Yeomaniin, jotta voit leikata vielä enemmän aikaa dev-asetuksistasi. Lisäksi voit luoda ja rekisteröidä omia Bower-paketteja, jotta voit asentaa ja päivittää niitä kaikkiin projekteihisi nopeasti (ja turvallisesti).

Oh, ja mitä tulee kysymykseen, joka sai keskustelun käyntiin: Et käyttäisi Boweria WordPressin asentamiseen, eikä WordPressin pitäisi olla `bower_components`-kansiossa. Mutta voisit käyttää Boweria WordPress-teemassasi ulkoisten resurssien hallintaan (älä vain lataa kirjastoja, kuten jQuery, jotka sisältyvät jo WordPressin ytimeen).