Share
Gjennom hele denne serien har vi tatt en titt på Bower og hvordan det kan forbedre vår WordPress-utvikler. Når vi pakker opp denne serien, skal vi se på hvordan du konfigurerer Bower for ditt neste prosjekt. Spesielt skal vi dekke hvordan du installerer, oppdaterer og tilpasser ulike komponenter ved hjelp av Bower.
I tidligere innlegg snakket jeg om hva Bower er, og hvordan det kan hjelpe deg med WordPress-utviklingen. I dette innlegget skal jeg gå gjennom hvordan du setter opp Bower for prosjektet ditt og noen avanserte teknikker med det også.
Noen av konseptene ligner Grunt, så jeg vil foreslå å ta en titt på et tidligere innlegg, Sette opp Grunt for ditt neste prosjekt. Vi er endelig kommet inn i noen kode. La oss gjøre dette!
Nøkkelen til Bower i et prosjekt er bower.json fil. Dette er hva som vil bli analysert under a bower installasjon for deg og enhver forbruker av prosjektet ditt. Det er også nødvendig for å redde avhengigheter, men mer om det senere.
Det første vi skal gjøre er å lage en bower.json filen i prosjektets rotmappe. Jeg vil foreslå at du starter med minst navnet, beskrivelsen og versjonen.
Her er hva vi skal begynne med:
"navn": "tuts-bower", "beskrivelse": "Eksempel prosjekt for opplæring på Bower for Tuts +", "versjon": "1.0.0"
Nå som vi har a bower.json fil, la oss legge til Bootstrap til vårt prosjekt. Vi skal gjøre dette ved å gå til kommandolinjen og skrive inn bower install bootstrap-sass-offisiell - lagre. Dette skal skape en bower_components mappe med a bootstrap-sass-offisiell mappe inni den, sammen med å oppdatere vår bower.json fil.
Slik ser det ut akkurat nå:
"name": "tuts-bower", "description": "Eksempel prosjekt for opplæring på Bower for Tuts +", "versjon": "1.0.0", "avhengigheter": "bootstrap-sass-official" ~ 3.1.1 "
Du vil merke avhengigheter er lagt til og det er bootstrap-sass-offisiell sammen med det nyeste versjonsnummeret.
En av mine favorittfunksjoner i Bower er hvor enkelt det er å oppdatere komponentene jeg bruker i et prosjekt. For de som kjenner meg, er jeg vanligvis en til å prøve den nyeste versjonen av hvilke biblioteker jeg bruker for øyeblikket. Så snart en ny utgave av Bootstrap kommer ut, drar jeg det inn i et prosjekt. Bower gjør det veldig enkelt å gjøre dette.
I ovennevnte eksempel betyr tilde "~" foran versjonsnummeret bare å bruke minst denne versjonen. Det vil også oppdatere prosjektet til en ny oppdateringspakke når du kjører bower oppdatering. For eksempel, når / hvis Bootstrap oppdateres til 3.1.2, kan du bare kjøre bower oppdatering og du vil bli oppdatert til den versjonen.
Det finnes flere forskjellige måter du kan angi hvilke versjoner av hver komponent som skal brukes.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Nå som vi har installert Bootstrap, la oss få det innbygget i prosjektet vårt. For eksemplet i dette innlegget kommer jeg bare til å legge til stilene til prosjektet, ikke JavaScript eller Fonter. Jeg inkluderer disse i hele prosjektet på GitHub.
Det første vi skal gjøre er å lage en style.scss fil som vi skal kompilere inn i vår style.css-fil i roten til prosjektet vårt. Jeg lager vanligvis en struktur som css / sass / plasser så alle mine .SCSS filer i sassmappen. La oss gå videre og lage vår style.scss filen der inne.
Siden vi lager et tema, trenger vi noen kommentarer øverst, så kan vi importere i bootstrap.scss fil som vi dro ned med Bower. Du må finne veien til den, bruk så en @importere å bringe det inn slik:
/ *! Tema navn: Tuts Bower Theme URI: http://code.tutsplus.com/ Versjon: 1.0.0 Beskrivelse: Eksempel prosjekt for opplæring på Bower for Tuts + Forfatter: Jason Bradley Forfatter URI: http://jasonbradley.me Lisens: GNU Generell offentlig lisens v3.0 Lisens URI: http://www.gnu.org/licenses/gpl-3.0.html * / // Import Bootstrap stiler @import '... / ... / bower_components / bootstrap-sass-offisiell / leverandør / eiendeler / stilark / bootstrap ';
Jeg bruker grunt-contrib-sass i mitt eksempel prosjekt, nå når vi kjører vår Sass compiler, vil den kompilere bootstrap.scss inn i vår style.css fil. Nå har vi alle Bootstrap-stilene lagt til i prosjektet vårt.
Det er to måter du kan tilpasse disse komponentene på: Jeg skal fokusere på stylingen. En måte er å overstyre stilene med et annet stilark eller lavere i rekkefølgen av ting som blir kompilert i din .SCSS filer. En annen måte, den jeg anbefaler, er å tilsidesette eksisterende .SCSS filer som du trekker inn med Bower.
La oss se på bootstrap.scss fil som jeg refererte til i forrige seksjon. Den importerer i hovedsak til den andre .SCSS filer den trenger å kompilere. Hvis du ser på filene og rekkefølgen der ting blir importert, bør du se variables.scss fil øverst. Som et prosjekt har Bootstrap gjort en god jobb med å trekke ut ofte overstyrte eller gjenbrukte stiler som farger og skriftstørrelser inn her.
Hva vi kan gjøre er å kopiere bootstrap.scss filen og legg den til som et av temaene våre .SCSS filer i css / sass mappe. Når vi gjør det, vil vi ønske å endre banen til alle filene den importerer for å peke på vår bower_components katalog.
Vi kan også legge til vår egen .SCSS filer i denne filen for å overstyre ting, som sass-variablene i variables.scss. La oss si at du ønsket å oppdatere bakgrunnsfargen. Det er en variabel innsiden av Bootstrap's variables.scs fil kalt $ Body-bg, og vi kan enkelt tilsidesette det i vårt tema variables.scss fil.
Begge eksemplene ovenfor ville endres fra dette:
// Kjernevariabler og mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
til dette:
// Kjernevariabler og mixins @import "... / ... / bower_components / bootstrap-sass-offisiell / leverandør / eiendeler / stilark / bootstrap / variabler"; // Overstyring av standard Bootstrap-variabler @ import "variabler"; @import "... / ... / bower_components / bootstrap-sass-offisiell / leverandør / eiendeler / stylesheets / bootstrap / mixins";
Dette er en ting som er litt vanskeligere å forklare uten en konkret demo, så jeg legger sammen et eksempel på GitHub slik at du kan ta en titt.
Dette avslutter vår serie på Bower. Vi snakket om hva Bower er, hvordan det kan hjelpe din WordPress-utvikling og nå snakket om hvordan du setter opp det.
Bower har virkelig blitt defacto frontend dependence manager, så jeg håper dette hjelper deg med å forstå konseptet og forstå hvordan du bruker det i dine egne prosjekter.
