Come migliorare il workflow dello sviluppo con Gulp

Quando si sviluppano Web Application o Progressive Web Application (PWA) o comunque per tecnologie Web based ci si trova sempre davanti a processi monotoni e che possono indurre in errore ed allungare i tempi di sviluppo, tra questi citiamo:

• ridurre al minimo il codice JS e CSS per  migliorare le performance
• convertire codice SASS in CSS
• aggiornare una pagina Web per visualizzare i cambiamenti
• creare versioni di produzione
• effettuare l’upload dei file su un server

Abbiamo citato i più comuni e sono anche tra quelli che possono essere semplicemente automatizzati grazie a Gulp.js.

Cos’è e come funziona Gulp

Gulp è uno strumento per automatizzare task che fanno parte del processo di sviluppo. Grazie ad unico contenitore dei task (gulpfile.js) è possibile creare funzioni che effettuano qualsiasi tipologia di operazione.

Occorre avere installati node, npm e npx per iniziare ad usare gulp. Potete fare riferimento alla Quick Start Guide per ottenere l’ambiente operativo.

Una volta che è tutto pronto potete creare i task, di seguito trovate l’esempio di un task che crea un’istanza server locale, procedere a servire i file contenuti in una determinata cartella “dev” e quindi monitora i cambiamenti ai file per aggiornare la pagina web.

Dapprima installiamo la libreria browser-sync per sincronizzare i cambiamenti

#npm i -D browser-syn

Quindi nel file gulpfile.js scriviamo

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task('run',()=>{
browserSync.init({server:'./dev'});
gulp.watch('./dev/**/*.{html,js,css}).on('change',browserSync.reload);
});

E’ tutto pronto, possiamo ora lanciare il comando “gulp run” ed il task partirà permettendo di avere il nostro progetto web disponibile al link http://localhost:3000 e di aggiornare automaticamente eventuali cambiamenti al nostro codice.

E se vogliamo avere più task insieme?

E’ possibile creare un task di default che esegue in ordine un’altra serie di task. Vediamo come, nel gulpfile.js aggiungiamo:

gulp.task('default', gulp.series('minimize','run','whateveryouwant'));

Ora sarà sufficiente lanciare semplicemente il comando “gulp” e tutti i task saranno eseguiti in serie. Eccezionale!

Glue Labs e Gulp

Attraverso la formazione avanzata ti permettiamo di sfruttare la potenzialità di strumenti come Gulp per migliorare i tuoi processi di sviluppo. Grazie all’esperienza maturata in tantissimi settori, con numerosi Clienti e con un solido gruppo aziendale ti garantiamo le competenze per assisterti e supportarti per qualsiasi tuo progetto di sviluppo e nella realizzazione e progettazione di Mobile e Web Application, anche Cloud Native, con garanzia 12 mesi da qualsiasi bug. Contattaci subito e senza impegno per maggiori informazioni.