Sviluppa dal Vivo grazie a BrowserSync e Grunt

Ormai dovresti sapere che la mia missione non è soltanto quella di mostrarti nuove funzionalità ma piuttosto anche quella di scoprire nuove tecniche e tecnologie che ti permettono di velocizzare il tuo lavoro, in fin dei conti più veloce sarai più tempo potrai investire in altre attività.

Ebbene nel corso della vita di questo blog abbiamo parlato diverse volte di strumenti e tecniche che ti permettono di migliorare le tue performance come ad esempio quando ti ho parlato dei nuovi modi per scrivere HTML, di precompilati che velocizzano la creazione di CSS e quando di veri e propri editor.

Al momento manca all’appello un bello studio sul browser dello sviluppatore per eccellenza (IMO non può che essere Firefox Developer Edition) ma quest’oggi ho deciso di focalizzare le mie energie nell’eliminare un’azione tanto comune quanto fastidiosa per ogni developer: il refresh!

Sono sicuro che una volta imparata la scorciatoia F5 o CTRL+R ti sei accorto che, in fin dei conti, non è proprio una rottura. Tutto quello che devi fare è cambiare finestra attiva e continuare a usare uno strumento a te comune, la tastiera. Però se ci pensi un attimo allo stesso tempo ci sono dei piccoli momenti morti che sarebbe meglio evitare…

Ovviamente in questo contesto porto il concetto ai massimi possibili, ma comunque sia perdere qualche secondo per:

  • cambiare finestra,
  • aggiornare la pagina,
  • e aspettare i comodi del browser

Non è sicuramente un’attività che va a velocizzarsi nel tempo…

Queste non sono attività che rubano (di per sé) dei minuti al tuo lavoro, in fin dei conti sono soltanto qualche frazione di secondo… Ma hai mai pensato a quante volte ripeti queste azioni? Hai mai provato a contare quanti minuti spendi soltanto per vedere sul browser i risultati del tuo codice?

Se devo essere onesto con te, neanche io mi sono messo a contare precisamente i secondi, ma ti posso assicurare che a seconda del tempo che passi a scrivere codice, a fine giornata potrai risparmiare da pochi minuti fino a delle vere e proprie ore!

La mia prova è stata quella di fare un piccolo sito di 5 pagine, qualcosa più per esercizio che per altro e devo confessarti che nel giro di un paio d’ore avevo tutto già pronto! Altre volte questo lavoro mi avrebbe preso più di 6 ore… È vero, nel tempo ho scoperto e messo in pratica diverse attività che mi permettono di velocizzarmi ma anche il refresh automatico del browser è una cosa che ha apportato enormi benefici!

Adesso che ti dovrei aver venduto i motivi per i quali dovresti iniziare ad usare questa tecnologia, avviciniamoci man mano allo strumento che ti voglio presentare e che spero inizierai ad usare assiduamente.

Non aver Paura della Riga di Comando

Piccola premessa prima di proseguire, in questo articolo parleremo nello specifico della riga di comando, uno strumento potentissimo che gli utenti Mac e Linux dovrebbero almeno conoscere ed essere in grado di apprezzare. Non è necessario essere dei guru per poterla utilizzare, ma il suo utilizzo è consigliato per diversi fattori che analizzeremo a breve.

terminal

Vuoi un consiglio cattivo? Se stai utilizzando Windows cerca subito una soluzione per metterlo da parte e installati una qualsiasi versione Linux. Non lo dico per stupide guerre religiose o perché ho qualcosa in contrario nei confronti di questo SO, lo dico perché ci sono moltissimi sviluppatori che stanno creando dei programmi potentissimi che funzionano da riga di comando; purtroppo su Windows questi programmi spesso non funzionano o richiedono complicate configurazioni…

Se poi sei in grado di usare Grunt anche su Windows ben venga (anzi sarei curioso di sapere come sia possibile dato che non mi documento sotto questo aspetto) ma ti posso assicurare che iniziare ad usare Linux (o meglio ancora Mac :P ) ti permetterà di accedere a una grandissima collezione di strumenti e programmi creati soltanto per facilitare la vita del web developer.

