7 gennaio 2020Dev

Come migliorare lo sviluppo frontend con Gulp

Ad un certo punto del proprio percorso di crescita come frontend developer cominci a farti domande che non riguardano più il giusto font da usare o la giusta palette colori, ma cominci a domandarti se ciò che stai sviluppando con tanto amore è performante. Nella stragrande maggioranza dei casi, no.

Le motivazioni possono essere diverse, come ad esempio delle immagini non ottimizzate, il server configurato male o non adatto alle proprie esigenze oppure codice scritto male o superfluo per la pagina in uso.

Ho parlato in un articolo precedente del Critical CSS, ma forse è il caso di fare un passo indietro e spiegare per bene come Gulp possa ottimizzare un pochino il codice che scrivi. Attenzione! Un codice rindondante e scritto da cani, rimane un codice rindonante e scritto da cani. Gulp permette di ottimizzare dove possibile, ma cerchiamo di capire meglio di cosa sto parlando

Cos'è Gulp?

Gulp è un toolkit JavaScript che ti aiuta ad implementare delle task, utili ad automatizzare e semplificare il tuo workflow. Se usato correttamente può risolvere parecchie rotture di scatole in maniera del tutto automatica.

In questo articolo vedremo come implementare delle task di base, ma in futuro potrai sempre decidere di estenderle in base alle tue esigenze.

Installare Gulp

Prima di iniziare a scrivere codice, dobbiamo installare la dipendenza principale di Gulp, Node.js.

Se non hai Node installato sul tuo computer, puoi scaricarlo dal sito ufficiale.

Una volta installato Node, puoi installare Gulp usando la seguente istruzione da riga di comando (Terminale su Mac/Linux o Powershell su Windows).

Comando per installare Gulp

1// per utenti Windows
2npm install gulp -g
3
4// per utenti Mac/Linux
5sudo npm install gulp -g

Nota: Gli utenti Mac e Linux devono anteporre la parola chiave sudo per eseguire il comando come amministratori.

La sintassi usata specifica di installare Gulp nel proprio computer usando npm (Node Package Manager).

La flag -g specifica che npm installerà Gulp globalmente nel sistema, questo ti permetterà di eseguire i comandi gulp ovunque nel tuo computer.

Ora che Gulp è installato possiamo creare un progetto per poterne vedere le potenzialità.

Creare un progetto

Sul tuo desktop crea una cartella con nome a piacere, la quale conterrà tutto il progetto. Apri la cartella nel prompt dei comandi (trascinala nel terminale) ed esegui il seguente comando

1// Inizializza il progetto
2npm init

Il comando qui sopra creerà un file chiamato package.json, il quale conterrà tutte le informazioni sul progetto, come le dipendenze, script da eseguire, ecc.

npm init ti mostrerà quanto segue:

Output dopo l'esecuzione del comando npm init

Dopo la creazione del package.json, installiamo gulp a livello di progetto usando il seguente comando

Installazione di gulp come dipendenza di sviluppo

1npm install gulp --save-dev

Questo installerà gulp come una dipendenza di sviluppo del progetto invece che globalmente.

La flag --save-dev installerà e inserirà il nome del pacchetto sotto le dev dependency nel file package.json.

Quando l'esecuzione del comando sarà portata a termine nella tua cartella potrai notare una cartella node_modules, essa contiene le varie dipendenze e tende a diventare molto pensante.

Piccolo consiglio: se devi trasferire il tuo progetto a qualcuno non copiare la cartella node_modules, colui a cui la passerai dovrà semplicemente eseguire il comando npm init affinché npm legga il package.json e scarichi in automatico tutte le dipendenze del progetto. Stesso discorso vale se trasferisci il tuo progetto su Github o simili, escludi la cartella node_modules attraverso il file .gitignore.

Perfetto! Ora sei pronto, ma prima di proseguire oltre dobbiamo parlare un attimo di ~~Gesù Cristo nostro signore~~ come strutturare il nostro progetto.

