Velocizzare la progettazione di siti web con BrowserSync

La fase iniziale della progettazione di un nuovo sito o applicazione web può rivelarsi molto tediosa e farci perdere più tempo di quanto vorremmo. Continue modifiche e migliorie, principalmente al codice HTML e CSS, richiedono altrettanti refresh delle pagine a cui si stà lavorando, senza contare le problematiche riguardanti la versione responsive del nostro lavoro.

Esistono vari tool che possono aiutarci ad automatizzare e velocizzare il nostro flusso di lavoro, uno dei più utilizzati e completi è sicuramente BrowserSync. Oltre alla funzionalità di base che ci possiamo aspettare da un tool del genere, ovvero l’auto-refresh della pagina al modificarsi dei files sorgente che la compongono, BroserSync offre anche (come si può evincere dal nome) la possibilità di sincronizzare il comportamento (scrolling, click di elementi etc.) tra più browsers (anche in versione mobile) e molto altro ancora!

Installazione e primo contatto

Come molti altri tools di sviluppo di cui ci siamo occupati, BrowserSync si appoggia a Nodejs, quindi per l’installazione sarà sufficiente digitare una riga di comando utilizzando NPM:

$ npm install -g browser-sync

Una volta terminata l’installazione potremo usare BrowserSync da riga di comando. Probabilmente non è la modalità più “comoda” per l’utilizzo di tutti i giorni ma è sicuramente un buon punto di partenza per apprenderne i concetti fondamentali.

Ora immaginiamo che il nostro progetto abbia una struttura del genere:

index.html assets/ — styles/
---- style.css

e di voler utilizzare BrowserSync in modo da forzare il refresh della pagina al modificarsi del contenuto dei fogli di stile CSS, dobbiamo digitare il seguente comando:

$ browser-sync start --server --files "assets/styles/*.css"

L’opzione —files (come facilmente intuibile) ci permette di specificare quali files dovranno essere “osservati” da BrowserSync per permettergli di aggiornare i browsers collegati, mentre l’opzione —server lancerà un server locale (accessibile di default sulla porta 3000). BrowserSync aprirà inoltre il nostro browser di default sulla pagina iniziale (in questo caso index.html, ma se ne può specificare una a nostra scelta tramite l’opzione —index).

Questo è l’output ritornato in console:

[BS] Local: >>> http://localhost:3000
[BS] External: >>> http://192.168.0.2:3000
[BS] Serving files from: ./

Ora possiamo accedere al server sincronizzato all’indirizzo http://localhost:3000 localmente sulla nostra macchina e dall’indirizzo http://192.168.0.2:3000 da qualsiasi altro dispositivo connesso alla rete locale, tra i quali anche dispositivi mobili.

In questo modo possiamo fare tutte le modifiche che vogliamo allo stile della nostra pagine e le vedremo subito riportate su tutti i browsers connessi! :)

Automatizzare il processo con Gulp

Vediamo ora come possiamo trasportare tutto questo all’interno di un task Gulp in modo da non dover digitare tutte le volte la sintassi dei comandi via shell.

// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch(assets/styles/*.css, ['reload']);
});

La parte chiave di questo script è il task reload che viene attivato quando gulp rileva modifiche ad un file css presente nella cartella assets/styles, esattamente lo stesso path che avevamo specificato prima invocando BroserSync da riga di comando.

E’ anche possibile utilizzare un pre-processore CSS e sincronizzare le modifiche dopo ogni avvenuta compilazione, grazie al fatto che BrowserSync supporta gli stream, così come Gulp. Per ottenere questo sarà sufficiente invocare la funzione reload passando l’argomento stream uguale a true dopo che il file compilato è stato salvato nella cartella di destinazione.

var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

var lessPath = 'assets/dev/less/**/*.less';

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('less', function () {
    return gulp.src(lessPath)
        .pipe(less())
        .pipe(gulp.dest('assets/styles'))
        .pipe(reload({
        	stream:true
        }));
});

gulp.task('default', ['less', 'browser-sync'], function () {
    gulp.watch(lessPath, ['less']);
});

Proxying e Tunneling

Se stiamo già utilizzando un server per lo sviluppo e quindi abbiamo un indirizzo locale a cui accedere possiamo istruire BrowserSync in modo che si comporti come un proxy, wrappando il server esistente e fornendoci un nuovo indirizzo a cui accedere. Basterà passare l’url dell’host tramite l’opzione proxy:

gulp.task('browser-sync', function() {
    browserSync({
    	proxy: 'sync.dev'
    });
});

[BS] Proxying: http://sync.dev
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.0.2:3000

Nel caso poi ci ritrovassimo a lavorare con un dispositivo che si trova al di fuori della nostra rete locale niente paura! BrowserSync integra il supporto a Localtunnel, un servizio gratuito che permette di rendere disponibile sul web, tramite un indirizzo pubblico generato randomicamente come sottodominio di localtunnel.me, il nostro ambiente di sviluppo locale, semplicemente impostando a true l’opzione di configurazione tunnel.

gulp.task('browser-sync', function() {
    browserSync({
    	tunnel: true
    });
});

[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.0.2:3000
[BS] Tunnel URL: https://ntycwmkngv.localtunnel.me

Conclusione

Spero che questa veloce carrellata delle possibilità offerte da BrowserSync vi sia stata utile per capirne le potenzialità e farlo diventare uno strumento di uso quotidiano per voi come lo è già per me. Se voleste approfondire l’argomento vi consiglio di dare un’occhiata alla documentazione, soprattutto la sezione delle opzioni, in modo da poterlo sfruttare appieno in base alle vostre necessità.