Comunque sia, non sono qua a fare la pubblicità a qualche Sistema Operativo… Ti sto introducendo al terminale perché è lo strumento che andremo ad utilizzare proprio quest’oggi. Come scopriremo a breve, BrowserSync è un progetto gratuito che ti permetterà di aggiornare automaticamente le pagine web del tuo progetto ogni volta che farai un salvataggio, ma per poterlo configurare avrai bisogno del terminale…

Prima di proseguire volevo condividere con te alcuni punti per i quali ritengo il terminale migliore di qualsiasi programma che presenti una GUI:

  • semplice da usare – sicuramente le prime esperienze non sono così semplici e scrivere bianco su nero può anche fare un po’ paura, ma ti assicuro che una volta che avrai preso l’abitudine ad utilizzarla sarai in grado di comprendere quanto questo strumento sia semplice;
  • incredibilmente veloce – un terminale non deve caricare tutte quelle librerie che permettono di gestire le finestre e la GUI dell’applicazione, semplicemente si inserisce il comando di cui abbiamo bisogno e lo eseguiamo;
  • altamente configurabile – ancora una volta, niente GUI significa spazio infinito. I creatori di queste applicazioni non dovranno perdere troppo tempo cercando di capire “quale sia il posto migliore per questa feature”, è tutto molto più semplice. Hai bisogno di una determinata opzione, la scrivi :D
  • facilmente condivisibile – riprendendo il punto precedente, dato che stiamo parlando di comandi testuali e non di strani bottoni nascosti nella terza schermata del programma X,  se abbiamo bisogno di eseguire un determinato programma non dovremo far altro che copiare il testo che ci viene presentato e incollarlo all’interno del terminale!

Sono sicuro che tra i vari lettori di questo blog, ce ne sono diversi che saranno in grado di aggiungere altri punti a difesa dell’uso del terminale; se tu sei uno di questi ti chiedo gentilmente di farmeli notare all’interno dei commenti in modo da poter arricchire maggiormente questo articolo :D

Che Cos’è BrowserSync e perché Usarlo

browsersync

Se è verò che un’immagine vale più di mille parole, dovrei concludere qua questo articolo; ma non lo farò. Non tanto perché i creatori di BrowserSync non sono bravi a passare la propria value proposition ma piuttosto perché voglio introdurti, a modo mio, a questo fantastico strumento.

Se è diverso tempo che sviluppi siti web, sono sicuro che negli anni sei venuto a conoscenza di strumenti che ti permettono di aggiornare la finestra del browser ad ogni tuo salvataggio. Strumenti come LiveReload, Codekit, Prepros e molti altri ci permettono di avere una GUI che ci aiuta a realizzare questo effetto ma, come dicevo prima, molto spesso non è la GUI quello di cui hai bisogno…

Quello di cui hai bisogno è la funzionalità stessa di aggiornare la finestra del tuo browser.

E dai commenti fatti precedentemente dovresti aver capito che per quanto potente sia il tuo computer, doverlo costringere a caricare una GUI appesantisce la sua capacità di calcolo e non aiuta a essere degli sviluppatori più veloci… Ecco perché una soluzione come BrowserSync mi piace molto, fa tutto da un semplice comando!

Oltre a questo bisogna dire che funziona nativamente su qualsiasi browser! Praticamente per funzionare crea un suo server web che resta in ascolto delle modifiche ai file ed aggiorna il browser in modo del tutto automatico.

Questa sua configurazione ti permetterà di testare il tuo sito su più browser contemporaneamente, tutto quello che ti serve è puntare il browser all’indirizzo specifico. In questo modo puoi scoprire immediatamente se c’è qualcosa che non funziona…

Le caratteristiche di BrowserSync non finiscono certo qua! Una volta installata questa applicazione avrai un pannello di controllo dal quale potrai organizzare il tipo di comportamento che dovrà avere, potrai attivare/disattivare delle caratteristiche in maniera live ed essendo scritto in Node.js (server web che approfondiremo in un futuro articolo) tutte le modifiche verranno applicate live!

browsersync-options

