Share
I den siste leksjonen lærte du hvordan du får hele prosjektet ditt kompilert eller bygget med korte kommandoer som grynte, grunt ur, gulp og gulp klokke.
I denne leksjonen lærer du hvordan du oppretter kommandoer som legger til et ekstra lag av kjempebra til prosjektene dine, slik at du kan gjenopprette nettleseren og nettleserens synkronisering.
Hvis du ikke har fullført de andre opplæringsprogrammene i denne serien, vennligst gå tilbake og fullfør dem før du starter her.
Merk: For å forhindre forvirring er det en desktop app og Chrome plugin-kombinasjon som heter LiveReload, som ofte brukes sammen med mange npm-pakker for å håndtere automatisert lasting. Med måten vi skal sette opp, er det ikke nødvendig med skrivebordsprogrammer og nettleser-plugin.
For å tillate live reloading på jobb må det være et lokalhost som kan oppdateres, det vil si en måte å se nettstedet ditt lokalt simulere en webverten med en http: // protokoll i stedet for fil://.
Med ditt Grunt-prosjekt vil vi sørge for at en lokalhost kan betjene prosjektets statiske filer, og levere på nytt det lokalehostet, ved hjelp av grunt-express plugin.
Installer grunt-express i prosjektet ditt med:
npm installere grunt-express - save-dev
Aktiver deretter pluginet i Gruntfile ved å legge til dette under din eksisterende grunt.loadNpmTasks linjer:
grunt.loadNpmTasks ( 'grov-express');
Konfigurer ekspresoppgaven ved å legge til denne koden:
uttrykk: alle: alternativer: baser: 'build', livereload: true, open: 'http: // localhost: 3000',
Du vil legge merke til det i vår uttrykke Oppgavekonfigurasjon vi har livereload alternativet satt til ekte, så etter at vår lokale forhåndsvisning er lansert, vil den automatisk lastes om når endringer oppdages.
Nå legger vi til en ny oppgave som heter start. Vi bruker denne oppgaven til å utløse begge uttrykke oppgave og se oppgave på en gang.
Legg til dette under din eksisterende grunt.registerTask linje:
Accentsconagua
grunt.registerTask ('start', ['express', 'watch']); Kjør nå kommandoen:
grunt start
... og du bør se standard nettleser åpne opp med prosjektet forhåndsvisning vises inni.
De se oppgaven kjører nå og vil kompilere Stylus og Jade endringer i "build" -mappen.
Express er i sin tur overvåking av "build" -mappen for eventuelle endringer, så hvis HTML-, CSS- eller JS-filene blir kompilert, vil det automatisk laste på forhåndsvisningen din.
Neste opp vil vi gå videre og oppnå samme type lokalpresent forhåndsvisning i Gulp-prosjektet. Denne gangen kommer vi til å bruke plug-in-plugin-modulen i stedet.
Installer gulp-koble til prosjektet ditt med denne kommandoen:
npm installere - save-dev gulp-connect
Gjør det tilgjengelig i Gulpfile ved å legge til denne linjen under de andre linjene hvor du har brukt kreve () funksjon:
var connect = krever ('gulp-connect'); Oppsett en ny oppgave som heter koble ved å legge til denne koden under din andre oppgavekode:
gulp.task ('connect', funksjon () connect.server (root: 'build', levereload: true, open: true););Som vi gjorde med Grunt, skal vi nå lage en tilpasset oppgave som heter start som både vil lansere vår lokalehost forhåndsvisning og starte vår klokke oppgave.
Legg denne linjen til bunnen av din Gulpfile:
gulp.task ('start', ['connect', 'watch']);For å aktivere omlasting av forhåndsvisning av lokalhost, skal vi koble til et annet "rør" til slutten av begge css og html oppgaver.
Legg til denne reload-utløseren til slutten av hver:
.rør (connect.reload ())
Å gjøre oppgavene blir:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()). pip (minifyCSS ()). pip (rename ('style.css')). pip (gulp.dest ('build')). pip (connect.reload ()));... og:
gulp.task ('html', funksjon () gulp.src ('kilde / jade / * .jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe reload ()));Kjør nå kommandoen:
gulp start
... deretter gå til http: / / localhost: 8080 og du vil se din lokale side forhåndsvisning.
Lagre en endring til noen av Jade- eller Stylus-filene dine og se på lynet, kompilere og last på nytt!
Nå som du har forhåndsvisning av ditt lokalehost automatisk, kan du forlate det på det og fortsatt ha en topputviklet prosessoppsett for prosjektet ditt. Men når det gjelder å kunne gjøre kryssbrowser og krysse enhetstesting, er det også verdt å ha en gang med å ha BrowserSync på bildet..
Med BrowserSync er du utstyrt med en forhåndsvisningslogg du kan koble til en hvilken som helst nettleser på maskinen din, samt nettlesere på en hvilken som helst annen enhet på samme internettforbindelse.
Alle forhåndsvisninger du har kjørt vil da bli lastet opp når du gjør endringer, slik at du kan se resultatene over hele linja, og alle dine samspill blir speilvendt i alle tilfeller. Hvis du ruller eller åpner en meny i en nettleser, ser du hvordan hver annen nettleser og enhet reagerer samtidig.
For å installere grunt-nettleser-synkroniseringspluggen i Grunt-prosjektet, kjør følgende kommando:
npm installere grunt-nettleser-synkronisering - lag-dev
Kommentere eller slette linjen du brukte til å aktivere grunt-express:
// grunt.loadNpmTasks ('grunt-express');Legg deretter til denne linjen for å aktivere grunt-nettleser-synkronisering i stedet:
grunt.loadNpmTasks ( 'grynt-browser-sync');
Kommentere eller slette uttrykke oppgave du opprettet tidligere, og legg til denne konfigurasjonskoden for oppgaven browserSync i stedet:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], alternativer: watchTask: true, server: baseDir: "build",
Finn din start Oppgave og endre den slik at den kjører browserSync oppgave i stedet for uttrykke oppgave, fra:
grunt.registerTask ('start', ['express', 'watch']);… til:
grunt.registerTask ('start', ['browserSync', 'watch']);Nå når du kjører kommandoen:
grunt start
... du vil fortsatt se en lokalhost forhåndsvisning åpen, og den vil fortsatt lades opp når du lagrer endringer, men forskjellen er nå at nettlesersynkronisering er aktiv, som det er muligheten til å vise forhåndsvisningen din på andre enheter.
I terminalen etter at du har startet BrowserSync-serveren, ser du dette:
- Lokal: http: // localhost: 3000 External: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI Ekstern: http://192.168.1.3:3001 -
Ta tak i adressen som er merket lokal, slå den inn i noen av de andre nettleserne på maskinen din, og skriv inn adressen som er merket Utvendig inn i andre enheter du har den samme tilkoblingen. Deretter ser du de synkroniserte svarene du får over alle tilfeller når du samhandler med noen av dem.
For mer informasjon om BrowserSync via Grunt, gå til: http://www.browsersync.io/docs/grunt/
Nå skal vi sette opp samme prosess, denne gangen bruker du nettleser-synkroniseringspluggen for Gulp.
Installer pluginet i Gulp-prosjektet ditt med:
npm installere nettleser-synkronisering gulp - save-dev
Kommentere eller slette denne linjen:
// var connect = krever ('gulp-connect');... og erstatt det med:
var browserSync = krever ('browser-sync');Kommentere eller slette eksisterende koble oppgave og legg til i denne nye nettleser-sync oppgave i stedet:
gulp.task ('browser-sync', funksjon () browserSync (server: baseDir: "build"););På slutten av css og html oppgavene finner du de to stedene du la til linjen:
.rør (connect.reload ())
... og erstatt hver av disse to linjene med:
.rør (browserSync.reload (strøm: true))
Og endelig finn din eksisterende start oppgave og rediger den for å kjøre nettleser-sync oppgave i stedet for koble Oppgave, erstatte dette:
gulp.task ('start', ['connect', 'watch']);… med dette:
gulp.task ('start', ['browser-sync', 'watch']);Nå når du kjører kommandoen:
gulp start
... et nettleservindu åpnes med forhåndsvisning i den. Akkurat som når du brukte BrowserSync via Grunt, vil forhåndsvisningens nettadresser nå synkronisere over en hvilken som helst nettleser på en hvilken som helst enhet som kjører av Internett-tilkoblingen din.
For mer informasjon om BrowserSync via Gulp besøk: http://www.browsersync.io/docs/gulp/
Du har nå gjennomgått alle essensialene for å sette opp egne prosjekter fra grunnen til å utnytte kommandolinjen under utviklingen. Men hva med når du ikke vil starte fra bunnen av. Hva med når du vil bruke eksisterende tredjeparts rammeverk, eller du vil bare gå i gang med en start?
I den neste opplæringen lærer du hvordan du bruker kommandolinjen til å utarbeide helt nye prosjekter i løpet av et øyeblikk, komplett med all tredjepartskoden de trenger, samt Grunt eller Gulp-oppgavebehandling alt oppsett og klar til å gå.
Jeg ser deg i neste opplæring!
