Share
In questa serie, abbiamo dato un'occhiata a Bower e come può migliorare il nostro sviluppatore WordPress. Mentre concludiamo questa serie, daremo un'occhiata a come impostare Bower per il tuo prossimo progetto. Nello specifico, illustreremo come installare, aggiornare e personalizzare vari componenti usando Bower.
Nei post precedenti, ho parlato di cosa sia Bower e di come possa aiutarti con lo sviluppo di WordPress. In questo post, ti spiegherò come impostare Bower per il tuo progetto e alcune tecniche avanzate con esso.
Alcuni concetti sono simili a Grunt, quindi suggerirei di dare un'occhiata a un post precedente, Configurazione di Grunt per il tuo prossimo progetto. Stiamo finalmente entrando in qualche codice. Facciamolo!
La chiave per Bower in un progetto è il bower.json file. Questo è ciò che verrà analizzato durante a installazione di bower per te e qualsiasi consumatore del tuo progetto. È anche necessario per salvare le dipendenze, ma ne riparleremo più avanti.
La prima cosa che faremo è creare un bower.json file nella cartella principale del progetto. Suggerirei di iniziare almeno con il nome, la descrizione e la versione.
Ecco cosa inizieremo con:
"name": "tuts-bower", "description": "Progetto di esempio per l'esercitazione su Bower per Tuts +", "versione": "1.0.0"
Ora che abbiamo un bower.json file, aggiungiamo Bootstrap al nostro progetto. Lo faremo andando alla riga di comando e digitando bower installa bootstrap-sass-official --save. Questo dovrebbe creare un bower_components cartella con a bootstrap-sass-ufficiale cartella al suo interno, insieme all'aggiornamento del nostro bower.json file.
Ecco come dovrebbe apparire ora:
"name": "tuts-bower", "description": "Progetto di esempio per tutorial su Bower per Tuts +", "versione": "1.0.0", "dipendenze": "bootstrap-sass-official": " ~ 3.1.1 "
Noterai che le dipendenze sono state aggiunte e che esiste bootstrap-sass-ufficiale insieme all'ultimo numero di versione.
Una delle mie caratteristiche preferite di Bower è quanto sia semplice aggiornare i componenti che utilizzo in un progetto. Per quelli che mi conoscono, di solito sono uno a provare l'ultima versione di tutte le librerie che sto attualmente usando. Non appena verrà rilasciata una nuova versione di Bootstrap, la inserirò in un progetto. Bower rende davvero facile farlo.
Nel nostro esempio sopra, la tilde "~" davanti al numero di versione significa semplicemente usare almeno questa versione. Quando esegui, aggiornerà anche il tuo progetto a qualsiasi nuova versione di patch aggiornamento del pergolato. Ad esempio, quando / se Bootstrap si aggiorna a 3.1.2, puoi semplicemente eseguire aggiornamento del pergolato e verrai aggiornato a quella versione.
Esistono diversi modi per specificare quali versioni di ciascun componente utilizzare.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Ora che abbiamo installato Bootstrap, incorporiamolo nel nostro progetto. Per l'esempio in questo post aggiungerò solo gli stili al progetto, non il codice JavaScript o Fonts. Li includo nel progetto completo su GitHub.
La prima cosa che vorremmo fare è creare un style.scss file che compileremo nel nostro file style.css nella radice del nostro progetto. Generalmente creo una struttura simile css / sass / poi metti tutti i miei .SCSS file nella cartella sass. Andiamo avanti e crea il nostro style.scss file lì.
Dato che stiamo creando un tema, abbiamo bisogno di alcuni commenti in alto, quindi possiamo importarlo nel bootstrap.scss file che abbiamo abbattuto con Bower. Dovrai capire il percorso, quindi usare un @importare per farlo entrare così:
/ *! Nome del tema: URI del tema Bowers di Tuts: http://code.tutsplus.com/ Versione: 1.0.0 Descrizione: Progetto di esempio per tutorial su Bower per Tuts + Autore: Jason Bradley Autore URI: http://jasonbradley.me Licenza: GNU Licenza pubblica generica v3.0 URI di licenza: http://www.gnu.org/licenses/gpl-3.0.html * / // Importa gli stili di bootstrap @import '... / ... / bower_components / bootstrap-sass-official / vendor / assets / fogli di stile / bootstrap ';
Sto usando grunt-contrib-sass nel mio progetto di esempio, ora quando eseguiremo il nostro compilatore Sass, verrà compilato il file bootstrap.scss nel nostro style.css file. Ora abbiamo tutti gli stili di Bootstrap aggiunti al nostro progetto.
Esistono due modi per personalizzare questi componenti: mi concentrerò sullo stile. Un modo è quello di sovrascrivere gli stili con un altro foglio di stile o inferiore nell'ordine in cui le cose vengono compilate nel tuo .SCSS File. Un altro modo, quello che raccomando, è di ignorare l'esistente .SCSS file che stai inserendo con Bower.
Diamo un'occhiata a bootstrap.scss file che ho fatto riferimento nella sezione precedente. Si sta essenzialmente importando all'altro .SCSS i file che deve compilare. Se guardi i file e l'ordine in cui le cose vengono importate, dovresti vedere il variables.scss file in alto. Come progetto, Bootstrap ha fatto un ottimo lavoro estraendo stili comunemente sovrascritti o riutilizzati come colori e dimensioni dei caratteri qui.
Quello che possiamo fare è copiare il bootstrap.scss file e aggiungilo come uno dei nostri temi .SCSS file nel css / sass cartella. Una volta fatto, vorremmo cambiare il percorso di tutti i file che importa in modo che puntino al nostro bower_components elenco.
Possiamo anche aggiungere il nostro .SCSS file all'interno di questo file per sovrascrivere le cose, come le variabili sass in variables.scss. Supponiamo che tu voglia aggiornare il colore di sfondo. C'è una variabile all'interno di Bootstrap variables.scs file chiamato $ Body-bg, e possiamo semplicemente scavalcarlo nel nostro tema variables.scss file.
Entrambi gli esempi sopra cambieranno da questo:
// Core variables and mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
a questo:
// Core variables and mixins @import "... / ... / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / variables"; // Sovrascrivere le variabili Bootstrap predefinite @import "variabili"; @import "... / ... / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / mixins";
Questa è una cosa che è un po 'più difficile da spiegare senza una demo concreta, quindi ho creato un esempio su GitHub in modo da poter dare un'occhiata.
Questo conclude la nostra serie su Bower. Abbiamo parlato di Bower, di come può aiutare lo sviluppo di WordPress e ora di come impostarlo.
Bower è davvero diventato il gestore delle dipendenze frontend defacto, quindi spero che questo ti aiuti a conoscere il concetto e a capire come utilizzarlo nei tuoi progetti.
