Share
In de laatste les leerde je hoe je je hele project kon compileren of bouwen met korte commando's zoals knorren, gegrom horloge, slok en kloof kijken.
In deze les leert u hoe u opdrachten kunt maken die een extra laag geweldig aan uw projecten toevoegen, waardoor live herladen en browsersynchronisatie mogelijk is.
Als u de andere zelfstudies in deze serie nog niet hebt voltooid, gaat u terug en voltooit u deze voordat u hier begint.
Notitie: Om verwarring te voorkomen, is er een desktop-app en een combinatie van een Chrome-plug-in met de naam LiveReload, die vaak wordt gebruikt in combinatie met veel npm-pakketten voor automatisch herladen. Met de manier waarop we ons echter zullen instellen, zijn de desktop-apps en de browserplug-in niet vereist.
Om live herladen mogelijk te maken, moet er een localhost zijn die kan worden vernieuwd, dat wil zeggen een manier om uw site lokaal te bekijken door een webhost te simuleren met een http: // protocol in plaats van het dossier://.
Met je Grunt-project zorgen we ervoor dat een localhost de statische bestanden van je project kan weergeven en live die localhost kan herladen, met behulp van de grunt-express plug-in.
Installeer grunt-express in uw project met:
npm install grunt-express --save-dev
Schakel vervolgens de plug-in in uw Gruntfile in door deze onder uw bestaande toe te voegen grunt.loadNpmTasks lijnen:
grunt.loadNpmTasks ( 'grunt-express');
Configureer de uitdrukkelijke taak door deze code toe te voegen:
express: all: options: bases: 'build', livereload: true, open: 'http: // localhost: 3000',
Dat merk je in onze uitdrukken taakconfiguratie hebben we de livereload optie ingesteld op waar, dus nadat onze lokale preview is gestart, wordt deze automatisch opnieuw geladen wanneer er wijzigingen worden gedetecteerd.
Nu voegen we een nieuwe taak met de naam begin. We zullen deze taak gebruiken om beide te activeren uitdrukken taak en de kijk maar taak tegelijk.
Voeg dit toe onder je bestaande grunt.registerTask lijn:
Accentsconagua
grunt.registerTask ('start', ['express', 'watch']); Voer nu het commando uit:
grunt start
... en je zou je standaardbrowser moeten zien opengaan met je projectvoorbeeld erbinnen.
De kijk maar taak is nu actief en compileert uw Stylus- en Jade-wijzigingen in de map "build".
Express controleert op zijn beurt de map "build" op eventuele wijzigingen. Als uw HTML-, CSS- of JS-bestanden opnieuw worden gecompileerd, wordt uw voorbeeld automatisch opnieuw geladen.
Vervolgens gaan we door met het behalen van hetzelfde type lokalehostvoorbeeld in uw Gulp-project. Deze keer gaan we de slik-connect-plugin gebruiken.
Installeer gulp-connect in uw project met deze opdracht:
npm install --save-dev gulp-connect
Maak het toegankelijk in je Gulpfile door deze regel toe te voegen onder de andere regels waar je de hebt gebruikt vereisen() functie:
var connect = require ('gulp-connect'); Stel een nieuwe taak met de naam in aansluiten door deze code toe te voegen aan je andere taakcode:
gulp.task ('connect', function () connect.server (root: 'build', livereload: true, open: true););Zoals we met Grunt hebben gedaan, gaan we nu een aangepaste taak met de naam maken begin die zowel onze localhost-preview start en onze watch-taak initieert.
Voeg deze regel toe aan de onderkant van uw Gulpfile:
gulp.task ('start', ['connect', 'watch']);Om herladen van onze localhost preview mogelijk te maken, gaan we een andere "pipe" verbinden met het einde van beide css en html taken.
Voeg deze reloadtrigger toe aan het einde van elk:
.leiding (connect.reload ())
De taken worden:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (hernoemen ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));... en:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe (verbinden. reload ()));Voer nu het commando uit:
slok begin
... ga dan naar http: // localhost: 8080 en u ziet een voorbeeld van uw lokale site.
Sla een wijziging op in uw Jade- of Stylus-bestanden en bekijk de bliksemsnelle hercompilering en herlaad!
Nu u uw localhost-preview automatisch opnieuw laadt, kunt u dat laten en nog steeds een eersteklas ontwikkelingsproces instellen voor uw project. Als u echter cross-browser- en cross-device-testen wilt doen, is het ook de moeite waard om BrowserSync in beeld te hebben.
Met BrowserSync krijgt u een preview-URL die u in elke browser op uw machine kunt aansluiten, evenals browsers op elk ander apparaat op dezelfde internetverbinding.
Alle voorvertoningen die u uitvoert, worden vervolgens opnieuw geladen terwijl u wijzigingen aanbrengt, zodat u de resultaten over de hele linie kunt bekijken en al uw interacties op elk exemplaar worden gespiegeld. Als u in één browser scrolt of een menu opent, ziet u hoe elke andere browser en elk ander apparaat tegelijkertijd reageren.
Om de grunt-browser-sync-plug-in in uw Grunt-project te installeren, voert u de volgende opdracht uit:
npm install grunt-browser-sync --save-dev
Geef commentaar of verwijder de regel die je hebt gebruikt om grunt-express in te schakelen:
// grunt.loadNpmTasks ('grunt-express');Voeg vervolgens deze regel toe om grunt-browser-sync in te schakelen:
grunt.loadNpmTasks ( 'grunt-browser-sync');
Geef commentaar of verwijder de uitdrukken taak die u eerder hebt gemaakt en voeg deze configuratiecode toe voor de taak browserSync in plaats daarvan:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], options: watchTask: true, server: baseDir: "build",
Zoek uw begin taak en verander het zodat het de browserSync taak in plaats van de uitdrukken taak, van:
grunt.registerTask ('start', ['express', 'watch']);… naar:
grunt.registerTask ('start', ['browserSync', 'watch']);Nu, wanneer u de opdracht uitvoert:
grunt start
... u ziet nog steeds een voorbeeld van een lokale host geopend en deze wordt nog steeds opnieuw geladen wanneer u wijzigingen opslaat, maar het verschil is nu dat de browsersynchronisatie actief is, net als de mogelijkheid om uw voorbeeld op andere apparaten te bekijken.
In de terminal na het starten van uw BrowserSync-server ziet u dit:
- Lokaal: http: // localhost: 3000 Extern: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI External: http://192.168.1.3:3001 -
Pak het adres met het label lokaal, sla het in een aantal van de andere browsers op uw machine en voer het adres in dat is geëtiketteerd extern naar andere apparaten die dezelfde verbinding delen. Bekijk vervolgens de gesynchroniseerde antwoorden die u bij alle instanties tegenkomt terwijl u met een van hen omgaat.
Ga voor meer informatie over BrowserSync via Grunt naar: http://www.browsersync.io/docs/grunt/
Nu zullen we hetzelfde proces instellen, dit keer met behulp van de browser-sync plug-in voor Gulp.
Installeer de plug-in in uw Gulp-project met:
npm installeer browser-sync gulp --save-dev
Geef commentaar of verwijder de volgende regel:
// var connect = require ('gulp-connect');... en vervang het door:
var browserSync = vereisen ('browsersynchronisatie');Geef commentaar of verwijder de bestaande aansluiten taak en voeg deze nieuw toe browser-sync taak in plaats daarvan:
gulp.task ('browsersynchronisatie', functie () browserSync (server: baseDir: "build"););Zoek aan het einde van de css en html-taken de twee plaatsen op waar je de regel hebt toegevoegd:
.leiding (connect.reload ())
... en vervang elk van deze twee regels door:
.leiding (browserSync.reload (stroom: true))
En zoek ten slotte uw bestaande begin taak en bewerk deze om de browser-sync taak in plaats van de aansluiten taak, ter vervanging van dit:
gulp.task ('start', ['connect', 'watch']);… hiermee:
gulp.task ('start', ['browsersynchronisatie', 'kijk']);Nu, wanneer u de opdracht uitvoert:
slok begin
... een browservenster wordt geopend met uw voorbeeld erin. Net zoals toen je BrowserSync via Grunt gebruikte, zullen de URL's van de preview nu in elke browser worden gesynchroniseerd op elk apparaat dat geen internetverbinding heeft.
Ga voor meer informatie over BrowserSync via Gulp naar: http://www.browsersync.io/docs/gulp/
U hebt nu alle essentiële zaken doorlopen van het opzetten van uw eigen projecten van nul tot het gebruik van de opdrachtregel tijdens de ontwikkeling. Maar wat als je niet vanaf nul wilt beginnen. Hoe zit het wanneer u bestaande frameworks van derden wilt gebruiken, of als u gewoon een voorsprong wilt nemen?
In de volgende tutorial leer je hoe je de commandoregel gebruikt om compleet nieuwe projecten in slechts enkele ogenblikken te scaffolden, compleet met alle code van derden die ze nodig hebben, evenals Grunt of Gulp taakbeheer helemaal klaar en klaar om te gaan.
Ik zie je in de volgende tutorial!
