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.
