Per costruire un sito web, ci affidiamo comunemente a una serie di librerie, sia sotto forma di CSS o JavaScript. Se dovessi costruire un piccolo sito web che mostrerà una presentazione di immagini, per esempio, il sito web probabilmente avrebbe bisogno di jQuery e di un plugin jQuery, Flexslider. Queste librerie sono le dipendenze per il funzionamento del sito web.
Mentre aggiungere queste librerie dovrebbe essere un compito facile, quando si tratta di un sito web su larga scala che richiede più librerie, tutto potrebbe essere ingombrante e incasinato dall’inizio. Potresti dover passare da un repository all’altro, scaricando ciascuna delle librerie, estraendo i pacchetti e infine mettendoli nella directory del tuo progetto.
Quando la nuova versione sarà disponibile dovrai fare tutto di nuovo (sembra un sacco di lavoro, vero?).
Lettura consigliata: Animate.CSS – CSS3 Library To Create Animation Easily
Se ti sembra quello che stai facendo da anni, questo articolo potrebbe valere la pena di essere letto. Qui vi mostreremo un comodo strumento chiamato Bower che rende la gestione delle librerie dei siti web un gioco da ragazzi. Controlliamo.
Inizio
Per usare Bower, devi installare Node.js. Poiché Bower è basato su Node.js, dovresti essere in grado di eseguire Bower su ogni piattaforma: Windows, Mac e Linux.
Una volta installato Node.js, apri il Terminale (o il Prompt dei comandi) ed esegui questa linea di comando per installare Bower.
npm install -g bower
Installazione delle librerie
Ora siamo pronti per usare Bower. Iniziamo a cercare una libreria che vogliamo mettere nella directory del nostro progetto. Supponendo che tu sia attualmente all’interno della directory, puoi digitare bower search {name of the library}. Qui, per esempio, ho cercato Normalize.css, una libreria per rendere coerente lo stile di un elemento in tutti i browser.
bower search normalize
Il comando elencherà un mucchio di risultati; non solo ci dà l’originale Normalize, ma ci mostra anche le versioni di Normalize che sono state convertite in LESS, Sass, Stylus, e le altre piattaforme.
Una volta scelto quale installare, possiamo digitare bower install {{name of the repository}}. In questo esempio, installerò Normalize LESS e jQuery.
bower install normalize-less jquery
Questo comando scaricherà l’ultima versione di normalize-less e jQuery, e la salverà in una nuova cartella chiamata bower_components; ora dovresti trovare la cartella creata nella directory del tuo progetto.
In alternativa, se vuoi installare la versione precedente della libreria, puoi eseguire il comando seguito dal numero della versione, in questo modo.
bower install jquery#1.10.0
Ora che abbiamo le librerie, Normalize e jQuery, nella directory del nostro progetto, possiamo utilizzarle facendo riferimento a jQuery dalla cartella bower_components nel documento HTML e importando Normalize LESS nell’altro foglio di stile LESS.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Se una delle librerie non è più usata nel sito, puoi disinstallarla facilmente con il comando bower uninstall, in questo modo.
bower uninstall normalize-less
Aggiornare i componenti di Bower
Diciamo che state lavorando al vostro progetto da diversi mesi, e alcune librerie che state usando (come jQuery) hanno rilasciato una nuova versione. In questa circostanza, possiamo usare Bower per aggiornare jQuery all’ultima versione. Ma prima controlliamo se la nuova versione è stata registrata in bower con il comando bower list.
L’ultima versione di jQuery, come potete vedere qui sotto, è 2.1.1.
Per aggiornare jQuery, possiamo digitare bower update jquery. Una volta che l’aggiornamento è stato completato, è possibile eseguire nuovamente il comando bower list per verificare la versione correntemente installata. Qui sotto, come puoi vedere, ora abbiamo l’ultima versione di jQuery.
Wrap Up
Bower è uno strumento davvero utile che penso dovresti sfruttare nel tuo progetto. È come avere un AppStore, ma per il tuo sito web – possiamo installare, aggiornare e rimuovere le librerie comodamente.
Nel prossimo articolo ci immergeremo in Bower ed esploreremo alcune caratteristiche più avanzate. Quindi rimanete sintonizzati.
