Share
Front-end-utviklere står overfor en rekke utfordringer når de oppretter nettsteder som har repeterende løsninger. Alle nettsteder bruker et lignende DOM-skjelett, så vel som mange vanlige funksjoner og attributter. Volo tar sikte på å fjerne noe av innsatsen ut av prosessen, slik at utviklere kan fokusere på de nye aspektene av et prosjekt, som tilnærmet det samme.
Hvis du legger til en JavaScript-fil som ikke er AMD-kompatibel, vil Volo prøve og konvertere den til deg.
Volo er et program som hjelper utviklerne med å automatisere prosessene sine. Det lar deg lage prosjekter basert på en mal; Du kan utvide disse malene og sette opp egendefinerte kommandoer for å automatisere repeterende oppgaver.
Volo ble opprettet med et veldig spesielt forhold til GitHub; det forstår GIT repos, så vel som grener og koder. Det er ingen spesiell Volo pakke eller depot; Hvis noe er på GitHub, kan du bruke det i prosjektet ditt. Dette er hva som setter Volo bortsett fra lignende applikasjoner.
Volo ble skapt av James Burke, samme James Burke som skapte det svært populære require.js biblioteket.
Det kan ikke overraske deg at Volo har en veldig opinionert arbeidsflyt; det forutsetter at du vil bruke riktig AMD for filer, samt å gi forhåndsinnstillinger om hvor du skal sette filer.
Er dette en dårlig ting? Ikke egentlig - du burde gjøre dette uansett. Dessuten kan du overstyre kommandoene hvis du trenger det.
Så la oss begynne med å gå gjennom noen av Volos kommandoer.
Du vil nok bruke skape kommandoen først. Jeg nevnte at Volo er dypt forankret i GitHub, men interessant nok, bruker Volo ikke faktisk GIT. Du vil vanligvis bare ha et øyeblikksbilde av et repo, ikke hele sin forlovelseshistorie; slik at Volo bare laster ned repo-filene uten de faktiske GIT-dataene.
Den enkleste metoden for å referere til en mal er å bare gi repoens navn. Hvis du for eksempel vil kopiere en repo som heter 'starterTemplate', kan du bare skrive følgende kommando:
volo lage myApp starterTemplate
Forutsatt at repo er det første resultatet returnert av GitHub, vil Volo laste ned og "installere" malen til en ny katalog kalt MinApp.
Dette er litt risikabelt, spesielt hvis du foretrekker å navngi dine repos med svært generiske titler. Heldigvis kan du angi flere detaljer for å begrense resultatsettet. Filtreringssystemet er ganske avansert når det gjelder å dechiffrere inngangen. I utgangspunktet kan du bruke:
volo opprett appName userName / repoName / [branch | tag]
Du kan også utelate bestemte deler av informasjonen. For eksempel kan du utelate GitHub brukernavn, forårsaker Volo å søke etter det første prosjektet med det oppgitte navnet og grenen.
Alternativt kan du spesifisere brukernavnet, men utelat versjonen / grenen, og Volo laster ned den siste merkede versjonen.
Hvis det ikke er funnet noen merker, faller Volo tilbake til hovedgrenen.
Videre er det ikke nødvendig å spesifisere en eksakt versjon. Å skrive et uttrykk som "> 1.0"forteller Volo å laste ned en versjon større enn 1.0.
Sist men ikke minst, du trenger ikke å bruke en repo fra Github; Du sender rett og slett nettadressen til zip-arkivet du vil bruke som mal. Hvis du vil kopiere en lokal mappe, kan du bruke følgende format:
lokale: / sti / til / katalog
Så det finnes en rekke alternativer du kan bruke til å velge ønsket repo, og du kan til og med utelate repo-navnet for å bruke Volos egen standardmal.
Usikker på hvem eieren av en populær repo er? Bruke Søke kommando.
volo search repoName
Den bruker det samme GitHub-søket som skape; så du kan være sikker på at den første repoen i søkeresultatene er repo Volo vil laste ned.
De Søke kommandoen er bare for å finne en repo eller hente sin informasjon. Som et resultat mangler det noen av funksjonaliteten som finnes i skape kommando. For eksempel skapte James noen få offisielle maler du kan bruke, men du kan ikke kjenne navnene sine.
Utfører
volo search volojs / templateviser noen gode alternativer å bruke.
Du trenger ikke å være for nøyaktig med søkekriteriene dine; Volo gjør en anstendig jobb med å finne det du vil ha. Det er overraskende fort.
Hvis du vil ha mer infoformasjon om en repo, for eksempel versjonsnumre eller linker, kan du bruke riktig navn info kommando. En av resultatene fra volo search volojs / template er en repo med navnet 'volojs / create-responsive-template'. Du kan hente mer informasjon om denne repoen ved å skrive:
volo info volojs / create-responsive-mal
Bruker skape, Søke, og info kommandoer, kan vi anta at vi opprettet appen vår. Så hva er neste??
Deretter må vi legge til avhengigheter. Dette er ganske enkelt, og det bruker de samme alternativene som skape kommandoen med noen tilføyelser. I tillegg til å kunne spesifisere en GitHub-bruker, gren / tag eller URL til en post, Legg til kommando lar deg legge til "#"for å legge inn en bestemt fil fra repo. Mange reposer har en tendens til å ha JaveScript-biblioteket du vil, men det er pakket sammen med demoer og dokumentasjon. Oftere, ikke bare, vil du bare ha biblioteket og Legg til kommando lar deg gjøre dette.
La oss late som du vil laste ned et bibliotek som heter 'foo.js'. Du kan bare skrive:
volo legg til bruker / fooRepo / v1.5 # foo.js
Dette laster ned hele zip-filen fra GitHub, trekker bare ut foo.js filen og legger den til prosjektet ditt. Denne hashtag-funksjonen er ikke spesifikk for filnavnene; Du kan sende et mappenavn for å legge til bare den angitte mappen til prosjektet ditt.
Tidligere nevnte jeg at Volo forventer at du skal øve riktig AMD. Så hvis du legger til en JavaScript-fil som ikke er AMD-kompatibel, vil Volo prøve og konvertere den til deg. Prosessen er ganske enkel.
Det begynner med å spørre hvilke avhengigheter JavaScript-filen din bruker.
Du kan enten sende avhengighetsnavnene i en kommaseparert liste, eller du kan eventuelt gi dem et variabelt navn. Her er et eksempel på hva du kan skrive for et jQuery-plugin:
jquery1.9 = jQuery, jqueryui
Dette forteller Volo at det angitte biblioteket krever filen navngitt jquery1.9 og å sende det under det variable navnet jQuery. Deretter legger vi til et komma for å erklære den neste avhengigheten: jqueryui.
Når du er ferdig med å erklære dine avhengigheter, kan du deklarere hva du vil eksportere fra skriptet ditt. Du eksporterer vanligvis ikke noe i et jQuery-plugin; det håndteres av jQuery selv. Men hvis du har et JavaScript-bibliotek som trenger å eksportere noe, vil du bare skrive navnet på ønsket variabel i skriptet ditt. Du kan bruke denne konverteringsfunksjonen på fluen med amdify kommando:
volo amdify
Bare pass det ønskede filnavnet.
Du kan også automatisk omdøpe en nedlastet fil. For eksempel kan du legge til en fil som heter jquery.pluginName.1.3.min.js, men det er ikke en praktisk fil som skal refereres i skriptene dine. Du kan sende et nytt navn som den endelige parameteren til Legg til kommando, og Volo vil gi nytt navn til filen.
For å oppsummere kan vi installere dette pseudo jQuery-pluginet fra en repo ved å skrive følgende:
volo legg til brukernavn / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo vil laste ned den angitte repo, kun utvinne den oppgitte filen for pluginet, spør deg hvordan du konverterer den til å være AMD-kompatibel og plasser den i prosjektet ditt under det nye navnet. Det er mye kontroll og automatisering i en veldig enkel å bruke kommando.
La oss nå gå videre til Volofiles.
Volofiles lar deg automatisere oppgaver ved å lage makrolignende kommandoer. For eksempel kan CoffeeScript- og SCSS-brukere manuelt utstede følgende kommandoer for å kompilere filene deres:
kaffe -c kaffe-lib / -o lib / kaffe -c app.coffee sass css / main.scss css / main.css
Dette er mange kommandoer som gjentatte ganger skal utføres. Naturligvis kan man legge til disse kommandoene til en bash-fil, men automatisere flere operasjoner mer enn sannsynlig innebærer en semi-komplisert bash-fil eller flere bash-filer. Med Volo lager du en fil som heter volofile. I denne filen oppretter du et JavaScript-objekt som inneholder kommandoene du vil utføre. Da kan du bare ringe dem som om de var innfødte kommandoer.
Her er et eksempel volofile bruker vanlige parametere:
Accentsconagua
module.exports = 'hi': 'summary': 'En kommando for å si Hei', 'doc': 'Skriv Doc Text Here eller Load a File', 'validate': funksjon (navngittArgs, arg1) if navngittArgs.cancel == "true") returner ny feil ('Parametern "Avbryt" er angitt'); , 'run': ['echo' Hello World '', 'echo' Hvordan går det i dag? ''], 'nextCommand': ... Du kan da skrive volo -h for å se disse kommandoene og deres oppsummering. Går inn volo hei -h viser hva som er i doc felt. De validere nøkkelen er valgfri, og du kan bruke den til testing for å avslutte eventuelt hvis det er et problem. Sist men ikke minst har vi løpe eiendom, som inneholder listen over kommandoer som skal utføres. Du kan skrive inn en enkel streng eller en rekke strenger, og Volo vil behandle og kjøre hver etterfølgende.
Med kommandoen ovenfor kunne jeg skrive:
volo hei
For å få utgangen, eller:
volo hei avbryt = true
Å utløse hvis setning og utgang med den angitte feilmeldingen. Dette er trolig den mest grunnleggende av eksempler, og du har mange flere alternativer tilgjengelig når du lager dine egne kommandoer.
Jeg nevnte at Volo behandler hver streng i løpe eiendom. Ovennevnte prøve bruker innstillingen 'siste resort'. Volo søker først etter bestemte egenskaper i kommandoene, og det utfører bare strengen i standardterminalen dersom den ikke kan bestemme hva du vil. Du har to alternativer før det skjønt, og de heter 'v'og'n'.
v'og'n'NøkkelordDisse to søkeordene lar deg injisere tilpasset funksjonalitet i dine løpestrenger. Hvis du trenger å lese filer, utføre prosesser eller andre OS-spesifikke oppgaver, vil du bruke 'v'søkeord. Bare skrive kommandoen (f.eks. rm file.js) fungerer bare på operativsystemer som støtter den oppgitte kommandoen. Ved bruk av vkommandoer, forsikrer du støtte på tvers av plattformen din volofile. For eksempel kan du legge til følgende løpestreng hvis du vil kopiere en fil fra ett sted til et annet:
Kjør: 'v.copyFile file_one file_two'
Denne kommandoen er kryssplattform. For å se hele listen over 'v'alternativer, ta en titt på kildefilen. Du kan legge til parametere med et mellomrom (som i terminalen) i stedet for å bruke parenteser.
Neste har vi n søkeord, som kartlegger kjørbare node.js-moduler. Hvis du angir en kommando under n Søkeord, Volo sjekker om det kan finne node.js kjørbar i det aktuelle prosjektets private node_modules mappe, og det faller tilbake til den globale node.js-modulmappen hvis en ikke er funnet.
Node.js, eller mer spesifikt NPM, har en veldig stor samling av kvalitetsutviklingsverktøy laget av mange smarte og kreative mennesker.
Volo utnytter den enorme ressursen ved å la deg plugge sine kjørbare rettigheter inn i Volofiles. James Burke har til og med opprettet en mal for å lage dine egne node.js moduler spesielt for Volo, men vi kommer til det på et minutt.
Et eksempel på bruk av n Søkeordet er CoffeeScript-modulen. Hvis du vil kompilere en katalog som inneholder CoffeeScript-filer, kan vi skrive følgende kommando:
'kjøre': 'n.coffee -c coffee-lib / -o lib /'
Selv om CoffeeScript ikke er globalt installert, kan du sikre at det kjører på alle OS fra det lokale node_modules mappe.
Nå kan du bruke kommandemalen jeg nevnte (last ned her forresten) for å lage en gjenbrukbar Volo-kommando som skal brukes i alle dine prosjekter. Hvis du for eksempel har en modul som sikkerhetskopierer appen din, vil du kanskje inkludere den i alle dine prosjekter.
Opprett en standard NPM-modul som eksporterer de nevnte egenskapene (
sammendrag,løpeetc) og krever modulen i Volofile.
Så, med pakken din lagt til NPM, kan du bare skrive:
npm installere kommandoenavn
Og i din volofile, skriv bare:
module.exports = 'commandName': krever ('node_modules / commandName / index'); Hvor index.js er navnet på utvidelsen din. Fordi filen eksporterer de nødvendige egenskapene, blir alternativene direkte injisert i volofilen under det oppgitte kommandoenavnet. Jeg ville egentlig ikke kalle det en tilpasset funksjon (det er standard JavaScript), men det er fortsatt hyggelig å vite at du har dette alternativet.
Nå med teorien ut av veien, la oss se på et ekteeksempel. Vi bygger en app ved hjelp av Volo.
Volo er en NPM-pakke, så det er så enkelt å installere det som:
(sudo) npm installer -g volo
For denne artikkelen trodde jeg at jeg ville lage en liten nettside for å generere et kart over ditt område, og vise hvem FourSquare-ordførerne på favorittnettene dine. Det er ikke en utrolig dyp ide, men det vil sette Volo gjennom skrittene.
Så for å begynne, trenger vi en repo. Du kan finne en rekke startmaler, skapt spesielt for Volo, ved å lete etter GitHub. Standardmalen leveres med de nakne nødvendighetene: Et enkelt HTML-skjelett og en JavaScript-mappe med et AMD barebones-oppsett.
Du får også en volofile med en byggekommando for å samle prosjektets JavaScript- og CSS-filer.
Jeg skal ikke bruke standardmalen, siden jeg vil ha noen flere ressurser. Etter et raskt GitHub-søk fant jeg en offisiell mal som inneholder standardverdiene, bootstrap-rammen og andre ressurser.
Så for å skape vårt nye prosjekt (som jeg heter "turf"), kan du bare skrive følgende i et terminalvindu:
volo lage turf volojs / create-responsive-mall cd turf
Dette skaper prosjektmappen og laster ned et øyeblikksbilde av den angitte repo. Neste, for å laste ned andre ressurser. Vi vil åpenbart bruke jQuery, så la oss legge til det:
volo legg til jquery
Vi trenger også en måte å vise et kart på siden. Google Maps kommer i tankene, så vi bruker et bibliotek som heter gmaps. JavaScript-filen inneholder hele biblioteket; Derfor trenger vi ikke virkelig resten av repo. I tillegg kan du se at biblioteket er lagret i en navngitt variabel GMaps, og det krever Google Maps API som en avhengighet.
Det er et lite problem med dette: Google Maps API er ikke kompatibel med AMD og er et asynkront bibliotek.
Når du laster inn den eneste nettadressen, fortsetter den å laste andre ressurser på egen hånd. Dette gjør at standard requirement.js er et problem, men det er et plugin som håndterer denne eksakte situasjonen. Det er en del av en repo kalt "requirejs-plugins", men igjen trenger vi ikke hele repo. Så skriv inn følgende i terminalvinduet:
Volo legg til Requis-plugins # src / async.js
Med async-pluginet kan vi laste våre spesielle asynkrone avhengigheter.
Vi har to alternativer for å installere selve plugin:
Jeg skal vise deg hvordan du bruker begge alternativene. For å konvertere filen, legg den bare til. Volo vil automatisk oppdage at filen må konverteres:
volo legg til HPNeo / gmaps # gmaps.js
Volo ble opprettet med et veldig spesielt forhold til GitHub; det forstår GIT repos, så vel som grener og koder.
Ifølge prosjektets Github-side er det avhengig av Google Maps API. Det er et lite problem med å skrive inn nettadressen fordi den inneholder ikke-støttede tegn (likestilt). Så la oss bruke en plassholder; bare skriv inn Google Kart og trykk enter. Deretter må vi spesifisere hva vi vil eksportere. Type GMaps (med de to store bokstaver, det er navnet på variabelen) og trykk enter. Volo vil fullføre konverteringen og legge den til JS / lib mappe.
Hvorfor JS / lib mappe? Hvis du tar en titt på package.json fil i roten til prosjektet ditt, vil du se en oppføring som heter baseURL under amd eiendom. Dette forteller Volo hvor du skal sette alle nedlastede JavaScript-filer. Det er faktisk flere steder som Volo ser på å bestemme hvor man skal sette ting:
basedir eiendom under en oppføring som heter volo baseURL eiendom igjen under volo baseURL under amd som vi har herjs mappe i din nåværende katalogskript mappe i din nåværende katalogHvis ingen av disse stedene eksisterer, setter Volo filen i gjeldende katalog.
Med modulen installert, må vi fortsatt erstatte stedholderen vi opprettet for Google Maps API. Åpne www / js / lib / gmaps.js fil og erstatt plassholderen i den første (eller andre) linjen med følgende:
async http:? //maps.google.com/maps/api/js sensor = false & biblioteker = steder
Dette forteller Volo å inkludere async-pluginet og sende det til nettadressen for Google Maps API.
GMaps-modulen er nå fullt installert, men det krever at du oppgir bestemte lengde- og breddegradskoordinater - noe de fleste brukere ikke vet. Så vi bør ha en slags autofullfør plugin som konverterer stedsnavn til koordinater.
Etter et annet raskt Github-søk fant jeg et jQuery-plugin som heter geocomplete av ubilabs. Også det er ikke AMD-kompatibelt, men vi vil bruke require.js 'shim-funksjonen. I terminalen skriver du følgende kommando:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
De amdoff alternativet forhindrer Volo fra å konvertere filen, og sluttparameteren omdøper filen fra jquery.geocomplete.js til geocomplete.js. Dette er ikke obligatorisk, men det gjør referanse til det mer praktisk.
Åpne nå www / js / app.js fil, og erstatt config.js config-setningen øverst:
requirejs.config (baseUrl: 'js / lib', stier: app: '... / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false & libraries = places ']));
Bare for å løpe gjennom innstillingene som allerede var der, baseURL forteller require.js hvor du skal lete etter relative filer, og paths.app alternativet forteller require.js at hvis et modulnavn har en referanse til et sted som heter "app", og deretter erstatte med det som er angitt ('... / app').
De mellomlegg delen er det jeg la til filen. Det forteller require.js å først laste inn jQuery og Google Maps API når noen laster inn en fil som heter geocomplete. Du kan eventuelt sette en annen eiendom som heter eksport, navnet på variabelen som skal eksporteres. Vi trenger ikke å eksportere noe fordi dette er et plugin og det legges til jQuery-objektet.
På dette tidspunktet har vi filene som er nødvendige for å vise kartet og hente de nødvendige koordinatene. Vi har ikke skrevet noen kode, men vi har alle avhengighetene.
For å begynne å prototypere vår app, må vi skrive litt HTML. Åpne opp index.html fil og fjern alt inne i kroppstempelene bortsett fra element at the bottom. You should be left with a file like the following:
Deretter legger du til et tekstfelt for søkeboksen og en plassholder for det aktuelle kartet. Ditt nye kroppsområde bør se slik ut:
Det er litt mer enn det grunnleggende, slik at det samsvarer med oppstartssporets CSS-regler. Jeg ga tekstinngangen en ID av Søke og kartets en ID av kart. La oss nå åpne JavaScript-filen.
Volo er et program som hjelper utviklerne med å automatisere prosessene sine.
Jeg vil bryte den ned for de av dere som er nye for å kreve. Den primære grunnen til å bruke noe som requires.js er å sørge for at skriptets avhengigheter er lastet når og bare når skriptet faktisk trenger dem. Dette øker samlet hastighet på nettstedet ditt og forenkler HTML-filene dine (du trenger ikke referanse mange skript).
Du kan se skriptet nederst i HTML-filen poeng til require.js-biblioteket, og det har også en data-hoved attributt som kjører automatisk når required.js er klar.
Hvis du åpner JS / app.js, vår endrede konfigurasjonsseksjon og en kravoppgave nederst. Legg merke til at du ikke trenger filtypen. I indeksfilen refererte vi js / app (uten .js), og her laster app / hoved.
Normalt en referanse til app / hoved ville kartlegge til en fil som heter main.js inne i en mappe som heter app (alt i forhold til JS / lib mappe). Men husk i config, vi sa noen referanse til et sted som heter app, bør erstattes med ... / app. I stedet for å søke etter JS / lib / app / main.js, require.js vil hente JS / app / main.js.
Deretter åpne JS / app / main.js, fjern alt og skriv inn følgende:
define (['jquery', 'gmaps', 'geocomplete'], funksjon ($, gmaps) $ (dokument) .ready (funksjon () $ ("# søk"). geocomplete ();); ); Den første parameteren er en rekke avhengigheter. Den andre er en funksjon med parameternavn for jQuery ($) og GMaps (gmaps). Husk at geocomplete er et jQuery-plugin, så det er ingen grunn til å gi den en tilsvarende parameter ...
Funksjonen passerer som den andre parameteren utføres etter at avhengighetene er ferdig lastet.
Innenfor denne funksjonen utfører vi geocomplete () metode når dokumentet er klart.
Du kan nå åpne siden i nettleseren din, og hvis alt gikk bra, bør tekstboksen si "Skriv inn en plassering". Begynn å skrive, og du vil se noen resultater.
Deretter må vi håndtere hendelsen når en kamp er funnet, dvs. når brukeren trykker Enter-tasten på et steds navn. Disse hendelsene er: geokode: resultat og geokode: error. Legg til koden for å håndtere disse hendelsene:
$ (dokument) .ready (funksjon () $ ("# søk"). geocomplete () .bind ("geokode: resultat", funksjon (hendelse, resultat) // På Resultat) .bind feil ", funksjon (hendelse, resultat) alarm (" Sted ikke funnet "););); Det neste trinnet er å hente breddegraden og lengden og generere et nytt kart. Den lat / lange er lagret i egenskaper som heter geometry.location.hb og geometry.location.ib, henholdsvis. Legg til følgende kode inne i geokode: resultat handler:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = nye gmaps (div: "#map", lat: lat, lng: lng, høyde: '380px');
Vi lagrer koordinatene og laster et nytt kart. Å lage et kart er enkelt: Vi sender beholderens ID sammen med koordinatene og høyden.
Du bør nå kunne søke og vise et kart. Deretter må vi grensesnitt med Foursquare og vise "borgmesteren" av byen din.
Vi trenger først et grensesnitt til foursquare API. For å spare tid, og å være på emne, opprettet jeg en repo som vi kan klone. Så i terminalvinduet, skriv inn:
git klon https://github.com/gmanricks/MayorAPI www / foursquare
Dette laster ned repoen og plasserer den i en navngitt mappe Foursquare under www katalog.
Deretter åpne foursquare.php og sett inn klient-ID og klienthemmelig inn i klassens konstanter. Hvis du ikke allerede har denne informasjonen, kan du få den fra Foursquare ved å registrere en app.
Den andre filen i repoen (data.php) henter kartkoordinatene via GET-parametere og returnerer et JSON-objekt. Så for å legge til ordførerne på kartet, må vi skrive om geocomplete: resultat hendelse handler:
.bind ("geokode: resultat", funksjon (hendelse, resultat) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, funksjon (d) var kart = nye gmaps (div:" #map ", lat: lat, lng: lng, høyde: '380px'); var steder = JSON .parse (d); hvis (places.error) alert ("Hastighetsgrensen er truffet"); else for (var indeks på steder) var sted = steder [indeks]; bilde) var html = ''+''+'
'+''+''+ place.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, innhold: html); ); ) Vi definerer først lat og lng variabler, men i stedet for å umiddelbart lage kartet, venter vi på at vår Ajax-forespørsel skal fullføres. Vi lager omtrent elleve API-anrop bak kulissene, så det kan ta ti eller femten sekunder.
Deretter sørger vi for at grenseverdien ikke er truffet og varsler brukeren riktig. Til slutt, vi sykler gjennom resultatene, legger hver til kartet ved hjelp av en kommando fra GMaps biblioteket.
Du kan nå åpne siden og teste den ut; alt skal fungere! Med litt styling og litt design kan det se ut slik:
Vår app er fullført, og det siste skrittet er å optimalisere det. La oss først slette filene vi ikke bruker. I JS / app / mappe, du kan fjerne alt annet enn main.js fil. I JS / lib / mappe, fjern filene som heter appCache.js og network.js. Du trenger heller ikke manifest.webapp fil, men du kan beholde hvis du ønsker det.
Åpne nå volofile, og du kan se at malen kom med en ganske komplisert bygge kommando for å optimalisere og sette opp prosjektets JavaScript og CSS-filer. Vi trenger ikke et slikt forseggjort skript, så slett alt fra filen og erstatt det med følgende:
module.exports = 'build': 'summary': 'Kommando å kompilere kildefilene', 'run': ['v.rm www-built', 'v.copyDir www www-built', 'v. rm www-built / js ',' node-verktøy / r.js -o baseUrl = www / js / lib paths.app = ... / app paths.requireLib = krever navn = app inkluderer = requireLib out = www-built / js / lib / require.js ',' v.rm www-built / css ',' node-verktøy / r.js -o cssIn = www / css / app.css out = www-bygget / css / app.css '] ;
Volo er et omni-verktøy: du får det du legger inn i det.
Dette er mye enklere. Her oppretter vi en kommando som heter bygge som fjerner det forrige bygget folde hvis det eksisterer. Det kopierer så hele www mappe som en base for vår kompilerte versjon. Deretter sletter vi js katalog (vi erstatter den med den optimaliserte versjonen).
Deretter kjører vi require.js 'optimizer for å kompilere JavaScript-filene i en enkelt fil. Du kan legge merke til at den omdøper sluttproduktet til require.js; Dette er litt av en "hack" fordi det egentlig ikke er kravet til need.js-biblioteket. Men siden vår HTML-fil har en referanse til require.js Det er allerede lettere å endre navn på Javascript-filen enn å analysere alle HTML-filer og endre skriptreferanser.
Når kommandoen er fullført, fjerner vi CSS-mappen (igjen for å erstatte den med den optimaliserte versjonen). Og sist men ikke minst løper vi kravet til require.js optimizer igjen, denne gangen for CSS.
Du kan nå kjøre volo bygge Fra terminalvinduet ditt og Volo vil du kjøre denne serien av kommandoer.
I nettleseren din kan du navigere til www-bygget mappe i stedet for www mappe for å sikre at den fortsatt fungerer. På datamaskinen min bygger prosjektet kuttet filstørrelsen i halvparten, fra like under en megabyte til ~ 400kb. Du kan nok få det enda mindre hvis du reduserer CSS.
I denne artikkelen lærte jeg deg Volos syntaks og vi bygde et eksempelprogram. Vi lærte å bruke Volo til å lage et prosjekt, legge til avhengigheter, legge til egendefinerte kommandoer for å automatisere vanlige oppgaver og optimalisere et helt prosjekt.
For å oppsummere er Volo et omni-verktøy: du får det du legger inn i det. Du har noen, men kraftige, kommandoer, men Volos sanne kraft kommer fra det utrolige utvidbarheten og til slutt sitt samfunn.
Så hva synes du om Volo? Vil du opprette egendefinerte Volo-kommandoer? Legg igjen en kommentar med dine spørsmål og meninger.
Takk for at du leser.
'+'