Gulp per principianti

Gulp è uno strumento che ti aiuta in diversi compiti quando si tratta di sviluppo web. È spesso usato per fare compiti front-end come:

• Spegnere un server web
• Ricaricare il browser automaticamente ogni volta che un file viene salvato
• Utilizzare preprocessori come Sass o LESS
• Ottimizzare risorse come CSS, JavaScript e immagini

Nota importante! Questo articolo è stato scritto per Gulp 3.x, ma ora Gulp 4.x è uscito ed è raccomandato. Come ogni grande cambio di versione, le API hanno cambiamenti di rottura. Se installi Gulp 4 e provi a fare alcune delle cose in questo articolo, non funzioneranno. Faremo alcune note qui per ricordarvelo. Questo sembra un buon antipasto di Gulp 4.

Questa non è una lista completa delle cose che Gulp può fare. Se sei abbastanza pazzo, puoi anche costruire un generatore di siti statici con Gulp (l’ho fatto!). Quindi sì, Gulp è estremamente potente, ma dovrete imparare ad usare Gulp se volete creare i vostri processi di compilazione personalizzati.

Quindi è a questo che serve questo articolo. Ti aiuta a diventare così bravo con le basi di Gulp che puoi iniziare ad esplorare tutto il resto da solo.

Prima di tuffarci nel lavoro con Gulp, parliamo del perché potreste voler usare Gulp rispetto ad altri strumenti simili.

Perché Gulp?

Strumenti come Gulp sono spesso chiamati “strumenti di costruzione” perché sono strumenti per eseguire i compiti per costruire un sito web. I due strumenti di costruzione più popolari al momento sono Gulp e Grunt. (Chris ha un post su come iniziare con Grunt qui). Ma ce ne sono altri, naturalmente. Broccoli si concentra sulla compilazione delle risorse, uno dei compiti più comuni degli strumenti di compilazione.

Ci sono già più articoli che coprono la differenza tra Grunt e Gulp e perché si potrebbe usare uno piuttosto che un altro. Puoi controllare questo articolo, questo o questo se sei interessato a saperne di più. Brunch è simile nella sua focalizzazione sulle risorse, e raggruppa alcuni degli altri compiti più comuni come un server e un file watcher.

La differenza principale è come si configura un flusso di lavoro con loro. Le configurazioni di Gulp tendono ad essere molto più brevi e semplici rispetto a Grunt. Gulp tende anche ad essere più veloce.

Passiamo ora a scoprire come configurare un flusso di lavoro con Gulp.

Cosa stiamo impostando

Per la fine di questo articolo, avrete un flusso di lavoro che esegue i compiti che abbiamo delineato all’inizio di questo articolo:

• Fa girare un server web
• Compila Sass in CSS
• Ripristina il browser automaticamente ogni volta che si salva un file
• Ottimizza tutte le risorse (CSS, JS, font e immagini) per la produzione

Apprenderete anche come concatenare diversi compiti in semplici comandi che sono facili da capire ed eseguire.

Iniziamo installando Gulp sul tuo computer.

Installare Gulp

Devi avere Node.js (Node) installato sul tuo computer prima di poter installare Gulp.

Se non hai già Node installato, puoi ottenerlo scaricando il pacchetto di installazione dal sito di Node.

Quando hai finito di installare Node, puoi installare Gulp usando il seguente comando nella riga di comando:

$ sudo npm install gulp -g

Nota: Solo gli utenti Mac hanno bisogno della parola chiave sudo. (Vedi il primo commento di Pawel Grzybek se non vuoi usare sudo). E ricordate che il “$” nel codice qui sopra simboleggia solo il prompt dei comandi. Non fa effettivamente parte del comando che esegui.

Il comando npm install che abbiamo usato qui è un comando che usa Node Package Manager (npm) per installare Gulp sul tuo computer.

Il flag -g in questo comando dice a npm di installare Gulp globalmente sul tuo computer, il che ti permette di usare il comando gulp ovunque sul tuo sistema.

Gli utenti Mac hanno bisogno della parola chiave extra sudo nel comando perché hanno bisogno dei diritti di amministratore per installare Gulp globalmente.

Ora che avete installato Gulp, facciamo un progetto che usa Gulp.

Creare un progetto Gulp

Prima di tutto, creeremo una cartella chiamata project che servirà come radice del nostro progetto mentre ci muoviamo in questo tutorial. Esegui il comando npm init da quella cartella:

# ... from within our project folder$ npm init

Il comando npm init crea un file package.json per il tuo progetto che memorizza informazioni sul progetto, come le dipendenze usate nel progetto (Gulp è un esempio di dipendenza).

npm init ti chiederà:

Una volta creato il file package.json, possiamo installare Gulp nel progetto utilizzando il seguente comando:

$ npm install gulp --save-dev

Questa volta, stiamo installando Gulp in project invece di installarlo globalmente, ecco perché ci sono alcune differenze nel comando.

Vedrai che la parola chiave sudo non è richiesta perché non stiamo installando Gulp globalmente, quindi anche -g non è necessario. Abbiamo aggiunto --save-dev, che dice al computer di aggiungere gulp come dipendenza dev in package.json.

Se controlli la cartella del progetto quando il comando ha finito di essere eseguito, dovresti vedere che Gulp ha creato una cartella node_modules. Dovreste anche vedere una cartella gulp all’interno di node_modules.

Siamo quasi pronti per iniziare a lavorare con Gulp. Prima di farlo, dobbiamo avere chiaro come useremo Gulp per il progetto, e parte di questo è decidere la struttura delle cartelle.

Determinazione della struttura delle cartelle

Gulp è abbastanza flessibile da lavorare con qualsiasi struttura di cartelle. Dovrete solo capire il suo funzionamento interno prima di modificarlo per il vostro progetto.

Per questo articolo, useremo la struttura di una webapp generica:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

In questa struttura, useremo la cartella app per scopi di sviluppo, mentre la cartella dist (come in “distribuzione”) è usata per contenere file ottimizzati per il sito di produzione.

Siccome app è usata per scopi di sviluppo, tutto il nostro codice sarà messo in app.

Dovremo tenere a mente questa struttura di cartelle quando lavoreremo alle nostre configurazioni di Gulp. Ora, iniziamo a creare il primo task di Gulp in gulpfile.js, che memorizza tutte le configurazioni di Gulp.

Scrivere il tuo primo task di Gulp

Il primo passo per usare Gulp è requirenel gulpfile.

var gulp = require('gulp');

La dichiarazione require dice a Node di cercare nella cartella node_modules un pacchetto chiamato gulp. Una volta trovato il pacchetto, assegniamo il suo contenuto alla variabile gulp.

Possiamo ora iniziare a scrivere un task gulp con questa variabile gulp. La sintassi di base di un task gulp è:

gulp.task('task-name', function() { // Stuff here});

task-name si riferisce al nome del task, che verrebbe usato ogni volta che si vuole eseguire un task in Gulp. Puoi anche eseguire lo stesso compito nella riga di comando scrivendo gulp task-name.

Per testarlo, creiamo un task hello che dice Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Possiamo eseguire questo compito con gulp hello nella riga di comando.

$ gulp hello

La linea di comando restituirà un log che dice Hello Zell!.

I task di Gulp sono solitamente un po’ più complessi di questo. Di solito contiene due metodi Gulp aggiuntivi, più una varietà di plugin Gulp.

Ecco come potrebbe essere un vero task:

Come potete vedere, un vero task contiene due metodi Gulp aggiuntivi – gulp.src e gulp.dest.

gulp.src dice al task di Gulp quali file usare per il task, mentre gulp.dest dice a Gulp dove emettere i file una volta che il task è completato.

Provo a costruire un task reale in cui compiliamo i file Sass in file CSS.

Preelaborazione con Gulp

Possiamo compilare Sass in CSS in Gulp con l’aiuto di un plugin chiamato gulp-sass. Puoi installare gulp-sass nel tuo progetto usando il comando npm install come abbiamo fatto per gulp.

Vorremmo anche usare il flag --save-dev per assicurarci che gulp-sass venga aggiunto a devDependencies in package.json.

$ npm install gulp-sass --save-dev

Dobbiamo require gulp-sass dalla cartella node_modules proprio come abbiamo fatto con gulp prima di poter utilizzare il plugin.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Possiamo usare gulp-sass sostituendo aGulpPlugin() con sass(). Poiché il compito è quello di compilare Sass in CSS, chiamiamolo sass.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Abbiamo bisogno di fornire al task sass i file sorgente e una destinazione affinché il task funzioni, quindi creiamo un file styles.scss nella cartella app/scss. Questo file sarà aggiunto al task sass in gulp.src.

Vogliamo emettere l’eventuale file styles.css nella cartella `app/css`, che sarebbe la destination per gulp.dest.

Vogliamo testare che il task sass funzioni come vogliamo. Per farlo, possiamo aggiungere una funzione Sass dentro styles.scss.

// styles.scss.testing { width: percentage(5/7);}

Se si esegue gulp sass nella riga di comando, si dovrebbe ora essere in grado di vedere che un file styles.css è stato creato in app/css. Inoltre, ha il codice dove percentage(5/7) è stato valutato in 71.42857%.

/* styles.css */.testing { width: 71.42857%; }

Ecco come sappiamo che il compito sass funziona!

A volte abbiamo bisogno della capacità di compilare più di un file .scss in CSS contemporaneamente. Possiamo farlo con l’aiuto di Node globs.

Globbing in Node

I globs sono pattern di corrispondenza per i file che ti permettono di aggiungere più di un file in gulp.src. È come le espressioni regolari, ma specificamente per i percorsi dei file.

Quando usi un glob, il computer controlla i nomi dei file e i percorsi per lo schema specificato. Se lo schema esiste, allora viene trovato un file.

La maggior parte dei flussi di lavoro con Gulp tende a richiedere solo 4 diversi pattern di globbing:

1. *.scss: Il pattern * è un carattere jolly che corrisponde a qualsiasi pattern nella directory corrente. In questo caso, stiamo facendo corrispondere qualsiasi file che termina con .scss nella cartella principale (project).
2. **/*.scss: Questa è una versione più estrema dello schema * che corrisponde a qualsiasi file che termina con .scss nella cartella principale e in qualsiasi directory figlia.
3. !not-me.scss: Il ! indica che Gulp dovrebbe escludere lo schema dalle sue corrispondenze, che è utile se si dovesse escludere un file da uno schema abbinato. In questo caso, not-me.scss verrebbe escluso dal match.
4. *.+(scss|sass): Il più + e le parentesi () permettono a Gulp di abbinare più pattern, con pattern diversi separati dal carattere pipe |. In questo caso, Gulp abbinerà qualsiasi file che termina con .scss o .sass nella cartella principale.

Ogni altro file Sass che si trova dentro app/scss verrebbe automaticamente incluso nel task sass con questa modifica. Se aggiungete un file print.scss nel progetto, vedrete che print.css sarà generato in app/css.

Siamo ora riusciti a compilare tutti i file Sass in file CSS con un solo comando. La domanda è: a cosa serve se dobbiamo eseguire manualmente gulp sass ogni volta che vogliamo compilare Sass in CSS?

Per fortuna, possiamo dire a Gulp di eseguire automaticamente il task sass ogni volta che un file viene salvato attraverso un processo chiamato “watching”.

Guardare i file Sass per le modifiche

Nota! Gulp Watch è una delle cose che è cambiata molto dalla 3.x alla 4.x. Vedi la documentazione.

Gulp ci fornisce un metodo watch che controlla se un file è stato salvato. La sintassi per il metodo watch è:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Più spesso però, vogliamo guardare più di un tipo di file alla volta. Per farlo, possiamo raggruppare più processi di osservazione in un compito watch:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Se hai eseguito il comando gulp watch in questo momento, vedrai che Gulp inizia a guardare immediatamente.

E che esegue automaticamente il task sass ogni volta che si salva un file .scss.

Facciamo un ulteriore passo avanti e facciamo in modo che Gulp ricarichi il browser ogni volta che salviamo un file .scss con l’aiuto di Browser Sync.

Live-reloading with Browser Sync

Browser Sync aiuta a rendere lo sviluppo web più facile facendo girare un server web che ci aiuta a fare live-reloading facilmente. Ha anche altre caratteristiche, come la sincronizzazione delle azioni su più dispositivi.

Dobbiamo prima installare Browser Sync:

$ npm install browser-sync --save-dev

Avrai notato che non c’è il prefisso gulp- quando installiamo Browser Sync. Questo perché Browser Sync funziona con Gulp, quindi non dobbiamo usare un plugin.

Per usare Browser Sync, dovremo require Browser Sync.

var browserSync = require('browser-sync').create();

Dobbiamo creare un browserSync task per abilitare Gulp a far girare un server usando Browser Sync. Dato che stiamo facendo girare un server, dobbiamo far sapere a Browser Sync dove dovrebbe essere la root del server. Nel nostro caso, è la cartella `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Dobbiamo anche cambiare leggermente il nostro task sass in modo che Browser Sync possa iniettare nuovi stili CSS (aggiornare il CSS) nel browser ogni volta che il task sass viene eseguito.

Abbiamo finito di configurare Browser Sync. Ora, dobbiamo eseguire entrambi i compiti watch e browserSync allo stesso tempo perché il live-reloading avvenga.

Sarebbe scomodo aprire due finestre della linea di comando ed eseguire gulp browserSync e gulp watch separatamente, quindi facciamo in modo che Gulp li esegua insieme dicendo al task watch che browserSync deve essere completato prima che watch possa essere eseguito.

Lo possiamo fare aggiungendo un secondo argomento al task watch. La sintassi è:

gulp.task('watch', , function (){ // ...})

E in questo caso stiamo aggiungendo il task browserSync.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Vogliamo anche assicurarci che sass venga eseguito prima di watch in modo che il CSS sia già l’ultimo ogni volta che eseguiamo un comando Gulp.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Ora, se si esegue gulp watch nella linea di comando, Gulp dovrebbe avviare entrambi i compiti sass e browserSync contemporaneamente. Quando entrambi i compiti sono completati, watch verrà eseguito.

Al tempo stesso, si aprirà anche una finestra del browser che punta a app/index.html. Se cambiate il file styles.scss, vedrete che il browser si ricarica automaticamente.

C’è un’altra cosa prima di finire questa sezione sul live-reloading. Dal momento che stiamo già controllando il ricaricamento dei file .scss, perché non fare un passo avanti e ricaricare il browser se un qualsiasi file HTML o JavaScript viene salvato?

Possiamo farlo aggiungendo altri due processi di controllo e chiamando la funzione browserSync.reload quando un file viene salvato:

Finora in questo tutorial ci siamo occupati di tre cose:

1. Avviare un server web per lo sviluppo
2. Utilizzare il preprocessore Sass
3. Ricaricare il browser ogni volta che un file viene salvato

Copriremo la parte sull’ottimizzazione delle risorse nella prossima sezione. Inizieremo con l’ottimizzazione dei file CSS e JavaScript.

Ottimizzare i file CSS e JavaScript

Gli sviluppatori hanno due compiti da svolgere quando si cerca di ottimizzare i file CSS e JavaScript per la produzione: la minificazione e la concatenazione.

Un problema che gli sviluppatori affrontano quando automatizzano questo processo è che è difficile concatenare gli script nell’ordine corretto.

Abbiamo incluso 3 tag script in index.html.

Questi script si trovano in due directory diverse. Sarà difficile concatenarli con plugin tradizionali come gulp-concatenate.

Fortunatamente, c’è un utile plugin di Gulp, gulp-useref che risolve questo problema.

Gulp-useref concatena qualsiasi numero di file CSS e JavaScript in un unico file cercando un commento che inizia con “<!-build:” e finisce con “<!-endbuild->”. La sua sintassi è:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> può essere js, css, o remove. È meglio impostare type sul tipo di file che si sta cercando di concatenare. Se imposti type a remove, Gulp rimuoverà l’intero blocco di build senza generare un file.

<path> qui si riferisce al percorso di destinazione del file generato.

Vogliamo che il file JavaScript finale sia generato nella cartella js, come main.min.js. Quindi, il markup sarebbe:

Ora configuriamo il plugin gulp-useref nel gulpfile. Dovremo installare il plugin e richiederlo nel gulpfile.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

Impostare il task useref è simile agli altri task che abbiamo fatto finora. Ecco il codice:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Ora, se si esegue questo compito useref, Gulp prenderà i 3 tag script e li concatenerà in dist/js/main.min.js.

Il file però non è minificato al momento. Dovremo usare il plugin gulp-uglify per aiutare a minificare i file JavaScript. Abbiamo anche bisogno di un secondo plugin chiamato gulp-if per assicurarci di tentare di minificare solo i file JavaScript.

$ npm install gulp-uglify --save-dev 

Gulp dovrebbe ora minificare automaticamente il file `main.min.js` ogni volta che si esegue il task useref.

Una cosa bella che devo ancora rivelare con Gulp-useref è che cambia automaticamente tutti gli script all’interno di “<!-build:” e “<!-endbuild->” in un singolo file JavaScript che punta a `js/main.min.js`.

Meraviglioso, vero?

Possiamo usare lo stesso metodo per concatenare qualsiasi file CSS (se hai deciso di aggiungerne più di uno). Seguiremo lo stesso processo e aggiungeremo un commento build.

Possiamo anche minificare il file CSS concatenato. Dobbiamo usare un pacchetto chiamato gulp-cssnano plugin per aiutarci con la minificazione.

$ npm install gulp-cssnano

Ora si otterrebbe un file CSS ottimizzato e un file JavaScript ottimizzato ogni volta che si esegue il useref task.

Passiamo oltre e ottimizziamo le immagini.

Ottimizzazione delle immagini

Avrete probabilmente già indovinato; abbiamo bisogno di usare gulp-imagemin per aiutarci ad ottimizzare le immagini.

$ npm install gulp-imagemin --save-dev

var imagemin = require('gulp-imagemin');

Possiamo minificare png, jpg, gif e anche svg con l’aiuto di gulp-imagemin. Creiamo un compito images per questo processo di ottimizzazione.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Siccome diversi tipi di file possono essere ottimizzati in modo diverso, potresti voler aggiungere delle opzioni a imagemin per personalizzare come ogni file viene ottimizzato.

Per esempio, puoi creare GIF interlacciate impostando il tasto opzione interlaced su true.

Se volete, potete anche giocare con altre opzioni.

Ottimizzare le immagini, tuttavia, è un processo estremamente lento che non vorreste ripetere se non necessario. Per farlo, possiamo usare il plugin gulp-cache.

$ npm install gulp-cache --save-dev

Abbiamo quasi finito il processo di ottimizzazione. C’è ancora una cartella che dobbiamo trasferire dalla directory `app` alla `dist`, la directory dei fonts. Facciamolo ora.

Copiare i font in Dist

Siccome i file dei font sono già ottimizzati, non c’è altro da fare. Tutto quello che dobbiamo fare è copiare i font in dist.

Possiamo copiare i file con Gulp semplicemente specificando gulp.src e gulp.dest senza alcun plugin.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Ora Gulp copierà `fonts` da `app` a `dist` ogni volta che si esegue gulp fonts.

Ora abbiamo 6 diversi compiti nel gulpfile, e ognuno di essi deve essere chiamato individualmente con la linea di comando, il che è piuttosto ingombrante, quindi vogliamo legare tutto insieme in un unico comando.

Prima di farlo però, vediamo come pulire automaticamente i file generati.

Pulire i file generati automaticamente

Siccome stiamo generando file automaticamente, vogliamo assicurarci che i file che non sono più utilizzati non rimangano da nessuna parte senza che noi lo sappiamo.

Questo processo è chiamato pulizia (o in termini più semplici, cancellazione di file).

Dovremo usare del per aiutarci nella pulizia.

npm install del --save-dev

var del = require('del');

La funzione del prende un array di globi di nodi che le dicono quali cartelle eliminare.

Impostare il tutto con un task Gulp è quasi come il primo esempio di “ciao” che avevamo.

gulp.task('clean:dist', function() { return del.sync('dist');})

Ora Gulp cancellerà la cartella `dist` ogni volta che gulp clean:dist viene eseguito.

Nota: Non dobbiamo preoccuparci di cancellare la cartella dist/images perché gulp-cache ha già memorizzato le cache delle immagini sul tuo sistema locale.

Per cancellare le cache dal tuo sistema locale, puoi creare un task separato chiamato `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Uff, che boccone. Ora combiniamo tutti i nostri compiti insieme!

Combinando i compiti di Gulp

Riassumiamo quello che abbiamo fatto. Finora abbiamo creato due serie distinte di compiti Gulp.

Il primo set è per un processo di sviluppo, dove abbiamo compilato Sass in CSS, osservato i cambiamenti e ricaricato il browser di conseguenza.

Il secondo set è per un processo di ottimizzazione, dove abbiamo preparato tutti i file per il sito di produzione. Abbiamo ottimizzato risorse come CSS, JavaScript e immagini in questo processo e copiato i font da app a dist.

Abbiamo già raggruppato la prima serie di compiti in un semplice flusso di lavoro con il comando gulp watch:

gulp.task('watch', , function (){ // ... watchers})

Il secondo set consiste in compiti che dobbiamo eseguire per creare il sito web di produzione. Questo include clean:dist, sass, useref, images e fonts.

Se seguissimo lo stesso ragionamento, potremmo creare un compito build per combinare tutto insieme.

gulp.task('build', , function (){ console.log('Building files');})

Purtroppo, non saremmo in grado di scrivere il task build in questo modo perché Gulp attiva tutti i task nel secondo argomento simultaneamente.

C’è la possibilità che useref, images, o anche fonts vengano completati prima di clean, il che significa che l’intera cartella `dist` venga cancellata.

Quindi, per assicurarci che le pulizie vengano completate prima del resto dei compiti, abbiamo bisogno di usare un plugin extra chiamato Run Sequence.

$ npm install run-sequence --save-dev

Ecco la sintassi di una sequenza di compiti con run sequence:

Quando task-name viene chiamato, Gulp eseguirà prima task-one. Quando task-one finisce, Gulp avvierà automaticamente task-two. Infine, quando task-two è completo, Gulp eseguirà task-three.

Run Sequence ti permette anche di eseguire compiti simultaneamente se li metti in un array:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

In questo caso, Gulp esegue prima task-one. Quando task-one è completato, Gulp esegue tutti i compiti nel secondo argomento simultaneamente. Tutti i compiti in questo secondo argomento devono essere completati prima che task-three venga eseguito.

Perciò ora possiamo creare un compito che assicuri che clean:dist venga eseguito per primo, seguito da tutti gli altri compiti:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Per rendere le cose coerenti, possiamo anche costruire la stessa sequenza con il primo gruppo. Usiamo default come nome del compito questa volta:

gulp.task('default', function (callback) { runSequence(, callback )})

Perché default? Perché quando avete un compito chiamato default, potete eseguirlo semplicemente digitando il comando gulp, il che fa risparmiare qualche battuta di tasto.

Finalmente, ecco un repo github per tutto il lavoro che abbiamo fatto!

Concludendo

Siamo passati attraverso le basi assolute di Gulp e abbiamo creato un flusso di lavoro che è in grado di compilare Sass in CSS mentre guarda i file HTML e JS per i cambiamenti allo stesso tempo. Possiamo eseguire questo task con il comando gulp nella linea di comando.

Abbiamo anche costruito un secondo task, build, che crea una cartella dist per il sito di produzione. Abbiamo compilato Sass in CSS, ottimizzato tutte le nostre risorse e copiato le cartelle necessarie nella cartella dist. Per eseguire questo compito, dobbiamo solo digitare gulp build nella riga di comando.

Infine, abbiamo un compito clean che cancella dalla cartella dist generata qualsiasi cache di immagini creata, permettendoci di rimuovere qualsiasi vecchio file che è stato inavvertitamente tenuto in dist.

Finora abbiamo creato un flusso di lavoro robusto che è abbastanza capace per la maggior parte degli sviluppatori web. C’è molto di più su Gulp e sui flussi di lavoro che possiamo esplorare per rendere questo processo ancora migliore. Ecco alcune idee per voi:

Per lo sviluppo:

• Utilizzare Autoprefixer per scrivere codice CSS senza vendor
• Aggiungere Sourcemaps per facilitare il debug
• Creare Sprites con sprity
• Compilare solo i file che sono cambiati con gulp-changed
• Scrivere ES6 con Babel o Traceur
• Modulare file Javascript con Browserify, webpack, o jspm
• Modularizzare HTML con motori di template come Handlebars o Swig
• Suddividere il gulpfile in file più piccoli con require-dir
• Generare automaticamente uno script Modernizr con gulp-modernizr

Per ottimizzare:

• Rimuovere il CSS inutilizzato con unCSS
• Ottimizzare ulteriormente il CSS con CSSO
• Generare CSS in linea per le prestazioni con Critical

Oltre ai processi di sviluppo o di ottimizzazione, potete anche aggiungere scrivere test unitari JavaScript con gulp-jasmine e persino distribuire la vostra cartella dist sul vostro server di produzione automaticamente con gulp-rync.

Come potete vedere, anche se il flusso di lavoro che abbiamo creato fa un bel po’ di cose, c’è molto di più che si può fare. Creare un flusso di lavoro che si adatti alle vostre esigenze può essere estremamente eccitante e soddisfacente, ma può essere molto da assimilare se siete alle prime armi.

C’è molto di più su Gulp che è impossibile coprire in questo post, o anche in una serie di post. Ecco perché ho scritto un libro sull’automazione del flusso di lavoro, e vi invito a prendere dieci capitoli gratuitamente se siete interessati a saperne di più 🙂