Cosa c’è di così grande in Bower?

Quello che segue è un post di Dan Sundy di Helios Design Labs. Dan ci spiegherà come usare Bower e ci spiegherà le ragioni per farlo, dal punto di vista di qualcuno che all’inizio ha resistito all’idea.

Quando ho iniziato a lavorare con Bower non ne ho capito il fascino. “Seriamente?” Ho pensato. “Ora è troppo lavoro scaricare e decomprimere un file?” Inoltre non ero molto entusiasta di stipare un mucchio di nuovi comandi in un cervello che era già gonfio di Git, Grunt, Gulp, Jekyll, Node, ecc.

Ci sono due cose che direi a quella versione di me stesso di mezzo anno fa. Primo, Bower può fare un po’ di più che scaricare uno o due file. Secondo, spendere un’ora per imparare uno strumento che elimina un compito ripetitivo ne vale la pena.

Prima le cose importanti: Che diavolo è Bower?

Per chi non lo sapesse, Bower è un gestore di pacchetti. È bravo a, beh, gestire i pacchetti, qualsiasi cosa per la quale si dipenda da un autore esterno. Buoni esempi sono framework CSS come Bootstrap, librerie come jQuery, plugin jQuery, o framework JavaScript come Angular. Il sito ufficiale di Bower, Bower.io, probabilmente lo dice meglio:

I siti web sono fatti di molte cose – framework, librerie, risorse, utilità e arcobaleni. Bower gestisce tutte queste cose per te.

Bower funziona recuperando e installando pacchetti da ogni parte, prendendosi cura di cercare, trovare, scaricare e salvare le cose che stai cercando.

Prerequisiti

Ci sono alcune cose di cui avrai bisogno prima di iniziare a lavorare con Bower:

• La linea di comando. Sì, è uno strumento a riga di comando (dai, non è così spaventoso).
• Node e NPM. Bower è un modulo di Node quindi per averlo hai bisogno di NPM.
• Git. I pacchetti di Bower sono repo di Git. Bower usa Git per capire dove si trova il pacchetto, su quale versione si trova – questo genere di cose.
• Installazione globale. Tecnicamente potresti installarlo in ogni progetto, ma probabilmente vorrai averlo ovunque.

Per installare Bower globalmente:

$ npm install -g bower

Nota: A seconda della tua configurazione potresti dover usare `sudo npm install -g bower` per installarlo globalmente.

Le basi

Per iniziare, immagina la struttura delle directory per un nuovo sito. Il mio di solito assomiglia a questo:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

C’è una cartella “src” dove viene fatto il grosso del lavoro di sviluppo. Un task di build di Gulp alla fine preparerà tutto e compilerà il nostro codice ottimizzato in una cartella `dist` pronta per la produzione.

Diciamo che vuoi includere jQuery in questo progetto. Di solito si va su jquery.com, si trova e si clicca sul link di download corretto, poi si decomprime e si mettono i file nella directory giusta.

Con Bower, basta eseguire il seguente comando:

$ bower install jquery

Ora è apparsa una directory `bower_components` con una cartella `jquery`.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery ha reso facile ottenere il suo codice creando e registrando un pacchetto per Bower. La maggior parte delle librerie e dei framework più popolari hanno fatto lo stesso. Se vuoi controllare che la risorsa che vuoi sia un pacchetto Bower puoi fare una ricerca:

$ bower search <package-name>

Se non è registrato, è ancora possibile prendere i repo con endpoint git come questo:

$ bower install git://github.com/example-user/example-package.git

Avanzato: Se volete essere fantasiosi, potete anche installare repository privati a cui avete accesso. Guarda questo video tutorial di Rob Dodson.

Ecco alcuni altri comandi di base che puoi usare per visualizzare e gestire le risorse che hai installato.

Elenca tutti i tuoi pacchetti:

$ bower list

Ottieni informazioni su qualsiasi pacchetto che hai installato:

$ bower info <package-name>

Controlla gli aggiornamenti con:

$ bower check-new

Quindi, se ci sono aggiornamenti, aggiorna un pacchetto:

$ bower update <package-name>

Ma forse l’aggiornamento all’ultima versione ha rotto qualcosa.

