Gulp som en utviklings webserver

Oppgaveløperen Gulp.js blir stadig mer populært i det siste. Den kan brukes til mange ting, for eksempel sammenkobling av JavaScript-filer eller minifisering av bilder. Hvis du er ny på Gulp.js, anbefaler jeg deg å begynne med å administrere dine byggeoppgaver med Gulp.js. 

I denne opplæringen lærer du hvordan du bruker Gulp.js, for å kunne kjøre en lokal webserver med innebygd, livereload Brukerstøtte.

Den gamle veien

La oss anta at vi ønsker å utvikle en enkelt side applikasjon. Inngangspunktet for denne appen er en enkel index.html fil. Vårt mål er å få tilgang til denne filen gjennom nettleseren, ved å gå til lokal vert. Tidligere, kanskje du sett opp en Apache eller Nginx server. Vel, det trengs ikke lenger.

En bedre måte

I dag finnes det en implementering i JavaScript for nesten alt, selv for en webserver. Den mest populære kalles Connect. Vi skal bruke den ved å bruke et Gulp.js-plugin kalt gulp-connect. 

I de følgende avsnittene vil vi sette opp en lokal webserver for en enkelt side-applikasjon, så jeg antar at du allerede har konfigurert de grunnleggende filene, som for eksempel gulpfile.js fil.

Førstegangs oppsett

Vi starter med å installere Connect plugin med kommandoen nedenfor. Alt vi trenger vil bli installert med denne kommandoen.

npm installere - save-dev gulp-connect

Tips: npm installere - save-dev kan forkortes med npm i -D.

La oss nå definere en oppgave for webserveren. Våre gulpfile.js bør da se slik ut:

var gulp = krever ('gulp'), connect = kreve ('gulp-connect'); gulp.task ('webserver', funksjon () connect.server ();); gulp.task ('standard', ['webserver']);

Vi kan nå starte webserveren ved å bare kjøre gulp i terminalen. Vi kan åpne opp localhost: 8080 i nettleseren vår, hvor vi skal se index.html. Webserveren styrer filstrukturen i mappen, der den gulpfile.js lever i, til roten til localhost: 8080. Serveren kjører til du stopper oppgaven ved å trykke Ctrl + c på tastaturet ditt. Flott!

Du finner kildekoden for dette og alle følgende eksempler på Github. Hvert eksempel inneholder alle nødvendige filer for å reprodusere et arbeidsoppsett. Du trenger bare å løpe npm installasjon i den respektive katalogen.

legge livereload Brukerstøtte

Det var enkelt å sette opp den grunnleggende webserveren, ikke sant? Så la oss fortsette å få livereload løping. Vi må gjøre to ting: Først må du fortelle webserveren å begynne med livereload støtte og for det andre forteller vi livereload når skal du oppdatere siden med nytt innhold.

Det første trinnet er enkelt. Bare sett livereload eiendom til ekte. De Internett server oppgaven ser så ut som dette:

gulp.task ('webserver', funksjon () connect.server (leverload: true););

Det andre trinnet avhenger av brukssaken din. I dette eksempelet vil vi sette opp automatisk kompilering av LESS-filer til et CSS-stilark og injisere det i nettleseren. La oss bryte ned dette eksemplet i sine deler. Vi trenger en "watcher", som sjekker om noen mindre filer har blitt endret. Denne overvåkeren skal da utløse den MINDER kompilatoren, som utfører en CSS-fil. Denne CSS-filen skal da injiseres via livereload.

For dette eksempelet vil vi bruke plug-in-pluggen. Du kan installere den ved å kjøre npm installere - save-dev gulp-less. Vaktmesteren leveres allerede med Gulp.js. Vår app fil struktur bør omtrent se slik ut:

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

I se Oppgave, Gulp.js lytter etter endringer i alle *.mindre filer i stiler mappe og utløser mindre oppgave. Her, den main.less filen er inngangspunktet for MINDRE. Etter hvert kompileringstrinn blir resultatet automatisk injisert i nettleseren. Koden for gulpfile.js ser ut som følgende, vær så snill å kopiere og lime inn det til prosjektet ditt.

var gulp = krever ('gulp'), connect = krever ('gulp-connect'), mindre = krever ('gulp-less'); gulp.task ('webserver', funksjon () connect.server (leverload: true);); gulp.task ('mindre', funksjon () gulp.src ('styles / main.less') .pipe (mindre ()) .pipe (gulp.dest ('styles')) .pipe (connect.reload ));); gulp.task ('watch', funksjon () gulp.watch ('stiler / *. mindre', ['mindre']);)) gulp.task ('standard', ['mindre', 'webserver' 'se']);

La oss gjenta gulp i terminalen og åpne opp igjen localhost: 8080 i nettleseren. Vi kan nå gjøre noen endringer i en MINDRE fil i stiler mappe. Det blir umiddelbart kompilert og oppdatert i nettleseren. Noter det Du trenger ikke noen nettleserutvidelser. livereload virker ut av esken.

Noen få justeringer

