Come migliorare il workflow dello sviluppo con Gulp
Automatizza attività complesse con un semplice file di testo
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
Ti insegniamo a sfruttare la potenzialità di strumenti come Gulp per migliorare i tuoi processi di sviluppo, inoltre ti supportiamo nello sviluppo, realizzazione e progettazione di Mobile e Web Application. Contattaci subito e senza impegno per un preventivo gratuito.
Cosa Facciamo
- Consulenza ITIL
- Consulenza ITSM - IT Service Management
- Content Strategy
- E-Commerce
- Formazione avanzata Web, Mobile & Cloud
- IoT - Sviluppo e Integrazione
- Portfolio
- Privacy
- Project Management Prince2
- Sicurezza ICT
- Software Aziendali
- Sviluppo Mobile App
- Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
- System Integration
- Web Application
- Web Design
Casi di Successo
Una grande Media Agency utilizza la nostra soluzione di sviluppo Progressive Web Application (PWA) per migliorare gli strumenti commerciali e di marketing dei propri clienti.
CONTATTI

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it
Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Via Lazzaretto 19
Torino: P.zza XVIII Dicembre 5
Seguici