Installa qualsiasi versione specifica, vecchia o nuova, con:

$ bower install <package-name>#<version>

Questa non è sicuramente una lista esaustiva. Se sei interessato ad iniziare, ti consiglio di fare un progetto di prova e lavorare attraverso uno dei molti tutorial che si possono trovare online. Questo di Treehouse è ottimo: Getting Started with Bower. Poi puoi approfondire tutti i comandi controllando le API di Bower.

Ehi, ma aspetta, c’è di più!

Il piccolo team di sviluppo con cui lavoro ha usato Bower nell’ultimo anno circa. Mentre la gestione dei pacchetti tramite la riga di comando era fantastica, non mi ha convinto finché non abbiamo iniziato a usare i file `bower.json` e `.bowerrc`.

.bowerrc

Il file `.bowerrc` può fare un sacco di cose, ma l’ho visto soprattutto usato per cambiare il nome e la posizione della directory `bower_components`. (Questo mi ha reso felice perché odiavo avere quella cartella casuale `bower_components` che fluttuava nella radice del progetto).

Ecco come può apparire un file `.bowerrc`:

{ "directory": "src/components"}

L’opzione directory invia i pacchetti in una posizione che ha più senso – in questo caso, la directory `src/`. Dai un’occhiata alla nuova struttura del progetto:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Nota che la cartella `bower_components/` è sparita e c’è una cartella `components/` nella directory `src/`.

Avanzato: È una buona idea usare qualcosa come gulp-usemin o grunt-usemin per prendersi cura della concatenazione e della minificazione di tutti gli stili e script extra.

Come può aiutarci il file `bower.json`?

bower.json

Il file `bower.json` assomiglia molto al `package.json` di Node. È un file manifesto che permette di specificare le opzioni. Diamo un’occhiata ad un esempio (che può essere generato eseguendo bower init):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Molte di queste opzioni sono presenti nel caso tu stia registrando questo repo come un pacchetto Bower. Ma vedi l’oggetto devDependencies in fondo? Quell’oggetto sarà aggiornato automaticamente se si aggiunge --save-dev ad un comando Bower, come questo:

$ bower install jquery --save-dev

Ora se un altro sviluppatore esegue `bower install`, il computer installerà tutto ciò che è presente nella lista devDependencies nella cartella specificata in `.bowerrc`. Allo stesso modo, se uno sviluppatore aggiunge un pacchetto o aggiorna la versione di un pacchetto usando --save-dev, l’intero team può sincronizzare le proprie risorse usando bower install (dopo aver tirato giù l’ultima versione del file `bower.json`).

Siccome tutto il lavoro di ricerca e raccolta è stato eliminato con il file `bower.json`, non c’è più bisogno di fare versioni di quelle risorse. La cartella `components/` può essere aggiunta al file `.gitignore` per mantenere il tuo repository snello e medio.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Parting Shot

Stavo ascoltando un episodio del mio podcast preferito di web dev (wink, wink) e i conduttori stavano discutendo se Bower fosse effettivamente utile o solo una moda passeggera. Si chiedevano se il suo scopo è quello di rendere più facile il download o se è usato per aggiornare le versioni delle vostre librerie, come fanno le gemme di rubino. Hanno parlato di essere un “NPM front-endy” (sto parafrasando).

Il bello è che fa tutte queste cose. Puoi usarlo per scaricare e mantenere aggiornato il codice, ma puoi andare oltre. Bower può aiutarvi a mantenere sincronizzate le librerie e i framework del progetto, o integrarlo con altri strumenti come Yeoman per tagliare ancora più tempo dalla vostra configurazione di sviluppo. Inoltre, è possibile creare e registrare i propri pacchetti Bower in modo da poterli installare e aggiornare in tutti i progetti rapidamente (e in modo sicuro).

Oh, e per quanto riguarda la domanda che ha dato inizio alla discussione: Non useresti Bower per installare WordPress, e WordPress non dovrebbe essere nella tua cartella `bower_components`. Ma potreste usare Bower all’interno del vostro tema WordPress per gestire risorse esterne (basta non caricare librerie come jQuery che sono già incluse nel core di WordPress).

.