Però non ti voglio parlare di BrowserSync di per sé, perché da solo permette soltanto di aggiornare il codice HTML e CSS che andiamo a scrivere; ma sappiamo entrambi che scrivere questi codici in modo nativo è una gran perdita di tempo!

Proprio per questo motivo ho scelto di mostrarti in questo articolo come sia possibile configurare questa applicazione per essere usata con Grunt, in questo modo avremo a nostra disposizione il live refresh e potremo usare codice SASS allo stesso tempo (e questa ovviamente è soltanto una delle attività che puoi svolgere con Grunt).

Abbiamo già Parlato di Grunt

Ebbene sì, dovresti ricordarti che non troppo tempo fa ti ho parlato di questa applicazione da riga di comando che ci ha permesso di compilare codice SASS o di utilizzare addirittura i mixin presenti all’interno di Compass.

Guarda quindi questo articolo come un follow up del precedente perché per motivi di spazio non andrò a parlarti di come sia possibile configurare Grunt per compilare i codici precedenti; ma il mio intento è mostrarti direttamente come mescolare queste due tecnologie e tirarne fuori il meglio.

Partendo da questo presupposto mi aspetto che il progetto che desideri realizzare con BrowserSync sia configurato come descritto nel precedente articolo o almeno che tu sia in grado di configurare Grunt per poter beneficiare di quello che andremo ad installare.

Quello che faremo non è tanto installare BrowserSync e utilizzarlo da riga di comando, questo è veramente semplice e ben descritto dal sito del progetto stesso. Quello che faremo quest’oggi è invece configurare Grunt in modo che sia in grado di compilare sia il codice SASS e aggiornare la pagina del browser che visualizza il nostro lavoro.

Tutto quello che devi fare a questo punto è aprire il tuo terminale, posizionarti all’interno della cartella nella quale è presente il tuo progetto ed inserire il seguente comando che ci permetterà di installare il plugin BrowserSync all’interno di Grunt:

Come dovresti conoscere dall’articolo in cui ti ho presentato Grunt, il plugin che abbiamo installato prende il nome di grunt-browser-sync mentre grazie all’opzione --save-dev stiamo dicendo al nostro sistema che vogliamo installare questo plugin soltanto all’interno della cartella contenente il progetto e non all’interno del nostro SO.

Ora che hai installato questo plugin dovresti vedere che è stato modificato anche il file package.json in questo modo:

Come puoi notare, io ho configurato Grunt per usare Compass al posto di SASS ma a parte questo, i nostri package.json non dovrebbero presentare altre differenze.

Se non ti ricordi come si crea un progetto per Grunt ti consiglio caldamente di tornare a leggere l’articolo al quale facevo riferimento, ti sarà incredibilmente utile!

Configuriamo Compass e BrowserSync

Adesso che abbiamo installato tutto, non ci resta altro che far funzionare tutti i componenti nel modo migliore. Per fare questo è necessario andare a modificare il file Gruntfile.js per fare in modo che BrowserSync non vada a calpestare il corretto funzionamento di watch e che lasci a Grunt il tempo di poter compilare il codice SASS prima ancora di aggiornare la pagina.

Forse non ne abbiamo mai parlato nel dettaglio ma l’installazione del plugin watch (che nel blocco di codice precedente è impostato alla versione 0.6.1) ci permette di restare in ascolto e lanciare la compilazione del codice SASS ogni volta che il file viene scritto, ogni volta che facciamo un salvataggio.

Ovviamente questa è un’attività che potrebbe compromettere il funzionamento di BrowserSync (dato che entrambi i plugin sono in ascolto sulle modifiche dei file); per questo motivo, all’interno della configurazione del suo plugin è presente l’opzione watchTask che ci permette di avvertire BrowserSync che dovrà attendere l’esecuzione di watch prima ancora di aggiornare il browser.

Se sei solo interessato ad un copia/incolla selvaggio, ti lascio immediatamente il codice interno a Gruntfile.js che ti permetterà di fare quanto descritto, ma se vuoi imparare qualcosa in più troverai sotto di questo le spiegazioni alle varie sezioni.

Configurazione di Compass