Husk at forrige gulpfile.js er bare en minimal demonstrasjon av hvordan du bruker Gulp.js som en webserver med livereload. Jeg anbefaler på det sterkeste å leke med noen andre plugins. Du bør også prøve å omorganisere oppgavestrukturen og bruke det ikke-innebygde plug-in-plugget, som lar deg behandle bare de endrede filene. Dette blir viktig hvis du jobber med en større kodebase. Senere i denne opplæringen ser vi hva en alternativ oppgavestruktur kan se ut.

Endre vertsnavnet og porten

De svelge-tilkobling Plugin selv har mange konfigurasjonsalternativer. For eksempel kan du endre webserverporten eller vertsnavnet. Du kan til og med bruke et egendefinert vertsnavn med port 80 (standard er localhost: 8080).

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

For å få dette til å virke, må vi ha gulp.dev i vår vertsfil og kjør kommandoen sudo gulp. Administratorrettigheter er nødvendig for å kunne bruke port 80.

Noen avanserte funksjoner

Du kan gå enda lenger ved hjelp av plug-in plugin for å gyte flere webservere samtidig. Dette blir nyttig, for eksempel hvis du vil kjøre en utviklingswebserver og kjøre integreringstester, samtidig.

svelge-tilkobling gir også muligheten til å bruke flere kataloger som en rotmappe. Når du for eksempel bruker CoffeeScript, og du vil lagre de kompilerte JavaScript-filene i en midlertidig mappe, kan du deretter montere denne mappen uten å forurense kildemappen din.

For flere eksempler, sjekk ut GitHub-depotet.

Refactoring Vår kode

I det forrige eksempelet installerer vi en minimal gulpfile.js å kompilere MINDRE filer til CSS og injisere dem umiddelbart i nettleseren. Det fungerte, men vi kan gjøre det bedre. Det kan være problematisk at vi blandet kompilere og livereload Trinn i en oppgave. Så, la oss dele dem opp og se etter endringer i de genererte filene. For det vil vi bruke den tidligere nevnte jafs-klokke plugg inn.

La oss gå enda et skritt videre og legge til et CoffeeScript-kompileringstrinn. Med dette ekstra trinnet bør den nye strukturen være klarere. Vi installerer de nye pluginene i en batch via:

npm installere - save-dev gulp-watch gulp-kaffe 

Og krever dem i toppen av vår gulpfile.js. I det følgende oppsettet antar jeg at du allerede har noen .kaffe filer i en katalog som heter skript. For et eksempel oppsett, vennligst sjekk denne repoen. Den refactored gulpfile.js kan se ut som følgende. Vi går gjennom endringene, trinnvis.

var gulp = krever ('gulp'), connect = krever ('gulp-connect'), watch = krever ('gulp-watch'), mindre = krever ('gulp-less'), kaffe = kaffe'); gulp.task ('webserver', funksjon () connect.server (levereload: true, root: ['.', '.tmp']);); gulp.task ('livereload', funksjon () gulp.src (['. tmp / styles / *. css', '.tmp / scripts / *. js']) .pipe connect.reload ());); gulp.task ('mindre', funksjon () gulp.src ('styles / main.less') .pipe (mindre ()) .pipe (gulp.dest ('. tmp / styles'));); gulp.task ('kaffe', funksjon () gulp.src ('scripts / *. kaffe') .pipe (kaffe ()) .pipe (gulp.dest ('. tmp / scripts'));); gulp.task ('watch', funksjon () gulp.watch ('stiler / *. mindre', ['mindre']); gulp.watch ('skript / *. kaffe', ['kaffe']); ) gulp.task ('standard', ['mindre', 'kaffe', 'webserver', 'livereload', 'watch']);

Den største forandringen vi ser er tillegget livereload oppgave. Denne oppgaven ser bare på (via jafs-klokke plugin) for endringer i kompilerte filer og oppdaterer dem i nettleseren. Tollen se() funksjonen tillater oss å bare laste om de endrede filene, mens den innebygde gulp.watch () kommandoen ville laste alle filene på nytt og ikke bare de endrede.

På grunn av denne eneste ekstra oppgaven trenger vi ikke en .rør (connect.reload ()) kommando etter hvert kompileringstrinn. Så vi skilt opp oppgavene av deres bekymringer, noe som alltid er en god idé i programvareutvikling.

Vi la også merke til at de kompilerte filene ikke lagres i deres respektive kildemappe lenger. De lagres nå i en midlertidig mappe som heter .tmp. Innholdet i denne mappen er bare genererte filer og forurenser ikke stiler eller skript kataloger lenger. Det anbefales også å ekskludere denne mappen fra revisjonskontrollsystemet. Alt vi trenger å gjøre for å få dette til å fungere, er å også montere .tmp som en rotmappe, som er gjort av

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

Dette refactored oppsettet skal fungere som det før. Men det er renere og lettere å utvide.

Konklusjon

Du har nettopp lært hvordan du bruker Gulp.js som en webserver. 

Du kan kombinere denne teknikken med mange andre brukstilfeller, for eksempel testing eller bygging av enkeltapplikasjon. Merk at denne webserveren bare er ment for lokal utvikling. For produksjonsformål bør du bruke en mer effektiv løsning som Nginx eller en CDN. 

Legg merke til at alle de presenterte funksjonene også er mulige med Grunt eller lignende prosjekter. Gulp.js gir bare en veldig enkel og elegant måte å gjøre ting på.