Come strutturare la cartella del progetto

Gulp è abbastanza flessibile da lavorare con qualsiasi struttura, ma questo non vuol dire mettere tutti i file nella root directory. Per questo progetto useremo la seguente struttura.

Una struttura del progetto ideale da usare con Gulp

In questa struttura, useremo la cartella src per lo sviluppo, mentre dist (diminutivo di "Distribuzione") conterrà i file ottimizzati per il sito di produzione.

La struttura del progetto dobbiamo tenerla a mente quando lavoriamo con Gulp. Il passaggio successivo è la creazione del file gulpfile.js (già presente nel mio screenshot), il quale conterrà tutte le task di Gulp.

Creare la prima Gulp Task

Come prima cosa dobbiamo richiamare gulp nel nostro file gulpfile.js

1const gulp = require("gulp");

Giusto per capire la struttura di una task di Gulp, creiamone una inutile e chiamala "hello from gulp".

Task Gulp di base

1gulp.task("hello", function (done) {
2  console.log("Hello from Gulp");
3  done();
4});

La riga di comando mostrerà l'output Hello from Gulp quando il comando gulp hello verrà eseguito.

Output della task gulp Hello nel terminale

Ovviamente, le task Gulp sono molto più complesse di così, contengono metodi addizionali e plugin.

Una vera task Gulp assomiglia di più a questo:

Una tipica task Gulp

1gulp.task("nome-task", function () {
2  return gulp
3    .src("file-sorgente") // Recupera file sorgente
4    .pipe(unPluginGulp()) // Processalo con un plugin Gulp
5    .pipe(gulp.dest("destinazione")); // Salvalo nella cartella di destinazione
6});

gulp.src comunica alla task di Gulp quali file usare, mentre gulp.dest comunica dove salvare l'output dopo che la task termina la sua esecuzione.

Preprocessare con Gulp

In Gulp possiamo compilare file Sass in CSS con l'ausilio del plugin gulp-sass. Prima di tutto, installiamo il plugin come dipendenza di sviluppo usando il seguente comando:

1npm install gulp-sass --save-dev

Dobbiamo richiamare il plugin all'interno del nostro gulpfile.js

1const sass = require("gulp-sass");

Ora che il plugin è disponibile, possiamo creare una task che compili il file scss.

1gulp.task("sass", function () {
2  return gulp.src("src/scss/main.scss").pipe(sass()).pipe(gulp.dest("src/css"));
3});

La task, come menzionato poc'anzi, recupererà il file main.scss dalla cartella scss in src, eseguirà il plugin gulp-sass e salverà il risultato della task nella cartella css in src.

Per verificare che la task funzioni correttamente creiamo il file main.scss e aggiungiamo un paio di righe.

1$primary-color: #bada55;
2$font: "Arial";
3
4body {
5  background: $primary-color;
6  font-family: $font;
7  p {
8    color: #ffffff;
9  }
10}

Se da riga di comando esegui gulp sass, vedrai che automaticamente verrà creato il file main.css in src/css. Inoltre, se apri il file appena creato, vedrai che non sarà più in SCSS, ma in CSS.

1body {
2  background: #bada55;
3  font-family: "Arial";
4}
5body p {
6  color: #ffffff;
7}

Meraviglioso, ora puoi compilare i file SASS in file CSS.

Sicuramente in futuro vorrai compilare più file SCSS, una delle peculiarità del linguaggio è proprio la facilità con la quale puoi frammentarlo in piccolo pezzi, semplificandone la manutenzione.

Per poter processare più file useremo i Node Globs.

Usare i Node Globs per processare file multipli

I Globs sono usati per confrontare i patterns.

Ci sono 4 globs differenti:

1. *.scss: l'asterisco è una wildcard che confronta ogni file che termina con l'estensione .scss nella directory.
2. **/*.scss: in questa versione l'asterisco confronta ogni file che termina con .scss nella cartella principale e in ogni cartella figlia.
3. !not.scss: il punto esclamativo indica a gulp di escludere i file scss.
4. *.+(scss|sass): il più e le parentesi permettono di creare pattern multipli, ogni pattern è separato da una pipe (la barra verticale).

Ora che conosci i globs, puoi procedere alla sostituzione di src/scss/main.scss con qualcosa di più "generico", magari un pattern che controlli la root directory e ogni cartella figlia. Indovinato? Sì, è proprio src/scss/*/.scss.

1gulp.task("sass", function () {
2  return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("src/css"));
3});

Da questo momento potrai scrivere file SCSS multipli e compilarli con il comando gulp sass da terminale.

Aspettare che un file SASS cambi

Giunti a questo punto forse ti starai probabilmente chiedendo, ma devo eseguire ogni volta il comando gulp sass? Se così fosse, sarebbe una palla eseguirlo ogni sacrosanta volta.

Fortunatamente Gulp viene in nostro soccorso con il metodo watch, il quale controlla se vengono effettuate delle modifiche ai file desiderati ed esegue una task.

Per controllare eventuali modifiche ai file SCSS scriveremo nel gulpfile.js

1gulp.watch("src/scss/**/*.scss", gulp.series("sass"));

Magari piuttosto che lasciare un comando così "volante" nel file è meglio creare una task

1gulp.task("watch", function () {
2  gulp.watch("src/scss/**/*.scss", gulp.series("sass"));
3});

Ora se esegui gulp watch nella riga di comando la task resterà in esecuzione, in attesa che un file scss venga salvato per eseguire automaticamente la task sass.

In pratica abbiamo automatizzato, l'automazione.

CSS Vendor Free

Ancora oggi vengono usati quei dannatissimi vendor prefix (-moz-, -ms-, -o-, -webkit-), senza quelli alcuni browser non riconoscono la proprietà CSS, ignorandola. Un vero rompimento di palle.

Fortunatamente Gulp viene ancora una volta in nostro soccorso con il plugin gulp-prefixer. Esso ci permetterà di aggiungere automaticamente i prefissi, evitando una montagna di bestemmie durante lo sviluppo.

Installa il plugin con il seguente comando:

1npm install gulp-autoprefixer --save-dev

Quindi modifichiamo la task sass per aggiungere i prefissi automaticamente

1const autoprefixer = require("gulp-autoprefixer");
2gulp.task("sass", function () {
3  return gulp
4    .src("src/scss/*.scss")
5    .pipe(sass())
6    .pipe(autoprefixer())
7    .pipe(gulp.dest("src/css"));
8});

Ora, eseguendo la task gulp sass il file scss verrà compilato in css con i prefissi, ove necessario.

Live-reload usando la sincronizzazione del browser

Save, Refresh, Repeat. Se scrivi CSS da un po', sicuramente conosci la rottura di salvare, aggiornare la pagina, vedere che tutto è un bordello e tornare a scrivere codice.

Indovina un po'? Gulp ha un plugin che automatizza anche questo, si chiama browser-sync e si installa così:

1npm install browser-sync --save-dev

Ad installazione terminata, possiamo scrivere la task.

1const browserSync = require("browser-sync").create();
2gulp.task("serve", function () {
3  browserSync.init({
4    server: "src",
5    port: 4000,
6  });
7});

Eseguendo gulp serve da riga di comando l'applicazione verrà eseguita alla porta 4000.

Modifichiamo la task sass per sincronizzare il browser ogni volta che viene generato il file main.css

1gulp.task("sass", function () {
2  return gulp
3    .src("src/scss/*.scss")
4    .pipe(sass())
5    .pipe(autoprefixer())
6    .pipe(
7      browserSync.reload({
8        stream: true,
9      })
10    )
11    .pipe(gulp.dest("src/css"));
12});

