Guida per principianti: Come iniziare con il gestore di pacchetti Bower

Bower è un gestore di pacchetti front-end costruito da Twitter. Conosciuto anche come un gestore di pacchetti per il web, bower è usato nei moderni progetti open source e closed source per risolvere molti problemi ricorrenti.

Questo articolo ti guiderà attraverso l’uso base di bower e l’uso avanzato per un ambiente di squadra. Condividerò anche il mio flusso di lavoro personale quando ho a che fare con bower con un team di sviluppatori.

Problemi che bower risolve

Sviluppare un sito web o un’applicazione web oggi richiede l’uso di molti framework front-end, come Bootstrap, jQuery, Angular, ecc.

1. Scaricare ognuno di questi pacchetti richiede la navigazione del sito web corrispondente, trovare la versione appropriata, scaricarla, decomprimere e infine spostare i file principali nella cartella del venditore. (es: il file main nel pacchetto jquery è jquery.js)
2. Dopo aver scaricato i file nel tuo repository, devi visitare manualmente tutti i siti web di cui sopra (jquery.com, angularjs.com, bootstrap.com) per controllare gli aggiornamenti e indovina un po’? Se c’è un aggiornamento, devi ripetere il passo 1 per ogni pacchetto/aggiornamento.
3. Prevediamo di usare Bootstrap che richiede jQuery (chiamato dipendenza). Quando vai su getbootstrap.com per scaricarlo, dovrai poi navigare su jquery.com per scaricare anche jquery.

In sintesi, bower ti aiuta a gestire i tuoi pacchetti front-end. Ti aiuta a scaricarli, ad aggiornarli e a risolvere le loro dipendenze.

Ci sono altri benefici dell’uso di bower che discuteremo più avanti in questo articolo, ma questi sono i problemi principali che bower sta risolvendo per noi!

Installazione e uso

Installazione di bower

Bower è un modulo di nodo, e può essere installato con il seguente comando:

npm install -g bower

Questo installerà bower globalmente sul tuo sistema.

Se non hai node installato sul tuo computer, devi scaricarlo da nodejs.org.

Installazione dei pacchetti

Per lo scopo di questo tutorial, useremo bower per installare bootstrap. Il processo funzionerà per qualsiasi altro pacchetto.

bower install bootstrap

Questo installerà bootstrap nella cartella appena creata /bower_components (a livello di root).

Nota che questo installerà bootstrap 3.2.x che è l’ultima versione al momento di scrivere questo articolo. Se vogliamo installare l’ultima versione 2.x, dobbiamo eseguire:

bower install bootstrap#2

Possiamo anche specificare la versione esatta con

bower install bootstrap#2.2

Nota inoltre che poiché bootstrap dipende da jQuery, l’esecuzione di uno qualsiasi dei comandi precedenti installerà automaticamente anche jQuery, per risolvere le dipendenze di bootstrap.

Aggiornare i pacchetti

Se vogliamo aggiornare tutti i nostri pacchetti, dobbiamo solo eseguire il seguente comando:

bower update

Includere gli script

L’ultimo passo sarebbe quello di includere gli stili e gli script scaricati. Dato che risiedono tutti nella cartella /bower_components, dovremo scrivere quanto segue:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Flusso di lavoro comune in un ambiente di squadra

Dopo aver usato bower nel modo minimalista di cui sopra, ci rendiamo conto che introduce nuovi problemi quando si lavora con il controllo dei sorgenti e/o in un ambiente di squadra.

