Un moderno workflow per i tuoi SCSS con Gulp.js

Che su SkillsAndMore il precompilatore Sass è molto apprezzato non ci piove, lo utilizziamo per qualsiasi progetto ci venga proposto e anche se qualche sviluppatore può pensare che non siano più necessari ti assicuro che non è così.

Utilizzare un precompilatore non esclude la possibilità di utilizzare le novità introdotte nei CSS.

Le CSS custom property, calc(), i variable font, le subgrid e praticamente qualsiasi altra novità introdotta nei fogli di stile funziona correttamente anche in un precompilatore.

Anzi in molti casi il workflow che imposti per lavorare con il precompilatore che hai selezionato ti aiuterà anche in questo rendendoti la vita più semplice.

Oggi voglio parlare proprio di questo, voglio mostrarti come implementare un moderno workflow con Gulp.js che ti permetterà di:

• compilare il codice SCSS in CSS,
• utilizzare i moduli implementati nell’ultima release di Dart Sass,
• aggiungere i prefix necessari al corretto funzionamento del tuo codice,
• ottimizzare il tuo foglio di stile minificandolo e riducendo le ripetizioni,
• creare una sourcemap che ti aiuterà a debuggare il tuo codice,
• avere una live preview nel browser man mano che salvi i tuoi file.

Come puoi notare tutte queste attività, o per entrare nel linguaggio di Gulp.js task, sono rivolti alla creazione dei fogli di stile ma questo task runner può fare molto di più.

Grazie a Gulp.js potrai compilare il tuo moderno JavaScript per renderlo compatibile con browser datati, minificare le immagini, spostare file e un sacco di altri task interessanti che velocizzeranno il tuo lavoro.

Questi informazioni ti saranno utili se già conosci il termine task runner (in questo caso salta pure la prossima sezione), ma se così non fosse lascia che ti introduca velocemente al problema che risolve Gulp.js.

Perché usare un task runner come Gulp.js

Iniziamo prima con l’analizzare il significato di task runner, questo è un termine che negli ultimi 10 anni (circa) ha preso molto piede nel mondo dello sviluppo web, principalmente per gli sviluppatori frontend.

Un task runner non è altro che un programma in grado di svolgere (velocemente) azioni ripetitive.

Per nostra fortuna i linguaggi di programmazione sono in continua evoluzione ma in alcuni casi i browser non seguono il passo con i vari rilasci oppure alcuni browser (cugh Chrome) cercano di prevedere il futuro e implementare funzionalità che ancora non sono state rilasciate.

Alcuni casi molto comuni dei problemi riscontrati da uno sviluppatore frontend riguardano l’uso dei prefix nelle dichiarazioni di proprietà CSS (per fortuna il loro uso sta diminuendo) oppure la sintassi da utilizzare per i moduli JavaScript.

Non voglio perdere tempo in esempi, riassumiamo dicendo che chi desidera scrivere codice che funzioni correttamente su tutti i browser si trova di fronte a un bel casino.

Applicare prefix, riorganizzare, modificare e minificare il codice… Sono tutti compiti molto ripetitivi.

Ecco perché sono nati i task runner.

I task runner sono applicazioni che possono essere istruite per fare queste (e altre) operazioni al salvataggio di un file.

Ecco alcuni esempi di comandi che puoi impartire a un task runner:

“Quando salvo ./scss/_single.scss esegui il task sass e genera ./style.css“.

“Quando vengono aggiunte nuove immagini nella cartella ./images/raw/ esegui il task images e salva l’immagine ottimizzata in ./images/“.

“Quando salvo un file JavaScript esegui il task javascript e rendi il codice compatibile con le ultime 2 versioni di Edge.”.

Ecco perché un task runner ti sarà utile, perché una volta configurato eseguirà ciascun task senza che tu debba fare niente.

Beh a dire il vero dovrai almeno salvare i tuoi file.

Esistono diversi task runner ma alla fine la vera differenza risulta essere la presenza (o assenza) di una interfaccia grafica.