Ora configuriamo una task reload da passare a watch

1gulp.task("reload", function (done) {
2  browserSync.reload();
3  done();
4});

1gulp.task("watch", function () {
2  gulp.watch("src/scss/**/*.scss", gulp.series("sass", "reload"));
3});

Infine creiamo una task live-server per eseguire serve e watch, le quali rispettivamente avviano il browser sync e il controllo dei file.

1gulp.task("live-server", gulp.series("serve", "watch"));

Ottimizzare i file JavaScript e CSS

Mai sentito parlare di file minimizzati o minificati? Questo genere di azione può essere eseguita grazie ai toolkit come Gulp.

Supponiamo di aver incluso due script nell'index.html

1<body>
2  <!-- build:js js/main.min.js -->
3  <script src="js/main.js"></script>
4  <script src="js/custom.js"></script>
5  <!-- endbuild -->
6</body>

A sto giro useremo un plugin gulp chiamato gulp-useref che concatena i file CSS e JS in uno solo (un file CSS e un file JS) leggendo i commenti che iniziano con <!-- build e finiscono con <!-- endbuild -->. La sintassi è:

1<-- build:<type>
2  <path>
3    --> .............................( Html markup code for scripts )
4    <!---endbuild --></path
5  ></type
6>

• <type> può essere js o css. Obbligatorio affinché si possa creare il file corretto.
• <path> si riferisce al percorso finale.

Installiamo il plugin con la solita sintassi

1npm install gulp-useref --save-dev

e creiamo la task

1const useref = require("gulp-useref");
2gulp.task("useref", function () {
3  return gulp.src("src/*.html").pipe(useref()).pipe(gulp.dest("dist"));
4});

Eseguendo la task useref, Gulp leggerà i due script e li concatena in uno unico nella cartella dist/js/main.min.js

Risultato della task useref

Per minificare JavaScript avremo bisogno di gulp-uglify e gulp-if

Installiamo i due pluggin con un comando unico

1npm install gulp-uglify gulp-if --save-dev

Modifichiamo la task useref che minifica i file JavaScript.

1const uglify = require("gulp-uglify");
2const gulpif = require("gulp-if");
3gulp.task("asset-opt", function () {
4  return gulp
5    .src("src/*.html")
6    .pipe(useref())
7    .pipe(gulpif("*.js", uglify()))
8    .pipe(gulp.dest("dist"));
9});

Per minificare il CSS invece dobbiamo inanzitutto richiamare il file nella head del documento index.html presente nella directory src

1<!-- build:css css/main.min.css -->
2<link rel="stylesheet" href="css/main.css" />
3<!-- endbuild -->

Installa gulp-csso con il solito comando

1npm install gulp-csso --save-dev

Modifichiamo la task asset-opt come segue:

1gulp.task("asset-opt", function () {
2  return gulp
3    .src("src/*.html")
4    .pipe(useref())
5    .pipe(gulpif("*.js", uglify()))
6    .pipe(gulpif("*.css", csso()))
7    .pipe(gulp.dest("dist"));
8});

Ora se il file sottoposto a scansione è un CSS verrà eseguita la funzione csso che lo minimizzerà. Testa la task eseguendo gulp asset-opt da linea di comando e vedrai che nella cartella dist verrà creato una nuova directory css con dentro il file main.min.css.

Copiare i file nella cartella Dist

Supponiamo di creare una cartella font dentro a src, la quale conterrà i font usati nel progetto.

Creiamo una task gulp che copia i file da src a dist

1gulp.task("fonts", function () {
2  return gulp.src("src/fonts/**/*").pipe(gulp.dest("dist"));
3});

Combinare più Gulp task

In precedenza abbiamo usato un metodo di Gulp chiamato series, di cui non ho spiegato nulla. Quel metodo permette di combinare più task simultaneamente.

