Un'introduzione all'automazione JavaScript con Gulp

Come sviluppatori web, a volte ci troviamo a ripetere le stesse noiose attività ancora e ancora. Se consideri quanto tempo viene sprecato eseguendo un comando build o premendo Aggiorna sul tuo browser, ti renderai conto che puoi risparmiare molto tempo. Inoltre, automatizzando i tuoi processi, puoi rimanere concentrato sull'attività da svolgere invece di lasciare temporaneamente "la zona" (il tuo stato di produttività).

In questo tutorial sull'automazione JavaScript imparerai come automatizzare il tuo processo di progettazione e sviluppo con Gulp. Se sei più orientato al design, ti incoraggio a superare tutte le paure che hai e a continuare a leggere. D'altra parte, se sei uno sviluppatore sarai in grado di spazzare tutto questo una volta che avrai compreso la logica dietro.

Gulp è un sistema di compilazione che utilizza i flussi di Node.js per implementare un approccio asincrono origine-destinazione all'automazione. Tutto è scritto in JavaScript, quindi è facile per chiunque abbia conoscenze di codifica intermedie iniziare. Un processo di compilazione Gulp consiste in una raccolta di osservatori e attività. Inoltre, la comunità dietro Gulp mantiene un'enorme directory di plug-in all'interno di npm che aiuta a svolgere qualsiasi attività dalla concatenazione di JavaScript alla creazione di caratteri icona da SVG.

Alternative a Gulp

Ci sono molte alternative là fuori, la maggior parte delle quali si è generata negli ultimi due anni - la più notevole è Grunt. La gara tra Gulp e Grunt non avrà mai un chiaro vincitore, dal momento che entrambi hanno i loro pro e contro, quindi eviterò di approfondire l'argomento. In poche parole, la forte dipendenza di Grunt dalla configurazione è ciò che guida le persone verso l'approccio JavaScript di Gulp. Nel frattempo, le implementazioni della GUI native come Koala hanno guadagnato terreno, principalmente da persone che si rifiutano di entrare nella programmazione. Tuttavia, con le applicazioni in bundle è impossibile raggiungere il livello di personalizzazione ed estensibilità offerto da Gulp.

Fondamenti di automazione dei processi

Plugin

I plugin sono i mezzi attraverso i quali gulp realizza ogni processo. I plugin vengono installati tramite npm e avviati utilizzando "require".

Compiti

Per Gulp, le attività hanno sempre un'origine e una destinazione. Tra di loro si trovano le pipe che chiamano ciascun plugin e generano i risultati trasmutati nella pipe successiva.

globi

I glob sono modelli di caratteri jolly che fanno riferimento a file. I glob o gli array di glob vengono utilizzati come input nell'origine dell'attività.

Osservatori

Gli osservatori controllano i file di origine per le modifiche e chiamano attività ogni volta che viene rilevata una modifica.

gulpfile.js

Questo è il file JavaScript a cui punta il comando "gulp". Contiene di tutto, dalle attività agli osservatori o altri pezzi di codice utilizzati dalle attività.

Un compito semplice

Per iniziare, sono necessari Node.js e una shell della riga di comando con accesso come amministratore. Puoi scaricare Node.js da qui. Una volta installato, puoi eseguire il comando seguente per assicurarti che npm sia aggiornato.

 sudo npm install npm -g

Il flag -g indica che l'installazione sarà globale.

Ora sei pronto per installare Gulp e iniziare a chiamare alcune semplici attività. Utilizzare il comando seguente per installare Gulp a livello globale.

 sudo npm install gulp -g

Nota che puoi anche usare lo stesso comando per aggiornare.

Puoi scaricare lo starter kit che ti aiuterà con il tuo primo compito da toptal-gulp-tutorial/step1. Include un'attività molto semplice che compila i file SCSS in CSS. Sta usando il plugin gulp-sass, che utilizza libsass. Ho scelto libsass qui perché è molto più veloce dell'alternativa Ruby, sebbene manchi di alcune delle sue funzionalità. Una volta nella directory principale del tuo progetto, puoi utilizzare il seguente comando per installare tutti i plugin richiesti.

 npm install

Questo comando legge il file package.json e installa tutte le dipendenze richieste. Stiamo usando "npm install" qui come scorciatoia per quanto segue:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Il flag “–save-dev” aggiunge i plugin selezionati al package.json devDependencies in modo che la prossima volta che vuoi installare tutto, puoi usare il pratico “npm install”.

A questo punto puoi eseguire la tua prima attività. Esegui il comando seguente e osserva come tutti i file SCSS nella cartella /scss vengono compilati in CSS nella directory corrispondente:

 gulp scss

Si noti che in questo esempio stiamo specificando l'attività da eseguire. Se si omette il nome dell'attività, verrà eseguito quello denominato "predefinito".

Procedura dettagliata del codice

Quanto sopra si ottiene in sole 7 righe di codice JavaScript. Sicuramente ti sentirai a casa una volta che ne avrai colto la semplicità:

 var gulp = require('gulp'); var scss = require('gulp-sass');