1. Bower non scarica solo i file della distribuzione principale, ma scarica anche l’intero repository di jquery, bootstrap, etc. Questo può gonfiare la cronologia del controllo di revisione e non è assolutamente raccomandato.
2. Anche i file della distribuzione principale (dist/jquery.js, dist/css/bootstrap.css) non sono minificati, e bower non minificherà mai i file della distribuzione perché è un gestore di pacchetti, non uno strumento di compilazione.
3. Devi assicurarti manualmente di caricare jquery prima di caricare bootstrap (perché bootstrap ha jquery come dipendenza).
4. Devi aggiungere manualmente un nuovo tag <script> per ogni nuovo pacchetto (e forse un nuovo <link rel=”stylesheet”/> se contiene file css.

Passo 1: Installa bower

e assicurati che ogni persona del tuo team lo installi globalmente.

Passo 2: Escludi bower_components dal controllo di revisione

Aggiungi bower_components al tuo .gitignore. Questo istruirà Git a ignorare tutto il file bower_components. In questo modo ogni sviluppatore (in un team) avrà una copia locale delle librerie front-end richieste. Non preoccuparti che ogni sviluppatore abbia una versione diversa. Lo risolveremo tra poco.

Passo 3: Installare i pacchetti richiesti

Installare i pacchetti front-end richiesti, diciamo jQuery e bootstrap.

bower install jquery#1 bootstrap --save

Il flag --save istruirà bower a creare (se non esiste) un file bower.json e includervi i pacchetti installati. Questo è un esempio del file bower.json generato:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

notare come ci sia un vincolo di versione ~3.2.0. Questo assicurerà che tutti i membri del team lavoreranno sulla stessa versione di bootstrap, tilde significa che il motivo dovrebbe essere ragionevolmente vicino al motivo specificato.

Passo 4: I membri del team possono ora eseguire: bower install

Quando ogni sviluppatore che ha accesso al repository esegue bower install, esso installa tutte le dipendenze (bootstrap e jquery in questo caso).

Per i passi rimanenti, abbiamo bisogno di Grunt o Gulp.

Passo 5: Integrare con gli strumenti di compilazione

Grunt e Gulp sono strumenti di compilazione, usati per automatizzare compiti comuni e ricorrenti, come minificare gli script, ottimizzare le immagini, minificare i fogli di stile, compilare less/sass/stylus. Bower funziona bene con Grunt/Gulp a causa dei plugin già pronti. In questo tutorial coprirò Grunt, tuttavia troverete un’alternativa simile per Gulp.

Grunt ha un plugin chiamato grunt-bower-concat che compila tutti i file principali per ogni componente bower che avete in un file bower.js. Che puoi poi usare Grunt per minificare (uglify), ottenendo bower.min.js.

Grunt bower concat configurazione di esempio:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Nota: se stai usando Gulp, esiste un plugin simile a: https://github.com/ck86/main-bower-files/

Nota: per Ruby on Rails e altri, controlla il seguente link: http://bower.io/docs/tools/

Passo 6: Includere gli script

Con i seguenti script, includi i tuoi script una volta e ogni volta che aggiungi un nuovo pacchetto front-end, sarà automaticamente concatenato nel file corrispondente (bower.css o bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Passo 7: Più automazione bower

Puoi automatizzare ulteriormente bower. Diciamo che stai lavorando in un team e aggiungi un nuovo componente bower (bower install typeahead.js). Non vuoi mandare un’email a tutti dicendo loro di eseguire bower install. Possiamo automatizzarlo con grunt-watch e grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Quello che succede qui, è che ogni volta che si modifica il file bower.json, grunt esegue automaticamente il comando bower install. Quando commetti le tue modifiche, e il tuo collega tira il tuo codice, grunt-watch rileverà un cambiamento in bower.json che poi eseguirà automaticamente il comando bower install.

Come personalizzo bower nel mio flusso di lavoro

Quando si tratta di gestori di pacchetti, ne uso molti nel mio flusso di lavoro. Uso npm per gestire grunt e i suoi plugin. Composer per gestire le mie librerie di venditori PHP, bower per gestire i miei pacchetti front-end e infine ruby gems per gestire Capistrano (un pacchetto che viene utilizzato per automatizzare le distribuzioni).

Ho deciso che voglio che npm sia il main gestore dei pacchetti. Così ho iniziato ad avvolgere tutti i comandi principali all’interno della mia sezione di script package.json. Per esempio:

• npm run migrate: migra il database e genera i file di migrazione (specifici per PHP)
• npm test: esegue i test unitari
• npm run protractor: esegue i test end-2-end
• npm run deploy-staging: distribuisce il codice alle macchine di staging
• npm run deploy-production: distribuisce il codice alle macchine di produzione
• npm start: esegue npm install (pre-start), bower update (post-installazione) e infine grunt

Ecco cosa succede dietro le scene. Considerate il seguente file package.json:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Se guardate la sezione degli script, vedrete che prestart: eseguiamo npm install. Poiché il package.json è incluso nel nostro repository, se qualcuno aggiunge una nuova devDependency dobbiamo essere in grado di installare facilmente la stessa versione. (Si noti che pre start è il primo comando attivato quando si esegue npm start).

post install (che è attivato da npm install), esegue il seguente comando: bower update --unsafe-perm(il --unsafe-perm è stato aggiunto solo perché bower-update stava fallendo su un Mac). Questo manterrà tutti i nostri pacchetti front-end aggiornati.

start:e infine il comando start esegue grunt.

Con questa configurazione, ogni volta che uno sviluppatore del tuo team vuole iniziare a lavorare sul progetto, semplicemente naviga nella directory del progetto ed esegue npm start per iniziare a lavorare subito.

Utilizzare questo approccio è molto efficace perché si possono includere altri script da eseguire da npm, come npm run migrate, npm run deploy-staging, ecc.

Utilizzando questo approccio, non solo stiamo incoraggiando l’uso della riga di comando e l’automazione, ma lo stiamo effettivamente rendendo uniforme.

Si può vedere che abbiamo legato npm install con bower update. Puoi fare un ulteriore passo avanti e legare tutti gli altri gestori di pacchetti con npm install. In tal caso, l’esecuzione di npm install eseguirà tutti i seguenti comandi:

• bower update
• composer update --no-dev
• gem update

Avvolgendo il tutto

Bower è uno strumento incredibile che risolve problemi fondamentali delle moderne applicazioni web. Tutte le persone sono incoraggiate ad usarlo (e anche il nuovo Visual Studio viene fornito con Bower e Grunt/Gulp al giorno d’oggi).

Può essere facilmente impostato quando si sviluppa da soli, tuttavia se si lavora in un team, è necessario seguire i passi presentati in questo articolo per garantire un flusso di lavoro regolare tra tutti gli sviluppatori del team.