Solitamente è utile creare una task per la produzione, la quale ottimizza tutti i file e li copia da src a dist.

Solitamente la chiamo build e non farò eccezione stavolta. La task eseguirà l'ottimizzazione dei CSS e dei JS e sposterà i font.

1gulp.task("build", gulp.series("asset-opt", "fonts"));

L'altra task è invece, quella per lo svilippo, l'abbiamo già creata. Si occuperà di compilare i file scss in css, controllare se ci sono cambiamenti e refresherà il browser di volta in volta usando browser-sync.

La task è quella che abbiamo chiamato live-server, ma la puoi rinominare default

1gulp.task("default", gulp.series("serve", "watch"));

Perfetto, abbiamo finito! Di seguito ti riporto i vari file creati manualmente

1const gulp = require("gulp");
2const sass = require("gulp-sass");
3const autoprefixer = require("gulp-autoprefixer");
4const browserSync = require("browser-sync").create();
5const useref = require("gulp-useref");
6const uglify = require("gulp-uglify");
7const gulpif = require("gulp-if");
8const csso = require("gulp-csso");
9
10// gulp.task('hello', function(done) {
11// 	console.log('Hello from Gulp');
12// 	done();
13// });
14
15gulp.task("sass", function () {
16  return gulp
17    .src("src/scss/*.scss")
18    .pipe(sass())
19    .pipe(autoprefixer())
20    .pipe(
21      browserSync.reload({
22        stream: true,
23      })
24    )
25    .pipe(gulp.dest("src/css"));
26});
27
28gulp.task("asset-opt", function () {
29  return gulp
30    .src("src/*.html")
31    .pipe(useref())
32    .pipe(gulpif("*.js", uglify()))
33    .pipe(gulpif("*.css", csso()))
34    .pipe(gulp.dest("dist"));
35});
36
37gulp.task("fonts", function () {
38  return gulp.src("src/fonts/**/*").pipe(gulp.dest("dist/fonts"));
39});
40
41gulp.task("watch", function () {
42  gulp.watch("src/scss/**/*.scss", gulp.series("sass", "reload"));
43});
44
45gulp.task("serve", function () {
46  browserSync.init({
47    server: "src",
48    port: 4000,
49  });
50});
51
52gulp.task("reload", function (done) {
53  browserSync.reload();
54  done();
55});
56
57gulp.task("build", gulp.series("asset-opt", "fonts"));
58
59gulp.task("default", gulp.series("serve", "watch"));

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <title>Document</title>
8    <!-- build:css css/main.min.css -->
9    <link rel="stylesheet" href="css/main.css" />
10    <!-- endbuild -->
11  </head>
12  <body>
13    <!-- build:js js/main.min.js -->
14    <script src="js/main.js"></script>
15    <script src="js/custom.js"></script>
16    <!-- endbuild -->
17  </body>
18</html>

1$primary-color: #bada55;
2$font: "Arial";
3
4body {
5  background: $primary-color;
6  font-family: $font;
7  p {
8    color: #ffffff;
9  }
10}

Conclusioni

Oggi hai affrontato la base di Gulp, ma le potenzialità dietro al comando gulp sono infinite.

La maggior parte dei frontend developer troverà più che sufficienti quanto implementato durante questo articolo, ma Gulp può essere usato anche per ottimizzare lo sviluppo di plugin e temi WordPress.

Sia che ciò che abbiamo scritto è sufficiente, sia che le tue esigenze siano altre, ti lascio qui di seguito qualche plugin utile per estendere il tuo gulpfile.js

• Scrivere Javascript nella sintassi più recente con Babel
• Generare script Modernizr con gulp-modernizr
• Usare template engines come Pug per modularizzare HTML
• Rimuovi il CSS non utilizzato con unCSS
• Generare il critical CSS seguendo il mio tutorial

Fammi sapere come va e se hai bisogno non esitare a chiedere 😉 Immagine in evidenza di Clément H