In questo articolo ti parlo di Gulp.js, un task runner che devi eseguire nel tuo terminale e che non presenta una GUI. Anzi in tutta onestà il mio consiglio è quello di non usare task runner che hanno una GUI.

Perché non usare un’applicazione con GUI?

Sia chiaro che io non ti sto vietando di utilizzare delle applicazioni come CodeKit, Prepros o Scout.

Quello che sto dicendo è che utilizzare dei task runner che non dipendono da alcuna interfaccia grafica rende più semplice per gli sviluppatori di mantenerlo aggiornato con gli ultimi rilasci.

Anzi, non dover collegare il task runner a una interfaccia grafica permette anche ad altri di contribuire più facilmente al progetto.

Per esempio con Gulp.js hai a disposizione quasi 4000 plugin che ti aiutano a utilizzare le versioni stabili più recenti (o quelle in beta) degli strumenti di sviluppo e a configurare task ricchi di funzionalità.

Per concludere ti ricordo che utilizzare Gulp.js o altri task runner senza GUI significa avere tutta la configurazione all’interno di un singolo file di testo, questo rende veramente semplide spostare le nostre configurazioni da un progetto a un altro.

Installa Gulp.js e configura il tuo progetto

Eccoci giunti al momento più importante di tutto l’articolo, l’installazione di Gulp.js sul tuo computer.

Come ho detto nella sezione precedente, Gulp.js è un task runner senza GUI quindi per utilizzarlo dovrai avere un po’ di dimestichezza con il tuo terminale.

Se ti senti arrugginito o non sai di cosa sto parlando ti consiglio di leggere la nostra introduzione al terminale e poi tornare a leggere questo articolo.

Oltre a dover padroneggiare il tuo terminale per installare Gulp.js, nel tuo computer dovrà essere installato Node.js e il suo package manager npm.

Adesso che abbiamo fatto la lista della spesa passiamo ad installare Gulp.js globalmente digitando il seguente comando all’interno nel terminale:

$ npm install --global gulp-cli

Ora Gulp.js è installato sul tuo sistema operativo e potrai richiamarlo da qualsiasi cartella ti trovi, adesso è giunto il momento di creare la cartella per il tuo progetto e iniziare a configurare il task runner per eseguire le operazioni che abbiamo descritto precedentemente.

$ mkdir gulp-sass-project/

Con il comando precedente non ho fatto altro che creare la cartella dove salveremo la configurazione di Gulp.js.

Adesso entria nella cartella e procedi alla configurazione del task runner.

$ cd gulp-sass-project/

Usando Gulp.js sarà comune utilizzare npm per installare pacchetti Node.js o plugin di questo task runner, per questo motivo ti suggerisco di creare immediatamente il file package.json attraverso il seguente comando:

$ npm init

Ti verranno fatte delle domande relative al progetto, tu puoi scegliere di rispondere a tutte o di ignorarle velocemente aggiungendo l’opzione -y al comando precedente.

Creato il nostro package.json è giunto il momento di installare la versione locale di Gulp.js per farlo lavorare con i file del nostro progetto:

$ npm install --save-dev gulp

Controlla che tutto sia andato a buon fine con:

$ gulp --version

Questo comando dovrebbe restituirti la versione installata globalmente di gulp-cli e quella locale di gulp, se non vedi questi messaggi ti consiglio di seguire nuovamente i passi che ti ho mostrato fino a ora e controllare che non ci sia alcun messaggio di errore.

Crea il tuo primo gulpfile.js

Precedentemente ti ho detto che una delle cose più belle di lavorare con task runner che non hanno una GUI è la semplicità con la quale possiamo portare il file di configurazione da un progetto a un altro.

Il file di configurazione che usa Gulp.js deve essere gulpfile.js ed è un semplicissimo file JavaScript che dovrai tenere nella cartella principale del tuo progetto.

Crea il file nella tua cartella e inserisci questo codice:

function firstTask(cb) {
	// il tuo primo task Gulp.js
	cb();
}

exports.default = firstTask;

Complimenti, hai creato il tuo primo task in Gulp.js!

Per far eseguire un task devi scrivere nel terminale gulp <nometask> una volta che ti sarai posizionato all’interno della cartella contenente il file gulpfile.js.

Dato che il nostro firstTask è stato esportato come default attraverso export.default puoi anche omettere il nome del task e scrivere soltanto gulp.

Ecco quello che restituirà il tuo terminale:

$ gulp
[08:48:49] Using gulpfile ~/gulp-sass-project/gulpfile.js
[08:48:49] Starting 'default'...
[08:48:49] Finished 'default' after 1.18 ms

Ovviamente al momento questo task non fa niente, in fin dei conti abbiamo creato una funzione vuota, ma ci stiamo preparando proprio per risolvere questo aspetto.

Compila il codice SCSS in normale CSS

Il primo task funzionante che andremo a creare in questo articolo sarà quello che ci permetterà di di compilare il codice SCSS all’interno di un singolo file CSS.

Anche se troverai tutto il codice nel repository GitHub al momento la struttura del progetto è la seguente:

Tutto il codice che scriverai all’interno di scss/style.scss e ai partials ad esso collegati verrà inserito trasformato automaticamente in CSS e inserito all’interno del file style.css una volta che avrai creato il tuo task scss.

Andiamo intanto a preparare il campo aprendo il file gulpfile.js con il tuo editor di testo preferito e inserisci quanto segue:

function scss(cb) {
	// il task per la compilazione del codice SCSS
	cb();
}

exports.scss = scss;

Questo al momento è il massimo che puoi fare perché Gulp.js, per meglio dire Node.js, non sa ancora come compilare il codice Sass. Per fortuna che dobbiamo soltanto installare un pacchetto con npm:

$ npm install --save-dev gulp-dart-sass

Una volta che il comando sarà terminato avrai gli strumenti per dire a Gulp.js che comando usare per compilare il tuo codice Sass, dove si trovano i file SCSS e dove salvare il file style.css.

Installando il pacchetto in questo modo avrai aggiornato anche il tuo package.json così che ti basterà condividere questo file per permettere ai tuoi collaboratori di lavorare con gli stessi pacchetti che stai usando tu.

Ecco la nuova riga aggiunta in devDependencies di package.json:

...
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-dart-sass": "^0.9.1"
  },
...

Ora che tutto è al posto giusto andiamo a scoprire come istruire Gulp.js per la compilazione dei nostri file. Torna nuovamente nel tuo gulpfile.js e sostituisci tutto il codice presente con il seguente:

const { dest, src } = require("gulp");
const sass = require("gulp-dart-sass");

function scss() {
	return src("scss/**/*.scss")
		.pipe(sass())
		.pipe(dest("./"));
}

exports.scss = scss;

Nelle prime due righe di codice sto importando i pacchetti installati con npm per poterli utilizzare all’interno del file.

Dato che lavoreremo con i file presenti nel filesystem ho bisogno di utilizzare i metodi dest() e src() per dire a Gulp.js dove trovarli, oltre a questo prendo anche il metodo sass che mi permette proprio di compilare il codice Sass (con sintassi SCSS nel nostro caso) in CSS standard.

Analizziamo nel dettaglio il nuovo task che abbiamo creato:

function scss() {
	return src("scss/**/*.scss")
		.pipe(sass())
		.pipe(dest("./"));
}

La prima cosa che dobbiamo fare quando si crea un task che lavora con i file è dire dove trovarli, altrimenti non potremo fare niente.

src() è il metodo ideale per fare questo.

Per dire al task di controllare tutti i file .scss presenti nella cartella scss/ e tutte le cartelle che contiene si devi passare la stringa scss/**/*.scss che gli permetterà di controllare le modifiche apportate a tutti i file .scss presenti.

