Gulp come server Web di sviluppo

Il task runner Gulp.js sta diventando sempre più popolare ultimamente. Può essere usato per molte cose, come concatenare file JavaScript o minimizzare immagini. Se non conosci Gulp.js, ti consiglio di iniziare a gestire le tue attività di build con Gulp.js. 

In questo tutorial imparerai come usare Gulp.js, per eseguire un server web locale con built-in, livereload supporto.

La vecchia via

Supponiamo di voler sviluppare un'applicazione a singola pagina. Il punto di ingresso per questa app è semplice index.html file. Il nostro obiettivo è accedere a questo file tramite il browser, andando a localhost. In passato, forse tu configurare un server Apache o Nginx. Bene, non è più necessario.

Un modo migliore

Oggi esiste un'implementazione in JavaScript per quasi tutto, anche per un server web. Il più popolare si chiama Connect. Lo useremo, utilizzando un plugin Gulp.js chiamato gulp-connect. 

Nelle sezioni seguenti, configureremo un server web locale per un'applicazione a singola pagina, quindi presumo che tu abbia già configurato i file di base, come il gulpfile.js file.

Configurazione iniziale

Iniziamo installando il plug-in Connect con il comando seguente. Tutto ciò di cui abbiamo bisogno verrà installato con questo singolo comando.

Installa npm --save-dev gulp-connect

Mancia: npm install --save-dev può essere abbreviato con npm i -D.

Ora, definiamo un'attività per il web server. Nostro gulpfile.js dovrebbe quindi assomigliare a questo:

var gulp = require ('gulp'), connect = require ('gulp-connect'); gulp.task ('webserver', function () connect.server ();); gulp.task ('default', ['webserver']);

Ora possiamo avviare il web server semplicemente eseguendo sorso nel terminale. Possiamo aprirci localhost: 8080 nel nostro browser, dove dovremmo vedere index.html. Il server Web monta la struttura del file della cartella, dove il file gulpfile.js vive dentro, alla radice di localhost: 8080. Il server verrà eseguito finché non si interrompe l'attività premendo Ctrl + c sulla tua tastiera. grande!

Puoi trovare il codice sorgente per questo e tutti gli esempi seguenti su Github. Ogni esempio contiene tutti i file necessari per riprodurre una configurazione di lavoro. Hai solo bisogno di correre installazione di npm nella rispettiva directory.

Aggiunta livereload Supporto

La configurazione del server Web di base è stata semplice, giusto? Quindi continuiamo ad avere livereload in esecuzione. Dobbiamo fare due cose: prima dire al server web per iniziare livereload supporto e in secondo luogo, diciamo livereload quando aggiornare la pagina con nuovi contenuti.

Il primo passo è semplice. Basta impostare il livereload proprietà a vero. Il server web il compito quindi assomiglia a questo:

gulp.task ('webserver', function () connect.server (livereload: true););

Il secondo passo dipende dal tuo caso d'uso. In questo esempio, configureremo la compilazione automatica dei file LESS in un foglio di stile CSS e la inseriremo nel browser. Analizziamo questo esempio nelle sue parti. Abbiamo bisogno di un "osservatore", che controlli se alcuni file LESS sono stati modificati. Questo osservatore dovrebbe quindi attivare il compilatore LESS, che emette un file CSS. Questo file CSS dovrebbe quindi essere iniettato tramite livereload.

Per questo esempio, useremo il plugin senza gulp. Puoi installarlo eseguendo npm install --save-dev gulp-less. L'osservatore viene già spedito con Gulp.js. La struttura del nostro file app dovrebbe essere più o meno così:

. ├── node_modules │ └── ... ├── stili │ └── main.less ├── gulpfile.js ├── index.html └── package.json

Nel orologio compito, Gulp.js ascolta le modifiche in tutto *.Di meno file nel stili cartella e attiva il Di meno compito. Qui, il main.less file è il punto di ingresso per LESS. Dopo ogni fase di compilazione, il risultato verrà automaticamente iniettato nel browser. Il codice per il gulpfile.js sembra il seguente, sentiti libero di farlo copia e incolla esso, al tuo progetto.

var gulp = require ('gulp'), connect = require ('gulp-connect'), less = require ('gulp-less'); gulp.task ('webserver', function () connect.server (livereload: true);); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('styles')) .pipe (connect.reload ( ));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['less']);) gulp.task ('default', ['less', 'webserver', 'orologio']);

Rieseguiamo sorso nel terminale e riaprire localhost: 8080 nel browser. Ora possiamo apportare alcune modifiche a un file LESS in stili cartella. Sarà immediatamente compilato e aggiornato nel browser. Nota che non hai bisogno di estensioni del browser. livereload funziona fuori dalla scatola.

A pochi aggiustamenti

Si prega di tenere presente che il precedente gulpfile.js è solo una minima dimostrazione di come usare Gulp.js come server web con livereload. Consiglio vivamente di giocare con alcuni altri plugin. Dovresti anche provare a riorganizzare la struttura delle attività e utilizzare il plugin gulp-watch non incorporato, che ti consente di elaborare solo i file modificati. Questo diventa importante se stai lavorando con una base di codice più grande. Più avanti in questo tutorial, vedremo quale potrebbe essere una struttura di task alternativa.

