Come migliorare il workflow dello sviluppo con Gulp

Automatizza attività complesse con un semplice file di testo

Network

Approfondimenti

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

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.

Inizia ora il tuo progetto

Cosa ci piace fare

CONTATTI

Scrivici dal form di contatto

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

Nome*

E-mail*

Telefono(per un contatto più rapido)

Come possiamo aiutarti?

Altro che vuoi dirci?

Inviando i tuoi dati accetti le condizioni sulla privacy. Li useremo per rispondere alle tue domande e richieste.