Successivamente utilizziamo il metodo pipe() per prendere lo stream di dati della funzione che lo precede e passarli a quella che contiene nelle parentesi tonde.

Nel primo pipe() prendiamo lo stream proveniente da src() contenente tutti i file che ha trovato e lo passa alla funzione sass(), necessaria per la compilazione.

Il secondo pipe(), invece, prende lo stream di dati proveniente dal precedente, il codice CSS compilato grazie a sass(), e lo salva con dest() nella posizione indicata.

dest() si occupa soltanto di salvare lo stream di dati in una cartella specifica utilizzando lo stesso nome del file che gli viene passato. Se hai intenzione di rinominare style.css avrai bisogno di utilizzare un altro plugin di Gulp.

Lasciando i dettagli da parte prova a controllare se tutto funziona correttamente lanciando il seguente comando dal tuo terminale:

$ gulp scss

Se hai un file scss/qualsiasinome.scss nel tuo progetto adesso troverai un nuovo file qualsiasinome.css nella cartella principale.

Aggiungi automaticamente i prefix alle nuove regole

Come ti ho anticipato all’inizio di questo articolo, per nostra fortuna i browser stanno smettendo di aggiungere nuove proprietà CSS con i prefix.

Basta guardarsi indietro solo di qualche anno, per esempio quando era necessatio utilizzare i prefix per dichiarare una transazione CSS per capire quanto tempo era necessario per scrivere delle proprietà CSS:

.box{
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-ms-transition: all 4s ease;
	-o-transition: all 4s ease;
	transition: all 4s ease; 
}

Praticamente se volevo usare una transazione prima del 2014 avrei dovuto ripetere il mio codice per ben 5 volte, e stiamo parlando di una singola proprietà. Figuriamoci a scrivere tutto il nostro foglio di stile in questo modo.

Fin da subito sono nate diverse soluzioni (Prefixer) che ci aiutavano a rendere il nostro CSS compatibile anche con i browser datati. Alcuni erano online e altri erano veri e propri programmi da installare con relativa interfaccia grafica.

Però oggi stiamo parlando di Gulp.js e per questo motivo voglio presentarti un altro plugin che ti permetterà di rendere il tuo CSS compatibile anche sui browser più datati.

Il plugin si chiama gulp-autoprefixer ed è fantastico!

Lasciami soltanto dire che tu puoi selezionare con una precisione maniacale i browser (e la loro versione) per i quali vuoi ottimizzare il tuo codice.

Anche se stiamo parlando di un plugin per Gulp.js la sua installazione avviene sempre attraverso npm, proprio come successo per Sass, quindi prima di andare a modificare il file gulpfile.js è meglio installare il pacchetto.

$ npm install --save-dev gulp-autoprefixer

Una volta che l’installazione sarà terminata tu non dovrai fare altro che modificare il task scss creato precedentemente per far funzionare gulp-autoprefixer.

Ecco come si mostra il tuo nuovo gulpfile.js:

const { dest, src } = require("gulp");
const sass = require("gulp-dart-sass");
const prefix = require("gulp-autoprefixer");

function scss() {
	return src("scss/*.scss")
		.pipe(sass())
		.pipe(prefix())
		.pipe(dest("./"));
}

exports.scss = scss;

In aggiunta al precedente abbiamo dichiarato una nuova costante prefix che ci permette di richiamare facilmente gulp-autoprefixer e abbiamo aggiunto un nuovo step al task creato in precedenza con il quale aggiungiamo i prefix necessari al codice CSS generato dal metodo sass().

Ma come fa gulp-autoprefixer a conoscere quali browser deve tenere in considerazione?

Vuoi la risposta breve? Non lo sa!

Sarai tu a dovergli dire quali sono i browser che deve tenere in considerazione.

Per fare questo il miglior modo è quello di modificare il package.json per aggiungere un array contenente tutte le specifiche per identificare i browser da tenere in considerazione per trasformare le proprietà CSS e renderle compatibili.