Modifica del nome host e della porta

Il gulp-connect il plugin stesso ha molte opzioni di configurazione. Ad esempio, è possibile modificare la porta del server Web o il nome host. È anche possibile utilizzare un nome host personalizzato con porta 80 (l'impostazione predefinita è localhost: 8080).

connect.server (port: 80, host: 'gulp.dev');

Per farlo funzionare, dobbiamo averlo gulp.dev nel nostro file hosts ed esegui il comando sudo gulp. I diritti di amministratore sono necessari per utilizzare la porta 80.

Alcune funzionalità avanzate

Puoi andare ancora oltre usando il plug-in di connessione per generare contemporaneamente più server web. Ciò diventa utile, ad esempio, se si desidera eseguire un server Web di sviluppo ed eseguire test di integrazione, contemporaneamente.

gulp-connect fornisce anche la possibilità di utilizzare diverse directory come cartella principale. Ad esempio, quando si utilizza CoffeeScript e si desidera salvare i file JavaScript compilati in una cartella temporanea, è possibile quindi montare questa cartella senza inquinare la cartella di origine.

Per ulteriori esempi, si prega di controllare il repository GitHub.

Refactoring Il nostro codice

Nell'esempio precedente abbiamo impostato un minimo gulpfile.js per compilare file LESS su CSS e iniettarli immediatamente nel browser. Ha funzionato, ma possiamo fare di meglio. Potrebbe essere problematico che abbiamo mescolato il compilare e livereload passi in un compito. Quindi, dividiamoli e osserviamo le modifiche nei file generati. Per questo, useremo il già citato gulp-watch collegare.

Andiamo anche oltre e aggiungiamo un passo di compilazione CoffeeScript. Con questo passaggio aggiuntivo, la nuova struttura dovrebbe essere più chiara. Installiamo i nuovi plugin in un unico lotto tramite:

npm installa --save-dev gulp-watch gulp-coffee 

E richiedere loro nella parte superiore del nostro gulpfile.js. Nella seguente configurazione, presumo che ne possiedi già .caffè file in una directory chiamata script. Per una configurazione di esempio, si prega di controllare questo repo. Il refactored gulpfile.js potrebbe apparire come il seguente Analizzeremo le modifiche, passo dopo passo.

var gulp = require ('gulp'), connect = require ('gulp-connect'), watch = require ('gulp-watch'), less = require ('gulp-less'), coffee = require ('gulp- caffè'); gulp.task ('webserver', function () connect.server (livereload: true, root: ['.', '.tmp']);); gulp.task ('livereload', function () gulp.src (['. tmp / styles / *. css', '.tmp / scripts / *. js']) .pipe (watch ()) .pipe ( connect.reload ());); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('. tmp / styles'));); gulp.task ('coffee', function () gulp.src ('scripts / *. coffee') .pipe (coffee ()) .pipe (gulp.dest ('.tmp / scripts'));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['less']); gulp.watch ('scripts / *. coffee', ['coffee']); ) gulp.task ('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

Il più grande cambiamento che vediamo è l'ulteriore livereload compito. Questo compito si limita a guardare (tramite il gulp-watch plugin) per le modifiche nei file compilati e li aggiorna nel browser. L'abitudine orologio() la funzione ci consente di ricaricare solo i file modificati, mentre il built-in gulp.watch () comando dovrebbe ricaricare tutti i file e non solo quelli modificati.

A causa di questa singola attività aggiuntiva, non abbiamo bisogno di a .tubo (connect.reload ()) comando dopo ogni fase di compilazione. Quindi abbiamo separato i compiti dalle loro preoccupazioni, che è sempre una buona idea nello sviluppo del software.

Abbiamo anche notato che i file compilati non vengono più salvati nella rispettiva cartella di origine. Ora sono memorizzati in una cartella temporanea denominata .tmp. I contenuti di questa cartella sono solo file generati e non inquinano il file stili o script directory più a lungo. Si consiglia inoltre di escludere questa cartella dal sistema di controllo di revisione. Tutto quello che dobbiamo fare per farlo funzionare, è anche montare .tmp come una cartella radice, che è fatta da

root: ['.', '.tmp']

Questa configurazione refactored dovrebbe funzionare come quella precedente. Ma è molto più pulito e più facile da estendere.

Conclusione

Hai appena imparato a usare Gulp.js come server web. 

Puoi combinare questa tecnica con molti altri casi d'uso, come test o creazione della tua applicazione a singola pagina. Nota che questo server web è pensato solo per lo sviluppo locale. Per scopi di produzione, è necessario utilizzare una soluzione più performante come Nginx o un CDN. 

Si noti che tutte le funzionalità presentate sono anche possibili con Grunt o progetti simili. Gulp.js fornisce solo a molto semplice ed elegante modo di fare le cose.