Live reloading con Gulp e Magento

Se si deve progettare un nuovo tema utilizzando un task runner, potrebbe risultare molto comodo integrare un sistema di live reloading combinato con il task watch, sopratutto se si utilizzano più schermi.

Con gulp vi sono due tool molto famosi: Livereload e BrowserSync.

Livereload: è un plugin gulp che fa un update live dei file. Si possono specificare manualmente i file oppure collegarlo al task watch per aggiornare i file modificati. Se i file da aggiornare sono file CSS, verrà fatto un injection dei nuovi file (verranno quindi sostituiti istantaneamente i nuovi file nel codice della pagina senza necessariamente ricaricarla), altrimenti verrà ricaricata la pagina (i javascript richiedono necessariamente un reload della pagina).

Per funzionare però non basta modificare il proprio gulpfile, ma è necessario che sul browser utilizzato per lo sviluppo sia installato un plugin specifico che stia in ascolto sui cambiamenti del livereload server.

Maggiori informazioni potete trovarle sulla pagina del pacchetto NPM https://www.npmjs.com/package/gulp-livereload.

BrowserSync: al contrario di Livereload, BrowserSync utilizza un javascript all’interno della pagina che permette di aggiornare i file css e js senza necessariamente installare un plugin sul browser. Il tool però non si limita a questo: essendo la sua funzione primaria quella di “sincronizzare” i browser, l’aggiornamento dei file viene propagata a ogni browser che ha aperta la medesima pagina. Inoltre, sempre avendo aperta la stessa pagina su diversi browser, il tool si occuperà di sincronizzare tutte le azioni fatte: dal semplice scroll a un click specifico o alla compilazione di un form, viene tutto replicato istantaneamente su tutti i device.

A questo link potete trovare un confronto fra i due metodi:

https://www.slant.co/versus/5065/5066/~livereload_vs_browsersync

Stando a queste premesse e questo confronto, BrowserSync sembra vincere a mani basse. In realtà vi sono alcune problematiche:

• Nei progetti Magento dove abbiamo usato BrowserSync, quest’ultimo si è rivelato decisamente più lento nell’injection dei file css modificati e inoltre in diversi casi, questo non veniva nemmeno portato a termine.
• Livereload si attiva solo con l’esecuzione del task mentre browsersync richiede un javascript installato sulla pagina. Questo crea non pochi problemi se si utilizza il tool anche nelle fasi di supporto, mantenimento o sviluppo di una nuova feature di un progetto esistente: occorre di volta in volta inserire e rimuovere il file javascript per evitare che questo possa finire in produzione o in staging causando errori js.

Per ovviare a questi problemi, sui nostri ultimi progetti sono stati integrati entrambi, sfruttando i punti di forza di entrambi e bypassando le problematiche presentate per il live reloading:

• Abbiamo isolato browsersync creando un file di configurazione e limitando il suo inserimento sull’ambiente locale di sviluppo, sfruttando alcuni accorgimenti affrontate in un precedente articolo.
• Abbiamo configurato il task runner per fare l’injection dei css sfruttando livereload mentre per tutto il resto viene utilizzato browsersync (sia per l’aggiornamento dei javascript che per la sincronizzazione delle azioni).

Ecco un esempio del risultato ottenibile, usando anche delle config per attivare e disattivare i due plugin:

// Active Live reloading

var browserSync  = require('browser-sync').create();
var livereload   = require('gulp-livereload');
var config = {
appendLiveReload: false,  // Enable Live Reload
browserSyncOn: false      // Enable BrowserSync
};
var BrowserSyncConfig = {
    //host: "thedoublef.local/", // Override host detection if you know the correct IP to use
    // proxy: "http://yourproject.local",
    //port: 8080
    ghostmode: { clicks: true, forms: true, scroll: true },
    logPrefix: "Bitbull_Gulp",
    open: false, // Decide which URL to open automatically
    reloadOnRestart: false,
};
gulp.task('browser-sync', function () {
    // Docc generated files will be saved in the `docs` directory
    if(config.browserSyncOn == true) {
        browserSync(BrowserSyncConfig);
    }
});

gulp.task('watch', function() {
browserSync.init(BrowserSyncConfig);
var server = livereload();
gulp.watch(['css/style-dev.css', 'images/**/*']).on('change', function(file) {
    if (config.appendLiveReload) { server.changed(file.path); }  // Use LiveReload
    else { browserSync.reload(); }                               // Use BrowserSync

});
gulp.watch(['js/dev-script.js','fonts/**/*']).on('change', function(file) {
    if (config.browserSyncOn) { browserSync.reload(); }          // Use BrowserSync
    else { server.changed(file.path);}                           // Use LiveReload
});
});

Questa è la nostra soluzione sui progetti Magento 1, fateci sapere nei commenti se avete provato altre soluzioni o strumenti simili.