- Installazione da linea di comando
- Guida ai task di Gulp.js
- Clean-CSS (minifiy) + Concat
- Node Globs
- Watch + BrowserSync
Lo sviluppo del codice di ecommerce, siti, blog o altro può essere piuttosto lungo specialmente quando questi sono progetti lunghi e complessi.
In questo ambito lavorativo, come in altri, ottimizzare il flusso lavorativo è alla base di una buona progettazione e in ausilio agli sviluppatori esiste uno strumento più che valido che permette tutto ciò: Gulp.js.
WIKIPEDIA: Gulp è un toolkit JavaScript open source creato da Eric Schoffstall utilizzato come sistema di generazione di streaming (simile a un Make più focalizzato sul pacchetto) nello sviluppo web front-end.
È un task runner basato su Node.js e npm, utilizzato per l’automazione di attività ripetitive e dispendiose in termini di tempo coinvolte nello sviluppo Web come minimizzazione, concatenazione, busting della cache, test di unità, linting, ottimizzazione, ecc.
Gulp utilizza un approccio di code-over-configuration per definire i suoi compiti e si affida ai suoi piccoli plugin monouso per eseguirli. L’ecosistema Gulp include oltre 3500 plugin di questo tipo.
Quali sono quindi i vantaggi del suo utilizzo su un progetto? Per fare un breve elenco ecco alcuni aspetti che velocizzeranno tantissimo la tua scrittura del codice:
- Sincronizza l’editor di testo al browser predefinito, permettendoti al salvataggio del file sull’editor di ricaricare la pagina aggiornata del browser senza che tu debba farlo manualmente.
- Permette la condensazione e successivamente la minificazione di tutte le estensioni di file che vogliamo. Molto utile per creare fogli di stile e script già minificati da collegare al nostro html e rendere il nostro progetto più leggero.
- Compila per noi linguaggi che altrimenti non sarebbero visibili sul front-end come ad esempio Sass e Scss. Utile per scrivere fogli di stile in maniera più performante e veloce.
Questi sono solo alcuni dei numerosi vantaggi che guadagnamo dall’utilizzo di Gulp.js, ma andiamo con ordine e cerchiamo di capire come installarlo e come funziona.
Prima di procedere con l’installazione di Gulp.js assicuratevi di aver installato sul vostro computer Node.js. Potete scaricarlo tramite questo link.
1 – Installazione da linea di comando
Aprite il vostro terminale dal menù o tramite chiamata:
- Windows: Scrivete tramite Cortana “cmd” e cliccate sull’applicazione Terminale.
- Mac: Digitate “command + barra spaziatrice” e scrivete “terminale” per poi cliccarci sopra.
Lanciate quindi i seguenti comandi in questo ordine:
- //Installazione globale Gulp
- npm install –global gulp-cli
- //Create la cartella che ospiterà il vostro progetto (es. my-project)
- npx mkdirp my-project
- //Entrate dentro la cartella appena creata
- cd my-project
- //Create un pacchetto json dentro la vostra cartella
- npm init
- //Installate il pacchetto di Gulp dentro le vostre dipendenze
- npm i gulp
- //Controllate la versione del vostro pacchetto gulp
- gulp –version
2 – Guida ai task di Gulp.js
Il primo step per utilizzare Gulp è quello di utilizzare “require” nel gulpfile.
La prima stringa javascript da inserire è sempre: var gulp = require(‘gulp’), quindi partiamo da qui.
var gulp = require(‘gulp’);
La dichiarazione di “require” dice a Node di guardare dentro la cartella “node_modules” (creata quando abbiamo installato il pacchetto di gulp: “npm install gulp –save-dev”) per cercare un pacchetto chiamato “gulp”.
Una volta trovato il contenuto viene assegnato alla variabile “gulp”.
Ora possiamo iniziare a scrivere un gulp task con questa variabile. La sintassi di base per un gulp task è:
gulp.task(‘task-name’, function() {
return //code lines
});
“task-name” si riferisce al nome che vogliamo attribuire al task da noi scritto, che sarà successivamente richiamabile tramite la linea di comando scrivendo come prefisso “gulp” seguito dal nome del nostro task: “gulp esempio”.
Vediamo adesso il vero aspetto di un task e le sue linee di codice base:
gulp.task(‘task-name’, function () {
// Get source files with gulp.src
return gulp.src(‘source-files’)
// Sends it through a gulp plugin
.pipe(aGulpPlugin())
// Outputs the file in the destination folder
.pipe(gulp.dest(‘destination’))
});
Come puoi vedere vi sono due metodi di gulp nel task di esempio qui sopra: “gulp.src” e “gulp.dest”:
- gulp.src(): Dice a Gulp quali file usare per il task in questione
- gulp.dest(): Dice a Gulp dove collocare i file una volta che il task è completato
- .pipe(): E’ il metodo per indicare un “trasporto”
Proviamo adesso a realizzare un task che compili dei file Sass dentro dei file CSS (poichè il Sass non è leggibile dai browser). Prima di tutto installiamo il pacchetto di Sass:
npm i gulp-sass
Successivamente includiamo all’apice del nostro gulpfile la variabile che conterrà tutto il contenuto del pacchetto sass che risiede nei moduli di node.
- …
- var sass = require(‘gulp-sass’);
Il task prevederà quindi l’utilizzo del plugin sass (“sass()”), ed avrà un aspetto di questo tipo:
gulp.task(‘sass’, function () {
return gulp.src(‘app/scss/styles.scss’)
.pipe(sass())
.pipe(gulp.dest(‘app/css’))
});
Non occorre altro che lanciare il comando “gulp sass” dalla nostra linea di comando e automaticamente verrà generato un file style.css dentro la nostra cartella /css e di conseguenza il foglio di stile collegato alla nostra pagina index.html verrà sovrascritto con le nostre regole.
Per lanciare un task occorre usare “gulp” come prefisso seguito dal nome del task da noi scelto, nell’esempio precedente “sass”.
3 – Clean-CSS (minify) + Concat
Per ottimizzare i collegamenti ai fogli di stile, soprattuto in fase di esportazione del progetto, dove dobbiamo tenere conto di esportare solo le cartelle necessarie a visionare correttamente le pagine ed i collegamenti minificati al fine di far pesare molto meno il nostro progetto, esiste un pacchetto chiamato “clean-css”.
Questo pacchetto ci consentirà di minificare il nostro foglio di stile ed alleggerire tutto il nostro progetto.
Molto utile se usato combinato con una serie che comprende anche il pacchetto Sass e del concatenamento.
Installiamo quindi il pacchetto per vedere nel dettaglio un task che si occuperà di fare proprio questo:
npm i gulp-clean-css
Installiamo adesso il pacchetto di gulp-concat:
npm i gulp-clean-css
Inseriamo nel gulpfile le due variabili:
- …
- const cleanCSS = require(‘gulp-clean-css’);
- var concat = require(‘gulp-concat’);
- …
Scriviamo quindi adesso un task che svolga le seguenti funzioni:
- Cercare tutti i file .scss
- Compilarli con il metodo sass()
- Concatenare i nuovi fogli di stile appena compilati in un unico file che chiameremo “style.min.css”
- Minificare “style.min.css”
- Destinare quest’ultimo nella cartella css/
Ricordati di aggiornare il link al foglio di stile da index.html
4 – Node Globs
Capiterà frequentemente di dover essere in grado di compilare non solo un file .scss dentro un foglio di stile, ma anche altri e a seconda del task anche di scrivere funzioni più complesse.
Per capire quale sintassi adottare correttamente bisogna consultare i “Node globs”.
I Node globs corrispondono ai pattern per i file che ti consentono di aggiungere più di un file in gulp.src.
È come per le espressioni regolari, ma specificamente per i percorsi dei file.
La maggior parte dei flussi di lavoro con Gulp tende a richiedere solo 4 diversi schemi di globbing:
- *.scss: Il pattern “*” è una sorta di jolly (wildcard) che incrocia ogni pattern nel percorso corrente. In questo caso però verranno cercati solo quei file che hanno per estensione “.scss” nella root del nostro progetto, poichè non è specificato nessun percorso.
- **/*.scss: Questa versione cerca tutti i file che hanno per estensione “.scss” nella root e nei percorsi figli.
- !notme.scss: L’indicatore “!” dice al task di evitare il file chiamato “notme.scss”.
- *.+(scss|sass): In questo caso vengono presi tutti i file che finiscono con estensione “.scss” e “.sass” nella root.
Adesso che abbiamo un’infarinatura di come utilizzare i Node globs possiamo adeguare il task precedente facendo alcune modifiche di sintassi:
| PRIMA | return gulp.src(‘app/scss/style.scss') |
| DOPO | return gulp.src(‘app/scss/**/*.scss') |
In questo modo verranno cercati tutti i file che hanno estensione “.scss” all’interno di “app/scss” o percorsi figli.
5 – Watch + BrowserSync
Gulp ci fornisce un metodo di controllo che verifica se un file è stato salvato. Il metodo in questione è “watch“.
Ad esempio potremmo creare un task che verifica che se tutti i file .scss sono stati salvati allora può partire un task in serie che compila questi ultimi in file .css:
gulp.task(‘watch’, function(){
gulp.watch(‘app/scss/*/.scss’, [‘sass’]);
});
Un task molto utile per uno sviluppatore è il Browser Sync, che permette di sincronizzare il nostro editor di testo con la finestra del nostro browser predefinito che ci mostra il nostro progetto html, utilizzando un server locale.
Per installare il pacchetto il procedimento è sempre il medesimo:
npm i browser-sync
Ed aggiungere in apice al nostro gulpfile la variabile:
- …
- var browserSync = require(‘browser-sync’).create();
Poiché stiamo eseguendo un server virtuale, dobbiamo comunicare a Browser Sync dove dovrebbe trovarsi la radice del server. Nel nostro caso, è la cartella “app” (‘./’):
gulp.task(‘watch’, [‘sass’], function() {
browserSync.init({
server: {
baseDir: ‘./’
},
})
gulp.watch(src.scss, [‘sass’]);
gulp.watch(src.html).on(‘change’, reload);
});
Per combinare adesso il task di “browserSync” dobbiamo necessariamente cambiare il nostro task “sass”.
Adatteremo quindi il task “sass” in modo che ad ogni salvataggio di un file .scss vengano compilati tutti i file con questa estensione nella cartella /scss o figli e vengano destinati dentro /app/css già concatenati in un unico file minificato. Partirà infine quindi la sincronizzazione con il browser tramite “browserSync”.
gulp.task(‘sass’, function(){
return gulp.src(‘app/scss/*/.scss’)
.pipe(sass())
.pipe(concat(‘style.min.css’))
.pipe(cleanCSS({compatibility: ‘ie8’}))
.pipe(gulp.dest(‘app/css’))
.pipe(browserSync.stream());
});
Quindi:
A questo punto prima di concludere l’argomento BrowserSync perchè non perfezionare ancora di più il task facendo il modo che il browser si ricarichi anche al salvataggio di file .js?
Ci basterà aggiungere questa stringa al task “watch”:
gulp.watch(‘app/js/*/.js’, browserSync.reload);
Comincia a prendere confidenza con il task runner ed i vari pacchetti scaricabili da npm cercando anche documentazioni navigando in internet e creare quindi il tuo task personale cucito a misura sulle tue esigenze e capacità.
Ti accorgerai già dal primo progetto sviluppato attraverso questo flusso lavorativo di quanto tempo riuscirai ad ottimizzare e probabilmente rimurginato su quanto ne hai perso inutilmente.
Buon sviluppo!