L’array che dovrai aggiungere all’interno del package.json rispetta le regole di Browserlist e sono veramente molte.

Se vuoi creare una tua selezione personalizzata potresti usare questo comodo sito web che ti permette di impostare diverse dichiarazioni ma per semplificarti la vita potresti usare il valore default che offre un buon grado di affidabilità oppure inserire qualcosa come:

  ...
  "dependencies": {},
  "browserslist": [
	"last 2 version",
	"not dead"
  ]
}

Ecco come dichiarare il tuo browserlist all’interno di un package.json.

Adesso eseguendo il task gulp scss dal tuo terminale vedrai che nel file CSS generato saranno presenti anche i prefix necessari a far funzionare correttamente il tuo codice.

Non mi credi?

Prova a inserire la proprietà appearance al file SCSS. Sono convinto che nel CSS generato avrai:

.box {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

Ottimizza il codice CSS generato

Aggiungere automaticamente i prefix è sicuramente comodo ma sono sicuro che il plugin che ti sto per presentare sarà ancora più interessante.

Se conosci Sass saprai che questo preprocessore ci permette generare il codice CSS in quattro forme diverse:

• expanded – il valore di default che dedica una riga per ogni selettore,
• compressed – cerca di rimuovere tutti gli spazi possibili e genera un file CSS su una singola riga,
• nested – soluzione che indenta i selettori CSS per riflettere il codice SCSS (non compatibile con dart-sass che stiamo usando),
• compact – inserisce ogni regola CSS in una sua riga (anche questa non compatibile con dart-sass)

Comprendo che potrebbe sembrare scomodo che alcuni di questi output style non funzionano con la soluzione che stiamo implementando ma la verità è che non ne hai affatto bisogno.

Grazie al plugin che ti sto per presentare risolverai tutti i problemi di ottimizzazione che puoi incontrare.

Basta installare gulp-csso e potrai far ottimizzare i tuoi CSS nel modo migliore possibile.

$ npm install --save-dev gulp-csso

Installato questo plugin ti basterà aggiungere il suo utilizzo all’interno del file gulpfile.js.

Dato che è difficile mostrarti le porzioni di codice che ho modificato via testo, ti lascio qua sotto il nuovo file gulpfile.js che puoi utilizzare:

const { dest, src } = require("gulp");
const sass = require("gulp-dart-sass");
const prefix = require("gulp-autoprefixer");
const csso = require("gulp-csso");

function scss() {
	return src("scss/*.scss")
		.pipe(sass())
		.pipe(prefix())
		.pipe(csso())
		.pipe(dest("./"));
}

exports.scss = scss;

L’ottimizzazione raggiunta grazie a CSSO va oltre la minificazione del codice CSS perché è in grado di migliorare il codice unendo le dichiarazioni sparse per il foglio di stile e applicando altri tipi di ottimizzazione che solo un computer è in grado di tenere in considerazione.

Facciamo un esempio pratico, ecco il codice che voglio testare:

.box {
	background-color: #00f;
	appearance: none;
}

.box {
	font-size: 22px;
	font-family: sans-serif;
	font-weight: bold;
	@media (min-width: 600px) {
		color: #f00;
	}
}

@media (min-width: 600px) {
	.box {
		background-color: #fff;
	}
}

Come puoi vedere, in meno di 20 righe di codice sono riuscito a fare un bel casino! Ci sono selettori doppi, media query buttate qua e là e sovrascrivo proprierà un po’ dove mi pare.

Grazie a gulp-csso non solo puoi minificare il codice rimuovendo gli spazi e i punti e virgola inutili ma anche riorganizzare automaticamente il codice per renderlo più semplice da comprendere per il browser.

Qua sotto ti lascio il codice ottimizzato da gulp-csso, anche se ho rimosso la minificazione per renderlo più leggibile:

.box {
    background-color: #00f;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 22px;
    font-family: sans-serif;
    font-weight: 700
}

@media (min-width:600px) {
    .box {
        color: red;
        background-color: #fff
    }
}

Crea la sourcemap per debuggare facilmente il codice

Essere in grado di pubblicare dei file senza spazi, a capo o altri caratteri che aggiungono inutili byte al nostro foglio di stile ottimizza il caricamento del sito web.

L’altro lato della medaglia è che debuggare un codice minificato è difficile, ogni volta che ispezioni un elemento il suo selettore non si trova al primo rigo del file style.css ma in un qualsiasi file SCSS presente nella cartella scss/.

Grazie ai plugin precedenti hai potuto compilare il tuo codice Sass, aggiungere automaticamente i prefix e ottimizzare il codice a livelli estremi.

Non sarebbe bello poter migliorare anche la fase di debug del nostro lavoro?

La soluzione a tutto sono le sourcemap!

Una sourcemap non è altro che un file con estensione .map che collega il codice minificato con il suo sorgente e mostra questo collegamento quando ispezioni il tuo codice.

Per fare questo avrai bisogno del plugin gulp-sourcemaps che puoi installare nel seguente modo:

$ npm install --save-dev gulp-sourcemaps

Adesso tutto quello che devi fare è aggiungere un nuovo step alla compilazione dei CSS per assicurarti che venga generata la sourcemap.

Ecco il gulpfile.js che ti permetterà di fare questo:

const { dest, src } = require("gulp");
const sass = require("gulp-dart-sass");
const prefix = require("gulp-autoprefixer");
const csso = require("gulp-csso");
const sourcemaps = require("gulp-sourcemaps");

function scss() {
	return src("scss/*.scss")
		.pipe(sourcemaps.init())
		.pipe(sass())
		.pipe(prefix())
		.pipe(csso())
		.pipe(sourcemaps.write("."))
		.pipe(dest("./"));
}

exports.scss = scss;

Il plugin gulp-sourcepamps è leggermente diverso dai precedenti perché non viene richiamato una sola volta.

Ha bisogno di sourcemaps.init() per mettersi in ascolto sulle modifiche effettuate dagli altri plugin per poi poter salvare il file con estensione .map nella cartella del tuo progetto grazie a sourcemaps.write('.').

Adesso che generi le sourcemap dal tuo codice minificato ti sarà molto più semplice poter scoprire dove una specifica proprietà CSS è stata dichiarata.

Lo so, ho scritto tanto ma se hai ancora qualche minuto di pazienza ti mostrerò come automatizzare ulteriormente il tuo lavoro e risparmiare un sacco di tempo.

Esegui automaticamente i task al salvataggio dei file

Ora ti trovi con un workflow molto ben strutturato e il codice CSS che generi è sia facile da leggere per i browser (ottimizzato e minificato) che per gli esseri umani che lavorano sul sito (sourcemap).

Resta ancora un piccolo problema che sarebbe utile risolvere: automatizzare la compilazione dei CSS.

Se hai seguito l’articolo passo passo e hai modificato il tuo gulpfile.js di conseguenza ti sarai accorto di una cosa molto noiosa: ogni volta che vuoi compilare il tuo CSS devi eseguire il comando gulp scss nel tuo terminale.

Non sarebbe bello poter dire a Gulp.js di osservare le modifiche che applichi ed eseguire automaticamente i task che hai creato?

Sì in effetti è veramente bello e per fortuna nostra tutto viene già offerto da Gulp.js, dobbiamo soltanto istruirlo per dirgli come fare.

Quando vuoi dire a Gulp.js di osservare un file è necessario utilizzare il suo metodo watch(), per utilizzarlo possiamo continuare a fare il destructuring di gulp modificando la prima riga del gulpfile.js nel seguente modo:

const { dest, src, watch } = require("gulp");

Come già successo per dest() e src() a questo punto hai a tua disposizione il metodo watch() per istruire Gulp.js indicando quali file deve osservare e quale task dovrà eseguire in caso di modifiche.

Niente di più semplice perché tutto quello che dovrai fare è creare un nuovo task che imposteremo a default così da dover scrivere soltanto gulp nel terminale.

A questo punto posizionati alla fine del tuo gulpfile.js e aggiungi quanto segue sotto alla dichiarazione exports.scss:

exports.default = function() {
	watch("scss/**/*.scss", scss);
};

Ora il tuo task runner eseguirà automaticamente tutte le operazioni descritte nel task scss ogni volta che un file .scss verrà modificato nella cartella scss/ e in tutte le sue sottocartelle.

Potrai aggiungere tutti i task che desideri al tuo watch() ma per gli scopi di questo articolo ci fermiamo a questo esempio perché abbiamo già superato le 3000 parole e voglio rispettare il tuo tempo.

Ricorda solo che per uscire da questo task devi usare CTRL+C per bloccarne l’esecuzione nel terminale ?

È momento di aggiornare automaticamente il browser

Prima dei saluti voglio lasciarti con un’ultima chicca che sono sicuro velocizzerà ulteriormente il tuo lavoro.

Il risultato raggiunto fino a ora è sicuramente interessante ma c’è un altro aspetto che potresti ottimizzare ed è l’aggiornamento automatico della finestra del browser.

Ebbene sì, con Gulp.js puoi fare anche questo e tutto grazie al pacchetto browser-sync.

Dato che si tratta di un pacchetto npm dovrai installarlo prima di poterlo utilizzare e anche se ormai sai come installare un pacchetto ti lascio qua sotto il codice da scrivere nel tuo terminale.

$ npm install --save-dev browser-sync

A questo punto non devi far altro che dire a Gulp.js di utilizzare questo pacchetto.

Vuoi sapere come?

Controlla il blocco di codice nella prossima sezione (o su GitHub) dove troverai l’intero gulpfile.js che abbiamo creato in questo articolo.

Conclusioni

Finalmente siamo giunti alla fine di questo articolo, che lavorone!

So che tu non desideri altro che vedere la versione completa del gulpfile.js ma prima di questo lascia che ti dica che abbiamo visto soltanto una piccola parte di quello che può fare Gulp.js.

const { dest, src, watch } = require("gulp");
const sass = require("gulp-dart-sass");
const prefix = require("gulp-autoprefixer");
const csso = require("gulp-csso");
const sourcemaps = require("gulp-sourcemaps");
const browserSync = require("browser-sync").create();

function scss() {
	return src("scss/**/*.scss")
		.pipe(sourcemaps.init())
		.pipe(sass())
		.pipe(prefix())
		.pipe(csso())
		.pipe(sourcemaps.write("."))
		.pipe(dest("./"))
		.pipe(browserSync.stream());
}

exports.scss = scss;
exports.default = function() {
	browserSync.init({
		server: {
			baseDir: ".",
			index: "/index.html"
		}
	});
	watch("scss/**/*.scss", scss);
	watch("./*.html").on("change", browserSync.reload);
};

Ecco tutto il codice presente nel mio file che mi permette di avere a mia disposizione tutte le cose fighe che ti ho presentato in questo articolo ma prima di andare via ti devi ricordare un paio di cose.

La prima (e fondamentale) cosa che ti devi ricordare è che devi installare tutti i pacchetti che ti ho presentato.

Puoi seguire passo passo l’articolo dall’inizio oppure clonare il repository su GitHub per prendere il file package.json e installare tutto nel tuo nuovo progetto con un semplice npm install.

L’ultima cosa che voglio ricordarti prima di salutarti che che su SkillsAndMore creiamo molti corsi per aiutarti a velocizzare il tuo lavoro e migliorare la tua carriera.

Se sei interessato a corsi diretti senza troppi giri di parole consulta la nostra offerta e acquista il corso che ritieni più utile in questo momento della tua vita. Nel caso tu non ti senta ancora pronto: iscriviti alla newsletter!

Ti assicuro che non te ne pentirai ?