Share
De taakloper Gulp.js wordt de laatste tijd steeds populairder. Het kan voor veel dingen worden gebruikt, zoals het aaneenschakelen van JavaScript-bestanden of het verkleinen van afbeeldingen. Als je Gulp.js nieuw voor de geest hebt, raad ik je aan om te beginnen met het beheren van je bouwtaken met Gulp.js.
In deze zelfstudie leert u hoe u Gulp.js kunt gebruiken om een lokale webserver met ingebouwde server te gebruiken, livereload ondersteuning.
Laten we aannemen dat we een enkele pagina-applicatie willen ontwikkelen. Het toegangspunt voor deze app is eenvoudig index.html het dossier. Ons doel is om via de browser toegang te krijgen tot dit bestand door naar localhost. In het verleden, misschien jij een Apache- of Nginx-server instellen. Welnu, dat is niet meer nodig.
Tegenwoordig bestaat een implementatie in JavaScript voor bijna alles, zelfs voor een webserver. De meest populaire is Connect. We zullen het gebruiken, door gebruik te maken van een Gulp.js plugin genaamd gulp-connect.
In de volgende secties zullen we een lokale webserver instellen voor een toepassing met één pagina, dus ik ga ervan uit dat u al de basisbestanden hebt ingesteld, zoals de gulpfile.js het dossier.
We beginnen met het installeren van de Connect-plug-in met de onderstaande opdracht. Alles wat we nodig hebben, wordt geïnstalleerd met deze enkele opdracht.
npm install --save-dev gulp-connect
Tip: npm install --save-dev kan worden afgekort met npm i -D.
Laten we nu een taak definiëren voor de webserver. Onze gulpfile.js moet er dan als volgt uitzien:
Accentsconagua
var gulp = vereisen ('gulp'), connect = require ('gulp-connect'); gulp.task ('webserver', function () connect.server ();); gulp.task ('standaard', ['webserver']); We kunnen de webserver nu starten door hem gewoon uit te voeren slok in de terminal. We kunnen openen localhost: 8080 in onze browser, waar we zouden moeten zien index.html. De webserver koppelt de bestandsstructuur van de map, waarbij de gulpfile.js leeft in, naar de wortel van localhost: 8080. De server wordt uitgevoerd totdat u de taak stopt door op te drukken Ctrl + c op je toetsenbord. Super goed!
U kunt de broncode voor dit en alle volgende voorbeelden op Github vinden. Elk voorbeeld bevat alle benodigde bestanden om een werkende opstelling te reproduceren. Je moet gewoon rennen npm installeren in de respectieve map.
livereload OndersteuningHet opzetten van de basisserver was eenvoudig, toch? Dus laten we doorgaan met krijgen livereload running. We moeten twee dingen doen: vertel eerst aan de webserver om mee te beginnen livereload ondersteuning en ten tweede, vertellen we livereload wanneer de pagina moet worden vernieuwd met nieuwe inhoud.
De eerste stap is eenvoudig. Stel gewoon de livereload eigendom aan waar. De web Server taak ziet er dan als volgt uit:
gulp.task ('webserver', function () connect.server (livereload: true););De tweede stap hangt af van uw gebruik. In dit voorbeeld zullen we automatische compilatie van LESS-bestanden instellen op een CSS-stylesheet en deze in de browser injecteren. Laten we dit voorbeeld in zijn onderdelen opsplitsen. We hebben een "bewaker" nodig die controleert of sommige MINDER-bestanden zijn gewijzigd. Deze watcher zou dan de LESS-compiler moeten activeren, die een CSS-bestand uitvoert. Dit CSS-bestand zou dan via moeten worden geïnjecteerd livereload.
Voor dit voorbeeld gebruiken we de gulp-loze plug-in. Je kunt het installeren door het uit te voeren npm install --save-dev gulp-less. De watcher is al verzonden met Gulp.js. Onze app-bestandsstructuur zou er ongeveer zo uit moeten zien:
. ├── node_modules │ └── ... ├── stijlen │ └── main.less ├── gulpfile.js ├── index.html └── package.json
In de kijk maar taak, Gulp.js luistert naar wijzigingen in alle *.minder bestanden in de stijlen map en triggert de minder taak. Hier de main.less bestand is het toegangspunt voor MINDER. Na elke compileerstap wordt het resultaat automatisch in de browser geïnjecteerd. De code voor de gulpfile.js ziet eruit als het volgende, voel je vrij knippen en plakken het, voor uw project.
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 ('standaard', ['minder', 'webserver', 'kijk maar']); Laten we opnieuw beginnen slok in de terminal en open opnieuw localhost: 8080 in de browser. We kunnen nu een paar wijzigingen aanbrengen in een MINDER bestand in de stijlen map. Het wordt onmiddellijk gecompileerd en vernieuwd in de browser. Let daar op je hebt geen browserextensies nodig. livereload werkt uit de doos.
Houd er rekening mee dat de vorige gulpfile.js is slechts een minimale demonstratie van hoe Gulp.js als een webserver te gebruiken livereload. Ik raad ten zeerste aan om met een aantal andere plug-ins te spelen. Je moet ook proberen de taakstructuur opnieuw in te delen en de niet-ingebouwde slikwacht-plug-in te gebruiken, waarmee je alleen de gewijzigde bestanden kunt verwerken. Dit wordt belangrijk als u met een grotere codebasis werkt. Later in deze tutorial zullen we zien hoe een alternatieve taakstructuur eruit zou kunnen zien.
De slok-connect plugin zelf heeft veel configuratie-opties. U kunt bijvoorbeeld de webserverpoort of de hostnaam wijzigen. U kunt zelfs een aangepaste hostnaam met poort gebruiken 80 (standaard is localhost: 8080).
connect.server (poort: 80, host: 'gulp.dev');
Om dit te laten werken, moeten we hebben gulp.dev in ons hosts-bestand en voer de opdracht uit sudo gulp. Beheerdersrechten zijn nodig om de poort te kunnen gebruiken 80.
U kunt nog verder gaan met de plug-in om meerdere webservers tegelijk te laten paaien. Dit wordt bijvoorbeeld handig als u een ontwikkelsewebserver wilt uitvoeren en integratietests wilt uitvoeren, gelijktijdig.
slok-connect biedt ook de mogelijkheid om verschillende mappen als een hoofdmap te gebruiken. Wanneer u bijvoorbeeld CoffeeScript gebruikt en u de gecompileerde JavaScript-bestanden in een tijdelijke map wilt opslaan, kunt u deze map vervolgens koppelen zonder de bronmap te vervuilen..
Bekijk voor meer voorbeelden de GitHub-repository.
In het vorige voorbeeld hebben we een minimum ingesteld gulpfile.js om MINDER bestanden te compileren naar CSS en injecteer ze onmiddellijk in de browser. Het werkte, maar we kunnen het beter doen. Het kan problematisch zijn dat we de compileren en livereload stappen in één taak. Dus laten we ze opsplitsen en kijken naar veranderingen in de gegenereerde bestanden. Daarvoor zullen we de eerder genoemde gebruiken slok-horloge inpluggen.
Laten we nog een stap verder gaan en een compilatie stap van CoffeeScript toevoegen. Met deze extra stap zou de nieuwe structuur duidelijker moeten zijn. We installeren de nieuwe plug-ins in één batch via:
npm install --save-dev gulp-watch gulp-coffee
En vereisen ze in de top van onze gulpfile.js. In de volgende opstelling neem ik aan dat je al een aantal hebt .koffie bestanden in een opgeroepen map scripts. Bekijk deze repo voor een voorbeeld van de setup. De gerefactureerde gulpfile.js zou er als volgt uit kunnen zien. We zullen de wijzigingen stap voor stap doornemen.
var gulp = vereisen ('gulp'), connect = require ('gulp-connect'), watch = require ('gulp-watch'), less = require ('gulp-less'), coffee = require ('gulp- koffie'); 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 ('standaard', ['minder', 'koffie', 'webserver', 'livereload', 'watch']); De grootste verandering die we zien, is de extra livereload taak. Deze taak kijkt alleen (via de slok-horloge plugin) voor wijzigingen in de gecompileerde bestanden en deze te vernieuwen in de browser. De gewoonte kijk maar() functie stelt ons in staat om de gewijzigde bestanden gewoon opnieuw te laden, terwijl de ingebouwde gulp.watch () opdracht laadt alle bestanden opnieuw en niet alleen de gewijzigde bestanden.
Vanwege deze enkele extra taak hebben we geen a nodig .leiding (connect.reload ()) opdracht na elke compileerstap. Daarom hebben we de taken gescheiden door hun zorgen, wat altijd een goed idee is bij de ontwikkeling van software.
We hebben ook gemerkt dat de gecompileerde bestanden niet meer worden opgeslagen in hun respectieve bronmap. Ze worden nu opgeslagen in een tijdelijke map met de naam .tmp. De inhoud van deze map zijn alleen gegenereerde bestanden en vervuilt niet de stijlen of scripts mappen langer. Het wordt ook aanbevolen om deze map uit te sluiten van uw revisiesysteem. Alles wat we moeten doen om dit te laten werken, is ook te monteren .tmp als een rootmap, die wordt gedaan door
root: ['.', '.tmp']
Deze gerefactureerde installatie zou net zo moeten werken als de vorige. Maar het is veel schoner en gemakkelijker uit te breiden.
U hebt net geleerd hoe u Gulp.js als een webserver kunt gebruiken.
U kunt deze techniek combineren met vele andere use-cases, zoals het testen of het bouwen van uw enkele pagina-applicatie. Merk op dat deze webserver alleen bedoeld is voor lokale ontwikkeling. Voor productiedoeleinden dient u een meer performante oplossing zoals Nginx of een CDN te gebruiken.
Merk op dat alle gepresenteerde functies ook mogelijk zijn met Grunt of soortgelijke projecten. Gulp.js biedt zojuist een heel eenvoudig en elegant manier om dingen te doen.
