Útmutató kezdőknek: Bower csomagkezelővel

A Bower egy front-end csomagkezelő, amelyet a Twitter épített. A webes csomagkezelőként is ismert bower-t modern nyílt forráskódú és zárt forráskódú projektekben használják számos visszatérő probléma megoldására.

Ez a cikk végigvezeti Önt a bower alapvető használatán és a haladó, csoportos környezetben történő használatán. Megosztom a személyes munkafolyamatomat is, amikor a bowerrel egy fejlesztőcsapattal foglalkozom.

Problémák, amelyeket a bower megold

A weboldal vagy webes alkalmazás fejlesztése manapság számos front-end keretrendszer használatát igényli, például Bootstrap, jQuery, Angular stb.

1. Az egyes csomagok letöltése a megfelelő weboldalon való navigálást, a megfelelő verzió megtalálását, letöltését, kicsomagolását és végül a mainfiles mappába való áthelyezését igényli. (pl.: a main fájl a jquery csomagban a jquery.js)
2. Miután letöltötte a fájlokat az adattárába, manuálisan meg kell látogatnia az összes fenti weboldalt (jquery.com, angularjs.com, bootstrap.com), hogy ellenőrizze a frissítéseket, és találja ki, mi van? Ha van frissítés, akkor meg kell ismételni az 1. lépést minden egyes csomag/frissítés esetében.
3. Tegyük fel, hogy a Bootstrap-et fogjuk használni, amelyhez szükséges a jQuery (úgynevezett függőség). Amikor a getbootstrap.com oldalra megyünk, hogy letöltsük, akkor a jquery.com oldalra kell navigálnunk, hogy a jquery-t is letöltsük.

Összefoglalva, a bower segít a front-end csomagok kezelésében. Segít letölteni őket, frissíteni őket és megoldani a függőségeiket.

A bower használatának vannak más előnyei is, amelyeket a cikk későbbi részében tárgyalunk, de ezek a fő problémák, amelyeket a bower megold számunkra!

Telepítés és használat

A bower telepítése

A bower egy node modul, és a következő paranccsal telepíthető:

npm install -g bower

Ez a bower globálisan települ a rendszerünkre.

Ha nincs telepítve a node a számítógépeden, akkor le kell töltened a nodejs.org-ról.

Csomagok telepítése

Ez a bemutató kedvéért a bootstrap telepítéséhez a bower-t fogjuk használni. A folyamat bármely más csomaggal is működik.

bower install bootstrap

Ez a bootstrap-et az újonnan létrehozott /bower_components mappába (a gyökérszintre) fogja telepíteni.

Megjegyezzük, hogy ez a bootstrap 3.2.x-et fogja telepíteni, ami a cikk írásakor a legújabb verzió. Ha a legújabb 2.x-es verziót szeretnénk telepíteni, akkor a következőt kell futtatnunk:

bower install bootstrap#2

megadhatjuk a pontos verziót is a

bower install bootstrap#2.2

Megjegyezzük még, hogy mivel a bootstrap függ a jQuery-től, az előző parancsok bármelyikének futtatása automatikusan telepíti a jQuery-t is, hogy a bootstrap függőségeit feloldja.

Csomagok frissítése

Ha az összes csomagunkat frissíteni szeretnénk, akkor csak a következő parancsot kell futtatnunk:

bower update

Szkriptek felvétele

Az utolsó lépés a letöltött stílusok és szkriptek felvétele lenne. Mivel ezek mind a /bower_components mappán belül találhatók, a következőt kell írnunk:

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

Közös munkafolyamat csapatmunkában

A bower fenti minimalista módon történő használata után rájövünk, hogy új problémákat vezet be, ha forráskezeléssel és/vagy csapatmunkában dolgozunk.