Abbiamo già visto assieme questa configurazione ma mi sembra doveroso spendere due parole su come questa funzioni:

Con questo blocco di codice ti mostro la configurazione Compass più semplice che conosco. In poche parole definiamo un target (dist) per il nostro task e come opzioni gli diciamo su quali cartelle deve andare a lavorare; ovvero deve prendere i file SASS presenti in sass/ e compilarli all’interno di css/.

Questo tipo di plugin permette una grande personalizzazione, infatti ti sarà anche possibile riciclare il tuo caro config.rb e fare in modo che sia lui a dettare legge. Se sei interessato a configurazioni più avanzate ti lascio direttamente alla pagina dedicata che ti spiegherà punto punto come puoi configurare Compass in Grunt e mostra diversi esempi e casi d’uso.

Configurazione Watch

Se ancora non dovesse essere chiaro, watch è il task che resta in ascolto sulle modifiche che vengono effettuate sui file ed esegue delle azioni in risposta.

Quello che stiamo facendo in questa configurazione è dire a watch di restare in ascolto su tutte le modifiche che vengono applicate ai file che terminano con scss (perché questa è la sintassi SASS che personalmente uso) presenti all’interno di una qualsiasi cartella. Se uno di questi file viene modificato avvertirà il task compass che si occupererà di tradurre il codice SASS in classico CSS.

Dato che il comando watch è in grado di fare un incredibile numero di operazioni, anche in questo contesto ti lascio alla pagina di documentazione che ti permetterà di realizzare in quanti modi potrai sfruttare questo comando all’interno dei tuoi progetti. Ti assicuro che è in grado di semplifidarti la vita in moltissimi modi diversi ;)

L’attesa Configurazione di BrowserSync

Quando ti trovi a configurare un servizio complesso come BrowserSync è naturale aspettarsi qualche opzione in più… Di cosa sto parlando? Lasciami condividere un po’ di codice e forse la situazione ti sarà più chiara:

Quello che trovi qua non è altro che il blocco di codice presente anche dentro Gruntfile.js e che ci permette sia di eseguire le funzionalità di live reload che di dire allo stesso BrowserSync che ci sono altri task di watch che devono essere completati prima ancora di aggiornare la finestra del browser.

Quindi per dire a BrowserSync di aspettare i comodi di watch non dobbiamo far altro che inserire watchTask: true all’interno delle opzioni ed il gioco è fatto.

La parte relativa al src è invece dedicata alle tipologie di file per i quali BrowserSync dovrà aggiornare la pagina del tuo browser. Tra l’altro BrowserSync permette anche di aggiungere le configurazioni del nostro server e in un prossimo futuro vedrai apparire un articolo su wpAndMore dedicato a questo argomento; intanto ti lascio alla documentazione di questo programma che ti permetterà di scoprire in quanti modi puoi personalizzare il suo atteggiamento.

Conclusioni

A questo punto dovresti aver già fatto i tuoi primi esperimenti e tutto dovrebbe filare liscio. Se così non fosse, il mio suggerimento è quello di controllare il registerTask presente in Gruntfile.js e assicurarsi che sia scritto come segue:

In questo esempio io sto registrando il task default, quello che si avvia scrivendo semplicemente grunt all’interno del tuo terminale, in modo da far sapere a Grunt che dovrà eseguire sia BrowserSync che il task watch per funzionare correttamente.

Detto questo possiamo considerare l’articolo concluso perché, in fin dei conti, ti ho spiegato tutto quello che volevo spiegarti. Adesso dovresti essere in grado di usare BrowserSync direttamente con Grunt e sfruttare quest’ultimo per eseguire i task che contemplano lo sviluppo del tuo progetto in modo molto più veloce.

Comunque sia, se hai qualche dubbio o opinione sugli argomenti che abbiamo trattato in questo articolo ti consiglio di lasciare un tuo commento o utilizzare la pagina Contatti. Ormai dovresti sapere che ritengo le tue opinioni incredibilmente importati per la mia crescita personale e di questo blog.

Quindi non farti alcun problema e fammi sapere che ne pensi!

Lascia il tuo Pensiero