Share
De-a lungul acestei serii, ne-am uitat la Bower și cum poate îmbunătăți dezvoltatorul nostru WordPress. În timp ce încheiem această serie, vom examina cum să configuram Bower pentru următorul proiect. Mai precis, vom aborda modul de instalare, actualizare și personalizare a diverselor componente folosind Bower.
În postările anterioare, am vorbit despre ce este Bower și cum vă poate ajuta cu dezvoltarea WordPress. În acest post, vă voi ajuta să vă configurați Bower pentru proiectul dvs. și câteva tehnici avansate cu acesta.
Unele dintre concepte sunt similare cu Grunt, așa că aș sugera să aruncăm o privire la un post anterior, Configurarea Grunt pentru următorul proiect. În sfârșit, intrăm într-un cod. Să o facem!
Cheia pentru Bower într-un proiect este bower.json fişier. Aceasta este ceea ce va fi analizat pe parcursul unui an bower install pentru dvs. și pentru orice consumator al proiectului dvs. Este, de asemenea, necesar pentru a salva dependențele, dar mai mult despre asta mai târziu.
Primul lucru pe care o vom face este să creăm a bower.json fișierul din directorul principal al proiectului. Aș sugera începând cu cel puțin numele, descrierea și versiunea.
Iată de ce vom începe:
"nume": "tuts-bower", "descriere": "Exemplu de proiect pentru tutorial pe Bower for Tuts +", "versiune": "1.0.0"
Acum că avem a bower.json fișier, să adăugăm Bootstrap la proiectul nostru. Vom face acest lucru plecând la linia de comandă și tastând-o bower instalează bootstrap-sass-official - salvează. Aceasta ar trebui să creeze o bower_components dosar cu bootstrap-Sass-oficial dosar în interiorul acestuia, împreună cu actualizarea noastră bower.json fişier.
Iată cum ar trebui să arate acum:
"name": "tuts-bower", "descriere": "Exemplu de proiect pentru tutorial pe Bower for Tuts +", ~ 3.1.1 "
Veți observa dependențe adăugate și nu există bootstrap-Sass-oficial împreună cu cel mai recent număr de versiune.
Una dintre caracteristicile mele preferate ale Bower este cât de simplu este actualizarea componentelor pe care le folosesc într-un proiect. Pentru cei care mă cunosc, eu sunt de obicei unul pentru a încerca cea mai recentă versiune a bibliotecilor pe care le folosesc în prezent. Imediat ce apare o nouă versiune de Bootstrap, îl trag într-un proiect. Bower face foarte ușor acest lucru.
În exemplul de mai sus, tilda "~" în fața numărului de versiune înseamnă pur și simplu să utilizați cel puțin această versiune. De asemenea, vă va actualiza proiectul la orice versiune nouă de patch-uri când executați bower update. De exemplu, atunci când / în cazul în care Bootstrap actualizează la 3.1.2, puteți rula pur și simplu bower update și veți fi actualizat la acea versiune.
Există o serie de moduri diferite în care puteți specifica ce versiuni ale fiecărei componente să utilizeze.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Acum, când am instalat Bootstrap, hai să-l integrăm în proiectul nostru. Pentru exemplul din acest post, voi adăuga doar stilurile la proiect, nu JavaScript sau Fonturi. Eu le includ pe acestea în întregul proiect pe GitHub.
Primul lucru pe care vom dori să-l facem este să creați o style.scss fișier pe care îl vom compila în fișierul nostru stil.css în rădăcina proiectului nostru. De obicei, creez o structură cum ar fi css / Sass / apoi puneți-mi pe toți .SCSS fișierele din folderul Sass. Să mergem mai departe și să ne creăm style.scss fișier acolo.
Din moment ce facem o temă, avem nevoie de câteva comentarii în partea de sus, apoi putem importa în bootstrap.scss dosar pe care l-am tras cu Bower. Veți avea nevoie să vă dați seama căi, apoi folosiți-o @import să o aducă așa:
/ *! Tema Nume: Tuts Bower Tema URI: http://code.tutsplus.com/ Versiune: 1.0.0 Descriere: Exemplu de proiect pentru tutorial pe Bower for Tuts + Autor: Jason Bradley Autor URI: http://jasonbradley.me Licență: GNU Licență publică generală v3.0 URI de licență: http://www.gnu.org/licenses/gpl-3.0.html * / // Importul stilurilor Bootstrap @import '... / ... / bower_components / bootstrap-sass-official / vendor / active / stylesheet / bootstrap ";
Folosesc grunt-contrib-sass în exemplul meu de exemplu, acum când conducem compilamentul nostru Sass, acesta va compila bootstrap.scss în noi style.css fişier. Acum avem toate stilurile Bootstrap adăugate la proiectul nostru.
Există două modalități prin care puteți personaliza aceste componente: mă voi concentra asupra stilului. O modalitate este de a suprascrie stilurile cu o altă foaie de stil sau mai mică în ordinea lucrurilor compilate în dvs. .SCSS fișiere. Un alt mod, cel pe care îl recomand, este de a suprascrie existența .SCSS fișiere pe care le trageți cu Bower.
Să ne uităm la bootstrap.scss fișierul pe care l-am referit în secțiunea anterioară. Este, în esență, importat pentru celălalt .SCSS fișierele pe care trebuie să le compileze. Dacă vă uitați la fișiere și la ordinea în care lucrurile sunt importate, ar trebui să vedeți variables.scss fișier în partea de sus. Ca un proiect, Bootstrap a făcut o treabă excelentă de a extrage stiluri frecvent suprasolicitate sau reutilizate precum culorile și dimensiunile de fonturi aici.
Ce putem face este să copiați bootstrap.scss fișier și adăugați-l ca pe una din temele noastre .SCSS fișiere în css / Sass pliant. Odată ce facem asta, vom dori să schimbăm calea tuturor fișierelor pe care le importă pentru a le indica bower_components director.
Putem adăuga și noi pe noi .SCSS fișierele din acest fișier pentru a suprascrie lucrurile, cum ar fi variabilele sass din variables.scss. Să presupunem că doriți să actualizați culoarea de fundal. Există o variabilă în interiorul lui Bootstrap variables.scs fișier numit $ Corp-bg, și putem pur și simplu să o ignorăm în tema noastră variables.scss fişier.
Ambele exemple de mai sus s-ar schimba de la aceasta:
// variabile de bază și mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
la acest:
// variabile de bază și mixuri @import "... / ... / bower_components / bootstrap-sass-oficial / vânzător / active / foi de stil / bootstrap / variabile"; // Valorile implicite de suprascriere pentru bootstrap @import "variables"; @import "... / ... / bower_components / bootstrap-sass-oficial / furnizor / active / stylesheets / bootstrap / mixins";
Acesta este un lucru care este puțin mai greu de explicat fără o demonstrație concretă, așa că am pus un exemplu pe GitHub pentru a putea să aruncați o privire.
Aceasta incheie seria noastra despre Bower. Am vorbit despre ce este Bower, cum vă poate ajuta dezvoltarea WordPress și acum ați vorbit despre cum să o configurați.
Bower a devenit într-adevăr managerul de dependență de frontieră defacto, așa că sper că acest lucru vă ajută să cunoașteți conceptul și să înțelegeți cum să îl utilizați în propriile proiecte.