1. A bower nem csak a fő terjesztési fájlokat tölti le, hanem a teljes jquery, bootstrap stb. tárat is. Ez felduzzaszthatja a revíziókezelési előzményeket, és egyáltalán nem ajánlott.
2. A fő disztribúciós fájlok (dist/jquery.js, dist/css/bootstrap.css) nincsenek kicsinyítve, és a bower soha nem fogja kicsinyíteni a disztribúciós fájlokat, mivel ez egy csomagkezelő, nem pedig egy build eszköz.
3. Kézzel kell meggyőződnöd arról, hogy a bootstrap betöltése előtt betöltöd a jquery-t (mivel a bootstrap függőségként tartalmazza a jquery-t).
4. Kézzel kell hozzáadnod egy új <script> taget minden új csomaghoz (és esetleg egy új <link rel=”stylesheet”/>, ha css fájlokat tartalmaz.

1. lépés: Telepítsd a bower-t

és győződj meg róla, hogy a csapatod minden tagja globálisan is telepíti.

2. lépés: Zárd ki a bower_components-t a revíziós ellenőrzésből

Adj bower_components a .gitignore-hoz. Ez utasítja a Git-et, hogy hagyja figyelmen kívül az összes bower_components fájlt. Így minden fejlesztőnek (egy csapatban) lesz egy helyi példánya a szükséges front-end könyvtárakból. Ne aggódjon amiatt, hogy minden fejlesztőnek más verziója van. Ezt hamarosan megoldjuk.

3. lépés: Telepítsük a szükséges csomagokat

Telepítsük a szükséges front-end csomagokat, mondjuk a jQuery-t és a bootstrap-et.

bower install jquery#1 bootstrap --save

A --save flag utasítja a bower-t, hogy hozzon létre (ha még nem létezik) egy bower.json fájlt, és tartalmazza benne a telepített csomagokat. Ez egy példa a generált bower.json fájlra:

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

jegyezzük meg, hogy van egy verzió megkötés ~3.2.0. Ez biztosítja, hogy a csapat minden tagja ugyanazon a bootstrap-verzión fog dolgozni, a tilde azt jelenti, hogy az oknak viszonylag közel kell lennie a megadott okhoz.

4. lépés: A csapat tagjai most már futtathatják: bower install

Amikor bármelyik fejlesztő, akinek hozzáférése van az adattárhoz, futtatja a bower install-et, az telepíti az összes függőséget (ebben az esetben a bootstrap-et és a jquery-t).

A további lépésekhez szükségünk van a Gruntra vagy a Gulp-ra.

5. lépés: Integráció a Build eszközökkel

A Grunt és a Gulp olyan build eszközök, amelyeket a gyakori és ismétlődő feladatok automatizálására használunk, mint például a szkriptek kicsinyítése, képek optimalizálása, stíluslapok kicsinyítése, less/sass/stylus fordítása. A Bower jól játszik a Grunt/Gulp-al a kész pluginok miatt. Ebben a bemutatóban a Grunttal fogok foglalkozni, azonban a Gulp-hoz is találsz hasonló alternatívát.

A Gruntnak van egy grunt-bower-concat nevű pluginja, amely minden egyes bower komponensed összes fő fájlját egy bower.js fájlba fordítja. Amit aztán a Grunt segítségével kicsinyíthetsz (uglify), aminek az eredménye bower.min.js.

Grunt bower concat minta konfiguráció:

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

Megjegyzés: ha Gulp-ot használsz, egy hasonló plugin létezik a következő címen: https://github.com/ck86/main-bower-files/

Megjegyzés: Ruby on Rails és mások esetében nézd meg a következő linket: http://bower.io/docs/tools/

6. lépés: Include scripts

A következő szkriptekkel egyszer csatolja a szkriptjeit, és amikor új front-end csomagot ad hozzá, az automatikusan bekapcsolódik a megfelelő fájlba (bower.css vagy bower.js)

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

7. lépés: További bower automatizálás

A bower-t tovább automatizálhatja. Tegyük fel, hogy egy csapatban dolgozol, és hozzáadsz egy új bower komponenst (bower install typeahead.js). Nem akarsz mindenkinek e-mailt küldeni, hogy futtassák a bower install. Automatizálhatjuk a grunt-watch és grunt-exec segítségével:

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

Az történik itt, hogy amikor szerkeszted a bower.json fájlt, a grunt automatikusan lefuttatja a bower install parancsot. Amikor commitolod a változtatásaidat, és a munkatársad lehúzza a kódodat, a grunt-watch észleli a bower.json változását, ami ezután automatikusan futtatja a bower install parancsot.

Hogyan testreszabom a bower-t a saját munkafolyamatomban

Amikor csomagkezelőkről van szó, sokukat használom a munkafolyamatomban. Az npm-et használom a grunt és annak pluginjainak kezelésére. A Composert a PHP-gyártói könyvtáraim kezelésére, a bower-t a front-end csomagjaim kezelésére és végül a ruby gems-t a Capistrano (a telepítések automatizálására használt csomag) kezelésére.

Úgy döntöttem, hogy az npm-et szeretném main csomagkezelőnek. Így elkezdtem az összes fő parancsot a package.json szkript szekciómba csomagolni. Például:

• npm run migrate: migrálja az adatbázist és migrációs fájlokat generál (PHP specifikus)
• npm test: futtatja a unit teszteket
• npm run protractor: futtatja az end-2-end teszteket
• 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. Tekintsük a következő package.json fájlt:

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

Ha megnézzük a szkriptek részt, láthatjuk, hogy prestart: lefuttatjuk a npm install. Mivel a package.json benne van a tárolónkban, ha valaki egy új devDependency-t ad hozzá, könnyen kell tudnunk telepíteni ugyanazt a verziót. (Figyeljük meg, hogy a pre start az első parancs, amit az npm start futtatásakor indítunk).

post install (amit a npm install indít), a következő parancsot futtatja: bower update --unsafe-perm (a --unsafe-perm csak azért lett hozzáadva, mert a bower-update nem működött Mac-en). Ezzel az összes front-end csomagunkat naprakészen tartjuk.

start:és végül a start parancs fut grunt.

Ezzel a beállítással, amikor a csapat bármelyik fejlesztője el akarja kezdeni a munkát a projekten, egyszerűen a projekt könyvtárába navigál, és a npm start futtatásával azonnal elkezdi a munkát.

Ezzel a megközelítéssel nagyon hatékony, mert más szkripteket is be lehet vonni az npm-ből futtatandó, mint például a npm run migrate, npm run deploy-staging, stb.

Ezzel a megközelítéssel nem csak ösztönözzük a parancssori használatot és az automatizálást, hanem ténylegesen egységessé tesszük azt.

Láthatod, hogy a npm install-t összekötöttük a bower update-vel. Ezt egy lépéssel tovább is vihetjük, és az összes többi csomagkezelőt is npm install-hoz köthetjük. Ebben az esetben a npm install futtatása az összes következő parancsot futtatná:

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

Becsomagolás

A Bower egy csodálatos eszköz, amely megoldja a modern webes alkalmazások alapvető problémáit. Minden embernek ajánlott a használata (és manapság már az új Visual Studio is a Bowerrel és a Grunt/Gulp-pal együtt szállítja).

Szóló fejlesztés esetén könnyen beállítható, ha azonban csapatban dolgozol, akkor a cikkben bemutatott lépéseket kell követned, hogy a csapat összes fejlesztője között zökkenőmentes legyen a munkafolyamat.