Ce este atât de grozav la Bower?

Cele ce urmează este un articol scris de Dan Sundy de la Helios Design Labs. Dan va explica atât cum să folosească Bower, cât și să facă o pledoarie pentru a face acest lucru, din perspectiva cuiva care s-a împotrivit ideii la început.

Când am început să lucrez cu Bower nu prea am înțeles atracția. „Serios?” M-am gândit. „Acum e prea mult de lucru să descarci și să descompari un fișier?”. De asemenea, nu am fost super încântat să înghesui o grămadă de comenzi noi într-un creier care era deja bombat la cusături cu Git, Grunt, Gulp, Jekyll, Node, etc.

Există două lucruri pe care le-aș spune acelei versiuni de acum jumătate de an a mea. În primul rând, Bower poate face un pic mai mult decât să descarce un fișier sau două. În al doilea rând, a petrece o oră învățând un instrument care va elimina o sarcină repetitivă merită.

Primele lucruri mai întâi: Ce naiba este Bower?

Pentru cei neinițiați, Bower este un manager de pachete. Este bun la, ei bine, gestionarea pachetelor – orice lucru pentru care depindeți de un autor extern. Exemple bune sunt cadrele CSS precum Bootstrap, bibliotecile precum jQuery, plugin-urile jQuery sau cadrele JavaScript precum Angular. Site-ul oficial Bower, Bower.io, spune probabil cel mai bine:

Site-urile web sunt alcătuite din o mulțime de lucruri – cadre, biblioteci, active, utilități și curcubee. Bower gestionează toate aceste lucruri pentru dumneavoastră.

Bower funcționează prin preluarea și instalarea pachetelor de peste tot, ocupându-se de vânarea, găsirea, descărcarea și salvarea lucrurilor pe care le căutați.

Precondiții

Există câteva lucruri de care veți avea nevoie înainte de a începe să lucrați cu Bower:

• Linia de comandă. Da, este un instrument de linie de comandă (haideți că nu este atât de înfricoșător).
• Node și NPM. Bower este un modul Node, așa că pentru a-l obține aveți nevoie de NPM.
• Git. Pachetele Bower sunt depozite Git. Bower folosește Git pentru a înțelege unde se află pachetul, pe ce versiune se află – acest gen de lucruri.
• Instalare globală. Din punct de vedere tehnic, ați putea să-l instalați în fiecare proiect, dar probabil că veți dori să-l aveți peste tot.

Pentru a instala Bower la nivel global:

$ npm install -g bower

Nota: În funcție de configurația dvs. s-ar putea să trebuiască să folosiți `sudo npm install -g bower` pentru a-l instala la nivel global.

Noțiuni de bază

Pentru a începe, imaginați-vă structura de directoare pentru un nou site. A mea arată de obicei cam așa:

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

Există un dosar `src` unde se face cea mai mare parte a muncii de dezvoltare. O sarcină de compilare Gulp va pregăti în cele din urmă totul și va compila codul nostru optimizat într-un dosar `dist` gata de producție.

Să spunem că doriți să includeți jQuery în acest proiect. De obicei, ar trebui să mergeți la jquery.com, să găsiți și să faceți clic pe link-ul de descărcare corect, apoi să descompuneți și să puneți fișierele în directorul potrivit.

Cu Bower, trebuie doar să rulați următoarea comandă:

$ bower install jquery

Acum a apărut un director `bower_components` cu un folder `jquery`.

|-.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 a facilitat obținerea codului lor prin crearea și înregistrarea unui pachet pentru Bower. Majoritatea bibliotecilor și cadrelor populare au făcut același lucru. Dacă doriți să verificați dacă activul pe care îl doriți este un pachet Bower, puteți face o căutare:

$ bower search <package-name>

Dacă nu este înregistrat, este încă posibil să obțineți depozite cu puncte finale git, astfel:

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

Advanced: Dacă vreți să fiți fantezist, puteți chiar să instalați depozite private la care aveți acces. Consultați acest tutorial video realizat de Rob Dodson.

Iată alte câteva comenzi de bază pe care le puteți utiliza pentru a vizualiza și gestiona activele pe care le-ați instalat.

Listați-vă toate pachetele:

$ bower list

Obțineți informații despre orice pachet pe care l-ați instalat:

$ bower info <package-name>

Verificați dacă există actualizări cu:

$ bower check-new

Apoi, dacă există actualizări, actualizați un pachet:

$ bower update <package-name>

Dar poate că actualizarea la ultima versiune a stricat ceva.

Instalați orice versiune specifică – veche sau nouă – cu:

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

Aceasta nu este cu siguranță o listă exhaustivă. Dacă sunteți interesat să începeți, vă recomand să faceți un proiect de testare și să lucrați prin unul dintre numeroasele tutoriale care pot fi găsite online. Acesta de la Treehouse este excelent: Getting Started with Bower. Apoi puteți aprofunda toate comenzile verificând API-ul lui Bower.

Hey, But Wait, There’s More!

Prima echipă de dezvoltare cu care lucrez folosește Bower de aproximativ un an. În timp ce gestionarea pachetelor prin linia de comandă a fost grozavă, nu am fost convins până când nu am început să folosim fișierele `bower.json` și `.bowerrc`.

.bowerrc

Fileul `.bowerrc` poate face o serie de lucruri, dar am văzut că este folosit mai ales pentru a schimba numele și locația directorului `bower_components`. (Acest lucru m-a făcut fericit pentru că uram să am acel folder `bower_components` aleatoriu plutind în rădăcina proiectului).

Iată cum poate arăta un fișier `.bowerrc`:

{ "directory": "src/components"}

Opțiunea directory trimite pachetele într-o locație care are cel mai mult sens – în acest caz, directorul `src/`. Aruncați o privire la noua structură a proiectului:

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

Observați că dosarul `bower_components/` a dispărut și există un dosar `components/` în directorul `src/`.

Avansat: Este o idee bună să folosiți ceva de genul gulp-usemin sau grunt-usemin pentru a avea grijă de concatenare și minificare pentru toate stilurile și scripturile suplimentare.

Cum ne poate ajuta fișierul `bower.json`?

bower.json

Fișierul `bower.json` seamănă foarte mult cu `package.json` de la Node. Este un fișier manifest care vă permite să specificați opțiuni. Să ne uităm la un exemplu (care poate fi generat prin rularea 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" }}

Multe dintre aceste opțiuni sunt acolo în cazul în care înregistrați acest repo ca pachet Bower. Dar vedeți obiectul devDependencies chiar în partea de jos? Acel obiect va fi actualizat automat dacă adăugați --save-dev la o comandă Bower, astfel:

$ bower install jquery --save-dev

Acum, dacă colegul de breaslă rulează `bower install`, calculatorul va instala tot ce se află în lista devDependencies în folderul specificat în `.bowerrc`. În mod similar, dacă un programator adaugă un pachet sau actualizează versiunea unui pachet folosind --save-dev, întreaga echipă își poate sincroniza activele folosind bower install (după ce a extras cea mai recentă versiune a fișierului `bower.json`).

Din moment ce toată munca de vânătoare și colectare a fost eliminată cu fișierul `bower.json`, nu mai este nevoie să se facă versiuni pentru oricare dintre aceste active. Dosarul `components/` poate fi adăugat la fișierul `.gitignore` pentru a menține depozitul dvs. simplu și eficient.

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

Parting Shot

Ascultam un episod din podcastul meu preferat de dezvoltare web (wink, wink) și gazdele discutau dacă Bower este cu adevărat util sau doar o modă trecătoare. Se întrebau dacă scopul său este de a ușura descărcarea sau dacă este folosit pentru actualizarea versiunilor bibliotecilor tale, așa cum fac gemurile ruby. Vorbeau despre faptul că este un „NPM de front-endy” (parafrazez).

Frumusețea este că face toate aceste lucruri. Îl puteți folosi pentru a descărca și a menține codul actualizat, dar îl puteți duce mai departe. Bower vă poate ajuta să păstrați bibliotecile de proiect și cadrele în sincronizare, sau să îl integrați cu alte instrumente precum Yeoman pentru a reduce și mai mult timp din configurația de dezvoltare. În plus, puteți crea și înregistra propriile pachete Bower, astfel încât să le puteți instala și actualiza în toate proiectele dvs. rapid (și în siguranță).

Oh, și în ceea ce privește întrebarea care a dat startul discuției: Nu ați folosi Bower pentru a instala WordPress, iar WordPress nu ar trebui să fie în folderul `bower_components`. Dar ați putea folosi Bower în cadrul temei WordPress pentru a gestiona resursele externe (doar nu încărcați biblioteci precum jQuery care sunt deja incluse în nucleul WordPress).

.