All'inizio inizializzeremo tutti i plugin che useremo. Gulp è l'unico di cui non possiamo fare a meno:

 gulp.task('scss', function() {

Definiamo il task denominato “scss”:

 return gulp.src('scss/*.scss')

Impostare i file di origine per l'attività. Questi sono definiti come glob. In questo esempio ci riferiamo a tutti i file nella cartella “scss/” che terminano con “.scss”.

 .pipe(scss())

A questo punto chiamiamo il plugin gulp-sass che abbiamo precedentemente definito:

 .pipe(gulp.dest('css'));

Infine, utilizziamo “gulp.dest” per definire la cartella di destinazione dei nostri file. Questo potrebbe anche essere un nome di file singolo se i file sono concatenati.

Per migliorare ulteriormente questa implementazione dell'automazione dei processi, puoi provare a includere alcuni altri plugin di Gulp. Ad esempio, potresti voler ridurre al minimo il prodotto finale della tua attività utilizzando gulp-minify-css e aggiungere automaticamente i prefissi del fornitore con gulp-autoprefixer.

Impiegare un osservatore

Ho creato uno starter kit per osservatori che puoi usare subito. Puoi scaricarlo da toptal-gulp-tutorial/step2. Include una versione avanzata dell'attività SCSS creata in precedenza e un watcher che controlla i file di origine e chiama l'attività. Per avviarlo, utilizzare il seguente comando:

 gulp

Questo comando avvia l'attività "predefinita" che avvia il watcher. A questo punto puoi modificare qualsiasi file SCSS e guardare mentre i file CSS vengono ricompilati. Sarai in grado di vedere le notifiche di Gulp nella riga di comando.

Procedura dettagliata del codice

Abbiamo impostato un watcher per il nostro compito con solo 3 righe di codice extra. Detto questo, lo starter kit dell'osservatore non differisce molto dall'esempio introduttivo. In questa sezione, esamineremo tutte le aggiunte e le modifiche.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

In questo esempio, la sorgente Gulp viene fornita con un array di glob. Il primo include tutti i file che finiscono con “.scss” anche nelle sottocartelle, e il secondo esclude quelli che iniziano con “_”. In questo modo possiamo usare la funzione incorporata di SCSS @import per concatenare il file _page.scss.

 gulp.task('default', ['scss'], function() {

Qui definiamo l'attività "predefinita". L'attività "scss" viene eseguita come dipendenza prima di "predefinito".

 gulp.watch('scss/**/*.scss', ['scss']);

Infine, chiamiamo la funzione watch di Gulp per puntare a qualsiasi file che termina con ".scss" e ogni volta che si verifica un evento di modifica, per eseguire l'attività "scss".

Ora sei pronto per creare nuovi osservatori per altri processi automatizzati come la concatenazione di JavaScript, i suggerimenti sul codice, la compilazione di CoffeeScript o qualsiasi altra cosa ti venga in mente. Per approfondire questa implementazione dell'automazione JavaScript, propongo di aggiungere gulp-notify che ti avviserà quando viene eseguita un'attività. Inoltre, puoi creare un'attività separata per ridurre al minimo il codice CSS risultante e fare in modo che l'attività "scss" venga eseguita come dipendenza da quella. Infine, puoi usare gulp-rename per aggiungere il suffisso ".min" ai file risultanti.

Plugin Gulp avanzati per l'automazione JavaScript

Esistono migliaia di plugin nella base di plugin di Gulp, alcuni dei quali vanno ben oltre la semplice automazione JavaScript di un processo di compilazione. Ecco alcuni esempi eccezionali:

BrowserSync

BrowserSync inserisce CSS, JavaScript e aggiorna automaticamente il browser ogni volta che viene apportata una modifica. Inoltre, contiene una funzione ghostMode che può essere utilizzata per spaventare i tuoi colleghi o per velocizzare notevolmente i test del browser.

Sfogliare

Browserify analizza le chiamate "richiede" nella tua applicazione e le converte in un file JavaScript in bundle. Inoltre, c'è un elenco di pacchetti npm che possono essere convertiti in codice browser.

Pacchetto Web

Simile a Browserify, Webpack mira a convertire i moduli con dipendenze in file statici. Questo dà più libertà all'utente su come verranno impostate le dipendenze del modulo e non mira a seguire lo stile del codice di Node.js.

Karma

Gulp-karma porta il famigerato ambiente di test a Gulp. Karma segue l'approccio di configurazione minima che anche Gulp sostiene.

Conclusione

In questo tutorial sull'automazione dei processi ho dimostrato la bellezza e la semplicità dell'utilizzo di Gulp come strumento di compilazione. Seguendo i passaggi descritti nel tutorial, sarai ora pronto per automatizzare completamente il tuo processo di sviluppo software sia nel tuo futuro che nei tuoi progetti legacy. Investire un po' di tempo nella creazione di un sistema di build per i tuoi vecchi progetti ti farà sicuramente risparmiare tempo prezioso in futuro.

Resta sintonizzato per un tutorial Gulp più avanzato in arrivo.