Share
Under hela serien har vi tittat på Bower och hur det kan förbättra vår WordPress-utvecklare. När vi paketerar upp den här serien ska vi titta på hur du installerar Bower för ditt nästa projekt. Specifikt kommer vi att täcka hur man installerar, uppdaterar och anpassar olika komponenter med Bower.
I tidigare inlägg pratade jag om vad Bower är och hur det kan hjälpa dig med din WordPress-utveckling. I det här inlägget kommer jag att gå igenom hur du installerar Bower för ditt projekt och några avancerade tekniker med det också.
Några av koncepten liknar Grunt, så jag föreslår att du tittar på ett tidigare inlägg, Ställa in Grunt för ditt nästa projekt. Vi kommer äntligen in i någon kod. Nu gör vi det!
Nyckeln till Bower i ett projekt är bower.json fil. Detta är vad som ska analyseras under a bower installation för dig och någon konsument av ditt projekt. Det är också nödvändigt för att spara beroenden, men mer om det senare.
Det första vi ska göra är att skapa en bower.json filen i projektets rotmapp. Jag föreslår att man börjar med minst namn, beskrivning och version.
Här är vad vi ska börja med:
"name": "tuts-bower", "description": "Exempel på projekt för handledning på Bower for Tuts +", "version": "1.0.0"
Nu när vi har en bower.json fil, låt oss lägga till Bootstrap till vårt projekt. Vi ska göra detta genom att gå till kommandoraden och skriva in bower install bootstrap-sass-official - spara. Detta borde skapa en bower_components mapp med a bootstrap-sass-officiell mapp inuti den, tillsammans med uppdatering av vår bower.json fil.
Så här ska det se ut nu:
"name": "tuts-bower", "description": "Exempel på projekt för handledning på Bower for Tuts +", "version": "1.0.0", "beroenden": "bootstrap-sass-official" ~ 3.1.1 "
Du kommer märka att beroenden läggs till och det finns bootstrap-sass-officiell tillsammans med det senaste versionsnumret.
En av mina favoritfunktioner i Bower är hur enkelt det är att uppdatera de komponenter jag använder i ett projekt. För dem som känner mig, är jag vanligtvis en för att prova den senaste versionen av biblioteket jag använder för närvarande. Så snart en ny release av Bootstrap kommer ut, drar jag det till ett projekt. Bower gör det väldigt lätt att göra detta.
I ovanstående exempel betyder tillde "~" framför versionsnumret helt enkelt att använda minst den här versionen. Det kommer även att uppdatera ditt projekt till någon ny patch release när du kör bower uppdatering. Till exempel, när / om Bootstrap uppdateringar till 3.1.2, kan du helt enkelt springa bower uppdatering och du kommer bli uppdaterad till den versionen.
Det finns ett antal olika sätt att du kan ange vilka versioner av varje komponent som ska användas.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Nu när vi har installerat Bootstrap, låt oss få det inbyggt i vårt projekt. För exemplet i det här inlägget kommer jag bara att lägga till stilar för projektet, inte JavaScript eller typsnitt. Jag inkluderar dessa i hela projektet på GitHub.
Det första vi kommer att vilja göra är att skapa en style.scss fil som vi kommer att kompilera i vår style.css-fil i roten till vårt projekt. Jag brukar skapa en struktur som css / Sass / Placera sedan alla mina .SCSS filer i sass-mappen. Låt oss fortsätta och skapa vår style.scss filen in där.
Eftersom vi gör ett tema behöver vi några kommentarer högst upp, då kan vi importera i bootstrap.scss fil som vi drog ner med Bower. Du måste räkna ut vägen till den, använd sedan en @importera att föra in det så här:
/ *! Tema Namn: Tuts Bower Theme URI: http://code.tutsplus.com/ Version: 1.0.0 Beskrivning: Exempel projekt för handledning på Bower for Tuts + Författare: Jason Bradley Författare URI: http://jasonbradley.me Licens: GNU General Public License v3.0 Licens URI: http://www.gnu.org/licenses/gpl-3.0.html * / // Importera Bootstrap-stilar @ import "... / ... / bower_components / bootstrap-sass-official / säljare / tillgångar / formatmallar / bootstrap ';
Jag använder grunt-contrib-sass i mitt exempelprojekt, nu när vi kör vår Sass-kompilator, kommer den att kompilera bootstrap.scss in i vårt style.css fil. Nu har vi alla Bootstrap-stilar till vårt projekt.
Det finns två sätt att anpassa dessa komponenter: Jag ska fokusera på styling. Ett sätt är att åsidosätta stilar med ett annat stilark eller lägre i ordningen av saker som sammanställs i din .SCSS filer. Ett annat sätt är den jag rekommenderar att åsidosätta befintliga .SCSS filer som du drar in med Bower.
Låt oss titta på bootstrap.scss fil som jag hänvisade till i föregående avsnitt. Det importerar väsentligen till den andra .SCSS filer som den behöver sammanställa. Om du tittar på filerna och den ordning i vilken saker importeras ska du se variables.scss filen överst. Som ett projekt har Bootstrap gjort ett bra jobb med att extrahera vanligtvis överdrivna eller återanvända stilar som färger och teckenstorlekar här in.
Vad vi kan göra är att kopiera bootstrap.scss fil och lägg till den som ett av våra temas .SCSS filer i css / Sass mapp. När vi gör det så vill vi ändra sökvägen för alla de filer som den importerar för att peka på vårt bower_components katalog.
Vi kan också lägga till våra egna .SCSS filer i den här filen för att åsidosätta saker, som sass-variablerna i variables.scss. Låt oss säga att du ville uppdatera bakgrundsfärgen. Det finns en variabel inuti Bootstraps variables.scs fil som heter $ Kropps bg, och vi kan helt enkelt åsidosätta det i vårt tema variables.scss fil.
Båda exemplen ovan skulle förändras från detta:
// Kärnvariabler och mixins @ import "bootstrap / variables"; @import "bootstrap / mixins";
till detta:
// Kärnvariabler och mixins @ import "... / ... / bower_components / bootstrap-sass-official / leverantör / tillgångar / stylesheets / bootstrap / variables"; // Övergripande standard Bootstrap variabler @ import "variabler"; @import "... / ... / bower_components / bootstrap-sass-official / leverantör / tillgångar / stylesheets / bootstrap / mixins";
Det här är en sak som är lite svårare att förklara utan en konkret demo, så jag sammanställer ett exempel på GitHub så att du kan ta en titt.
Detta avslutar vår serie på Bower. Vi pratade om vad Bower är, hur det kan hjälpa din WordPress-utveckling och nu pratade om hur man sätter upp det.
Bower har verkligen blivit defacto frontend dependence manager, så jag hoppas det hjälper dig att förstå konceptet och förstå hur du använder det i dina egna projekt.
