Share
Front-end-utvecklare står inför olika utmaningar när de skapar webbplatser som har repetitiva lösningar. Alla webbplatser använder ett liknande DOM-skelett, liksom många vanliga funktioner och attribut. Volo syftar till att avlägsna en del av ansträngningen ur processen, så att utvecklare kan fokusera på de nya aspekterna av ett projekt, som tillhörde samma.
Om du lägger till en JavaScript-fil som inte är AMD-kompatibel, kommer Volo att försöka konvertera den till dig.
Volo är en applikation som hjälper utvecklare av avancerade produkter att automatisera sina processer. Det låter dig skapa projekt baserade på en mall; Du kan förlänga dessa mallar och konfigurera anpassade kommandon för automatisering av repetitiva uppgifter.
Volo skapades med ett mycket speciellt förhållande till GitHub; det förstår GIT repos, liksom grenar och taggar. Det finns inget speciellt Volo-paket eller förvar Om något finns på GitHub kan du använda det i ditt projekt. Det här sätter Volo bortsett från liknande applikationer.
Volo skapades av James Burke, samma James Burke som skapade det mycket populära require.js-biblioteket.
Det kan inte överraska dig att Volo har ett mycket uppfattat arbetsflöde; det förutsätter att du vill använda korrekt AMD för filer, samt att förse förinställningar om var du ska sätta filer.
Är det här en dålig sak? Inte riktigt - du borde göra det ändå. Dessutom kan du åsidosätta kommandona om du behöver göra det.
Så låt oss börja med att gå igenom några av Volos kommandon.
Du brukar använda skapa kommando först. Jag nämnde att Volo är djupt rotad i GitHub, men intressant nog, använder Volo inte faktiskt GIT. Du vill vanligtvis bara ha en ögonblicksbild av en repo, inte hela sin förlovningshistoria. så laddar Volo bara repo-filerna utan den faktiska GIT-data.
Den enklaste metoden att referera till en mall är att bara tillhandahålla repoens namn. Om du till exempel vill kopiera en repo med namnet 'starterTemplate' kan du helt enkelt skriva följande kommando:
volo skapa myApp starterTemplate
Om du antar repo är det första resultatet som returneras av GitHub, kommer Volo att ladda ner och "installera" mallen till en ny katalog som heter myApp.
Detta är lite riskabelt, speciellt om du föredrar att namnge ditt repos med mycket generiska titlar. Tack och lov kan du ange fler detaljer för att begränsa resultatuppsättningen. Filtreringssystemet är ganska avancerat när det gäller att dechiffrera din ingång. I grund och botten kan du använda:
volo skapa appName userName / repoName / [branch | tag]
Du kan också utelämna vissa bitar av information. Till exempel kan du släppa användarnamnet GitHub, vilket gör att Volo söker efter det första projektet med det angivna namnet och filialen.
Alternativt kan du ange användarnamnet men utelämna versionen / filialen, och Volo hämtar den senaste taggade versionen.
Om inga taggar hittas, faller Volo tillbaka till huvudgrenen.
Dessutom behöver du inte ange en exakt version. Skriva ett uttryck som "> 1,0"berättar Volo att ladda ner en version större än 1,0.
Sist men inte minst behöver du inte använda en repo från Github; Du skickar helt enkelt webbadressen till zip-arkivet du vill använda som din mall. För att kopiera en lokal mapp kan du använda följande format:
lokal: / sökväg / till / katalog
Så det finns en mängd olika alternativ du kan använda för att välja önskad repo, och du kan även släppa repo-namnet för att använda Volos egen standardmall.
Är du osäker på vem ägaren till en populär repo är? Använd Sök kommando.
volo search repoName
Den använder samma GitHub-sökning som skapa; så du kan vara säker på att den första repo i dina sökresultat är repo Volo kommer att ladda ner.
De Sök Kommando är bara för att hitta en repo eller hämta sin information. Som ett resultat saknar det någon av funktionaliteten som finns i skapa kommando. Till exempel skapade James några officiella mallar som du kan använda, men du kanske inte känner till deras namn.
exekvera
volo search volojs / mallvisar några bra alternativ att använda.
Du behöver inte vara för noggrann med dina sökkriterier. Volo gör ett anständigt jobb för att hitta vad du vill ha. Det är förvånansvärt snabbt.
Om du vill ha mer infoformation om en repo, till exempel versionsnummer eller länkar, kan du använda den namngivna namnet info kommando. Ett av resultaten från volo search volojs / mall är en repo med namnet "volojs / create-responsive-template". Du kan hämta mer information om detta repor genom att skriva:
volo info volojs / skapa-responsive-mall
Använda skapa, Sök, och info kommandon, kan vi anta att vi skapade vår app. Så vad är nästa??
Därefter måste vi lägga till beroenden. Det här är ganska enkelt, och det använder samma alternativ som skapa kommandot med några tillägg. Förutom att kunna ange en GitHub-användare, filial eller tagg till en zip, Lägg till kommando kan du lägga till "#"för att införa en specifik fil från repo. Många repos brukar ha det JaveScript-bibliotek du vill, men det är förpackat tillsammans med demo och dokumentation. Ofta vill du bara ha biblioteket och Lägg till kommando kan du göra det här.
Låt oss låtsas att du vill ladda ner ett bibliotek som heter "foo.js". Du kan helt enkelt skriva:
volo lägg till användare / fooRepo / v1.5 # foo.js
Detta hämtar hela zip-filen från GitHub, extraherar bara foo.js filen och lägger till den i ditt projekt. Denna hashtag-funktion är inte specifik för filnamn. Du kan skicka ett mappnamn för att bara lägga till den angivna mappen i ditt projekt.
Tidigare nämnde jag att Volo förväntar dig att träna korrekt AMD. Så om du lägger till en JavaScript-fil som inte är AMD-kompatibel, kommer Volo att försöka konvertera den till dig. Processen är ganska enkel.
Det börjar med att fråga vilka beroenden din JavaScript-fil använder.
Du kan antingen skicka avhängarnas namn i en kommaseparerad lista, eller du kan eventuellt ge dem ett variabelt namn. Här är ett exempel på vad du kan skriva för ett jQuery-plugin:
jquery1.9 = jQuery, jqueryui
Detta berättar för Volo att det angivna biblioteket kräver filen som heter jquery1.9 och att skicka det under det variabla namnet jQuery. Sedan lägger vi till ett kommatecken för att förklara nästa beroende: jqueryui.
När du har slutfört förklarar dina beroenden kan du deklarera vad du vill exportera från ditt skript. Du exporterar vanligtvis inte något i ett jQuery-plugin. det hanteras av jQuery själv. Men om du har ett JavaScript-bibliotek som behöver exportera något, skulle du bara skriva namnet på önskad variabel i ditt skript. Du kan använda denna konverteringsfunktion på flyg med amdify kommando:
volo amdify
Passa bara på önskat filnamn.
Du kan också automatiskt byta namn på en nedladdad fil. Du kan till exempel lägga till en fil med namnet jquery.pluginName.1.3.min.js, men det är inte en praktisk fil att referera i dina skript. Du kan skicka ett nytt namn som den sista parametern till Lägg till kommando, och Volo kommer att byta namn på filen.
Sammanfattningsvis kan vi installera detta pseudo jQuery-plugin från en repo genom att skriva följande:
volo lägg till användarnamn / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo hämtar den angivna repo, extraherar endast den angivna filen för pluginet, frågar dig hur man konverterar det för att vara AMD-kompatibelt och placerar det i ditt projekt under det nya namnet. Det är mycket kontroll och automation i ett mycket lättanvänt kommando.
Nu går vi vidare till Volofiles.
Volofiles tillåter dig att automatisera uppgifter genom att skapa makroliknande kommandon. Till exempel kan CoffeeScript- och SCSS-användare manuellt utfärda följande kommandon för att kompilera sina filer:
kaffe -c kaffe-lib / -o lib / kaffe -c app.coffee sass css / main.scss css / main.css
Det här är många kommandon att genomföra flera gånger. Naturligtvis kan man lägga till dessa kommandon till en bash-fil, men att automatisera flera operationer innebär mer än troligt en halvkomplicerad bash-fil eller flera bash-filer. Med Volo skapar du en fil med namnet volofile. Inne i den här filen skapar du ett JavaScript-objekt som innehåller de kommandon du vill utföra. Då kan du bara ringa dem som om de var infödda kommandon.
Här är ett prov volofile använder gemensamma parametrar:
Accentsconagua
module.exports = 'hi': 'summary': 'Ett kommando för att säga Hej', 'doc': 'Ange doktext här eller ladda en fil', 'validera': funktion (heterArgs, arg1) if namedArgs.cancel == "true") returnera nytt fel ("parametern" Avbryt "har ställts in); , 'spring': ['echo' Hello World '', 'echo' Hur är du idag? ''], 'nextCommand': ... Du kan då skriva volo -h för att se dessa kommandon och deras sammanfattning. Inmatning volo hej -h visar vad som är i doc fält. De bekräfta nyckeln är valfri, och du kan använda den för teständamål för att eventuellt avsluta om det finns ett problem. Sist men inte minst har vi springa egenskap, som innehåller listan över kommandon som ska utföras. Du kan ange en enkel sträng eller en rad strängar, och Volo kommer att bearbeta och köra var och en i enlighet därmed.
Med ovanstående kommando skulle jag kunna skriva:
volo hej
För att få utmatningen, eller:
volo hej avbryt = true
För att utlösa om uttalande och avsluta med det angivna felmeddelandet. Det här är förmodligen det mest grundläggande med exempel, och du har många fler alternativ tillgängliga när du skapar egna kommandon.
Jag nämnde att Volo behandlar varje sträng i springa fast egendom. Ovanstående prov använder inställningen "sista resort". Volo letar först efter vissa egenskaper i dina kommandon, och det exekverar bara strängen i standardterminalen om den inte kan bestämma vad du vill ha. Du har två alternativ innan det men, och de heter 'v"och"n'.
v"och"n' NyckelordDessa två nyckelord gör att du kan injicera anpassad funktionalitet i dina körsträngar. Om du behöver läsa filer, utföra processer eller andra operativsystem på operativsystemet, vill du använda "v'nyckelord. Bara skriva kommandot (t.ex.. rm file.js) fungerar bara på operativsystem som stöder det angivna kommandot. Genom att använda vkommandon, du försäkrar plattforms support av din volofile. Till exempel kan du lägga till följande körsträng om du vill kopiera en fil från en plats till en annan:
kör: 'v.copyFile file_one file_two'
Detta kommando är cross-platform. För att se hela listan med 'v'alternativ, ta en titt på källfilen. Du kan lägga till parametrar med ett mellanslag (som i terminalen) istället för att använda parenteser.
Nästa har vi n sökord, som kartläggs till exekverbara node.js-moduler. Om du anger ett kommando under n sökord, kontrollerar Volo om den kan hitta node.js exekverbar i det aktuella projektets privata node_modules mappen, och den faller tillbaka till den globala noden.dmodulmappen om en inte hittas.
Node.js, eller mer specifikt NPM, har en mycket stor samling av kvalitetsutvecklingsverktyg som skapats av många smarta och kreativa personer.
Volo använder den enorma resursen genom att låta dig plugga sina körbara filer direkt in i dina volofiler. James Burke har även skapat en mall för att skapa egna node.js-moduler specifikt för Volo, men vi kommer att få det på en minut.
Ett exempel på att använda n sökordet är CoffeeScript-modulen. Om du vill sammanställa en katalog med CoffeeScript-filer kan vi skriva följande kommando:
'kör': 'n.coffee -c coffee-lib / -o lib /'
Även om CoffeeScript inte är globalt installerat, kan du se till att det körs på alla operativsystem från det lokala node_modules mapp.
Nu kan du använda kommandomallen som jag nämnde (ladda ner här förresten) för att skapa ett återanvändbart Volo-kommando att använda i alla dina projekt. Om du till exempel har en modul som säkerhetskopierar din app kanske du vill inkludera den i alla dina projekt.
Skapa en standard NPM-modul som exporterar de ovan nämnda egenskaperna (
sammanfattning,springaetc) och kräva modulen i din volofile.
Så med ditt paket till NPM kan du bara skriva:
npm installera commandName
Och i din volofile skriver du bara:
module.exports = 'commandName': require ('node_modules / commandName / index'); Var index.js är namnet på din förlängning. Eftersom din fil exporterar de nödvändiga egenskaperna injiceras alternativen direkt i volofilen under det angivna kommandonamnet. Jag skulle inte kalla det en anpassad funktion (det är standard JavaScript), men det är fortfarande trevligt att veta att du har det här alternativet.
Nu med teorin ur vägen, låt oss titta in i ett verkligt exempel. Vi bygger en app med Volo.
Volo är ett NPM-paket, så installationen är så enkelt som:
(sudo) npm installera -g volo
För den här artikeln trodde jag att jag skulle skapa en liten webbsida för att skapa en karta över ditt område och visa vem FourSquare-borgmästarna på dina favoritwebbplatser. Det är inte en otroligt djup idé, men det kommer att sätta Volo genom stegen.
Så för att börja, behöver vi en repo. Du kan hitta ett antal startmallar, skapade specifikt för Volo, genom att helt enkelt söka efter GitHub. Standardmallen levereras med de nödvändiga nödvändigheterna: ett enkelt HTML-skelett och en JavaScript-mapp med en AMD-barebones-inställning.
Du får också en volofile med ett byggkommando för att sammanställa projektets JavaScript och CSS-filer.
Jag kommer inte att använda standardmallen, eftersom jag skulle vilja ha några fler resurser. Efter en snabb GitHub-sökning hittade jag en officiell mall som innehåller standardinställningarna, bootstrap-ramverket och andra resurser.
Så för att skapa vårt nya projekt (som jag heter "gräs") kan du helt enkelt skriva följande i ett terminalfönster:
volo skapa turf volojs / skapa-responsive-mall cd turf
Detta skapar projektmappen och hämtar en stillbild av den angivna repo. Nästa, för att ladda ner andra resurser. Vi kommer självklart att använda jQuery, så låt oss lägga till det:
volo add jquery
Vi behöver också ett sätt att visa en karta på sidan. Google Maps kommer i åtanke, så vi använder ett bibliotek som heter gmaps. JavaScript-filen innehåller hela biblioteket; Därför behöver vi inte riktigt resten av repo. Dessutom kan du se att biblioteket är lagrat i en variabel som heter GMaps, och det kräver Google Maps API som ett beroende.
Det finns ett litet problem med detta: Google Maps API är inte AMD-kompatibelt och är ett asynkront bibliotek.
När du laddar upp den enda webbadressen fortsätter den att ladda andra resurser på egen hand. Detta gör att standard requirements.js är ett problem, men det finns ett plugin som hanterar den här exakta situationen. Det är en del av en repo som kallas "requirejs-plugins", men än en gång behöver vi inte hela repo. Skriv så följande i terminalfönstret:
volo lägg till requirejs-plugins # src / async.js
Med async-plugin kan vi ladda våra speciella asynkrona beroenden.
Vi har två alternativ för att installera själva plugin:
Jag ska visa dig hur du använder båda alternativen. För att konvertera filen, lägg bara till den. Volo kommer automatiskt att upptäcka att filen behöver konverteras:
volo lägg till HPNeo / gmaps # gmaps.js
Volo skapades med ett mycket speciellt förhållande till GitHub; det förstår GIT repos, liksom grenar och taggar.
Enligt projektets Github-sida beror det på Google Maps API. Det finns ett litet problem med att ange webbadressen eftersom den innehåller ostödda tecken (lika signalen). Så låt oss använda en platshållare; bara Skriv Google kartor och tryck på Enter. Därefter måste vi ange vad vi vill exportera. Typ GMaps (med de två stora bokstäverna, det är namnet på variabeln) och tryck på Enter. Volo kommer att slutföra konvertera det och lägga till det i js / lib mapp.
Varför js / lib mapp? Om du tittar på package.json filen i roten till ditt projekt, kommer du att se en post som heter baseUrl under amd fast egendom. Detta berättar för Volo var att lägga alla nedladdade JavaScript-filer. Det finns faktiskt ett antal platser som Volo tittar på för att bestämma vart man ska sätta saker:
basedir egendom under en post som heter volo baseUrl egendom igen under volo baseUrl under amd som vi har härjs mappen i din nuvarande katalogskript mappen i din nuvarande katalogOm ingen av dessa platser finns lägger Volo filen i den aktuella katalogen.
Med modulen installerad behöver vi fortfarande byta platshållare som vi skapade för Google Maps API. Öppna www / js / lib / gmaps.js fil och ersätt platshållaren i den första (eller andra) raden med följande:
async http:? //maps.google.com/maps/api/js sensor = false & Bibliotek = platser
Detta berättar att Volo ska inkludera async-plugin och skicka det till webbadressen för Google Maps API.
GMaps-modulen är nu fullt installerad, men det kräver att du anger specifika längd- och latitudkoordinater - något som de flesta användare inte vet. Så vi borde ha någon form av autofullständig plugin som omvandlar platsnamn till koordinater.
Efter en annan snabb Github-sökning hittade jag ett jQuery-plugin som heter geocomplete av ubilabs. Det är inte AMD-kompatibelt, men vi kommer att använda require.js shim-funktionen. I terminalen skriver du följande kommando:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
De amdoff Alternativet hindrar Volo från att konvertera filen, och slutparametern byter namn på filen från jquery.geocomplete.js till geocomplete.js. Detta är inte obligatoriskt, men det gör referens det bekvämare.
Öppna nu www / js / app.js fil och ersätt require.js config-deklarationen längst upp:
requirejs.config (baseUrl: 'js / lib', sökvägar: app: '... / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / kartor / api / js? sensor = false & libraries = places ']);
Bara för att köra igenom de inställningar som redan var där, baseUrl berättar require.js var man ska leta efter relativa filer och paths.app alternativet berättar require.js att om ett modulnamn har en referens till en plats som heter "app", då att ersätta med det som anges ("... / app").
De shim avsnittet är vad jag lagt till i filen. Det berättar require.js att först ladda jQuery och Google Maps API när någon laddar upp en fil med namnet geocomplete. Du kan eventuellt ange en annan egenskap som heter export, namnet på variabeln att exportera. Vi behöver inte exportera något eftersom det här är ett plugin och det fäster till jQuery-objektet.
Vid denna tidpunkt har vi de filer som är nödvändiga för att visa kartan och hämta nödvändiga koordinater. Vi har inte skrivit någon kod, men vi har alla beroenden.
För att börja prototypera vår app måste vi skriva lite HTML. Öppna upp index.html fil och ta bort allt inne i kroppstaggarna utom element at the bottom. You should be left with a file like the following:
Lägg sedan till ett textfält för sökrutan och en platshållare för den faktiska kartan. Ditt nya kroppsområde ska se ut så här:
Det är lite mer än grunderna så att det överensstämmer med bootstraps CSS-regler. Jag gav texten en ID av Sök och kartan ett ID av Karta. Nu ska vi öppna JavaScript-filen.
Volo är en applikation som hjälper utvecklare av avancerade produkter att automatisera sina processer.
Jag bryter ner det för er som är nya för att kräva. Den främsta anledningen att använda något som require.js är att se till att dina skript är beroende av när, och bara när, ditt skript behöver dem faktiskt. Detta ökar den totala hastigheten på din webbplats och förenklar dina HTML-filer (du behöver inte referens många skript).
Du kan se manuset längst ner i HTML-filen pekar på require.js-biblioteket, och det har också en datahuvud attribut som körs automatiskt när required.js är klart.
Om du öppnar js / app.js, vår modifierade konfigurationssektion och ett krav som anges längst ner. Observera att du inte behöver filtillägget. I indexfilen hänvisade vi till js / app (utan .js), och här ladda app / main.
Normalt en hänvisning till app / main skulle kartlägga till en fil som heter main.js inuti en mapp som heter app (alla i förhållande till js / lib mapp). Men kom ihåg i configen, vi sa någon hänvisning till en plats som heter app, bör ersättas med … /app. I stället för att söka efter js / lib / app / main.js, require.js kommer att hämta js / app / main.js.
Nästa, öppna js / app / main.js, ta bort allt och skriv följande:
definiera (['jquery', 'gmaps', 'geocomplete'], funktion ($, gmaps) $ (dokument) .ready (funktion () $ ("# search"). geocomplete ();); ); Den första parametern är en uppsättning av våra beroende. Den andra är en funktion med parameternamn för jQuery ($) och GMaps (GMaps). Kom ihåg att geocomplete är ett jQuery-plugin, så det finns ingen anledning att ge den en motsvarande parameter ...
Funktionen passerade när den andra parametern körs efter att beroendet har slutförts.
Inuti denna funktion utför vi geocomplete () metod när dokumentet är klart.
Du kan nu öppna sidan i din webbläsare, och om allt gick bra bör textrutan säga "Ange en plats". Börja skriva, så ser du några resultat.
Därefter måste vi hantera händelsen när en matchning hittas, dvs när användaren trycker på Enter-tangenten på en platss namn. Dessa händelser är: Geocode: resultat och den Geocode: error. Lägg till koden för att hantera dessa händelser:
$ (dokument) .ready (funktion () $ ("# search"). geocomplete () .bind ("geocode: result", funktion (händelse, resultat) // På Resultat) .bind ("geocode: fel ", funktion (händelse, resultat) alert (" Location not Found "););); Nästa steg är att hämta latitud och longitud och skapa en ny karta. Lat / long lagras i egenskaper som heter geometry.location.hb och geometry.location.ib, respektive. Lägg till följande kod inuti Geocode: resultat hanterare:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = nya gmaps (div: "#map", lat: lat, lng: lng, höjd: '380px');
Vi lagrar koordinaterna och laddar en ny karta. Att skapa en karta är enkel: Vi skickar behållarens ID tillsammans med koordinaterna och höjden.
Du borde nu kunna söka och visa en karta. Därefter behöver vi gränssnitt med Foursquare och visa "borgmästarna" i din stad.
Vi behöver först ett gränssnitt till foursquare API. För att spara tid och för att stanna på ämnet skapade jag en repo som vi kan klona. Så i terminalfönstret skriver du:
git klon https://github.com/gmanricks/MayorAPI www / foursquare
Detta hämtar repo och placerar det i en mapp som heter fyrkant under www katalog.
Nästa, öppna foursquare.php och sätt in ditt klient-id och klient-hemlighet i klassens konstanter. Om du inte redan har denna information kan du hämta den från Foursquare genom att registrera en app.
Den andra filen i repo (data.php) hämtar kartkoordinaterna via GET-parametrar och returnerar ett JSON-objekt. För att lägga till borgmästarna på kartan måste vi skriva om geocomplete: resultat händelsehanterare:
.binda ("geokod: resultat", funktion (händelse, resultat) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, funktionen (d) var map = nya gmaps (div:" #map ", lat: lat, lng: lng, höjd: '380px'); var platser = JSON .parse (d); om (places.error) alert ("Hastighetsgränsen har träffats"); else for (var index på platser) var place = places [index]; foto) var html = '"+""+"
"+""+"'+ place.mayor.name +'"+"'; map.drawOverlay (lat: place.lat, lng: place.lng, innehåll: html); ); ) Vi definierar först lat och lng variabler, men i stället för att omedelbart skapa kartan väntar vi på att vår Ajax-förfrågan ska slutföras. Vi gör ungefär elva API-samtal bakom kulisserna, så det kan ta tio eller femton sekunder.
Därefter ser vi till att gränsgränsen inte har slagits och varnar användaren på lämpligt sätt. Slutligen cyklar vi igenom resultaten och lägger till var och en på kartan med ett kommando från GMaps-biblioteket.
Nu kan du öppna sidan och testa den. allt ska fungera! Med lite styling och lite design kan det se ut så här:
Vår app är komplett, och det sista steget är att optimera det. Låt oss först ta bort de filer som vi inte använder. I js / app / mapp kan du ta bort allt utom main.js fil. I js / lib / mapp, ta bort de filer som heter appCache.js och network.js. Du behöver inte heller manifest.webapp fil, men du kan behålla om du så önskar.
Öppna nu volofile, och du kan se att mallen kom med ett ganska komplicerat byggkommando för att optimera och konfigurera projektets JavaScript- och CSS-filer. Vi behöver inte ett sådant utarbetat skript, så ta bort allt från filen och ersätt det med följande:
module.exports = 'build': 'summary': 'Kommando att sammanställa källfilerna', 'run': ['v.rm www-built', 'v.copyDir www www-built', 'v. rm www-built / js ',' nodverktyg / r.js -o baseUrl = www / js / lib paths.app = ... / app paths.requireLib = kräva namn = app include = requireLib out = www-built / js / lib / require.js "," v.rm www-built / css "," nodverktyg / r.js -o cssIn = www / css / app.css out = www-built / css / app.css "] ;
Volo är ett omni-verktyg: du får vad du lägger i det.
Detta är mycket enklare. Här skapar vi ett kommando som heter bygga som tar bort det tidigare byggda fältet om det existerar. Den kopierar sedan hela www mapp som bas för vår sammanställda version. Därefter tar vi bort js katalog (vi ersätter den med den optimerade versionen).
Sedan kör vi require.js optimizer för att kompilera JavaScript-filerna i en enda fil. Du kanske märker att den byter namn på den slutliga produkten till require.js; Det här är typ av ett "hack" eftersom det inte är egentligen biblioteket require.js. Men eftersom vår HTML-fil har en referens till require.js Det är redan lättare att byta namn på Javascript-filen än att analysera alla HTML-filer och ändra skriptreferenser.
När det här kommandot har slutförts tar vi bort CSS-mappen (igen för att ersätta den med den optimerade versionen). Och sist men inte minst kör vi require.js optimizer igen, den här gången för CSS.
Du kan nu exekvera volo bygga från ditt terminalfönster och Volo kommer att köra denna serie kommandon.
I din webbläsare kan du navigera till www byggda mapp istället för www mapp för att se till att det fortfarande fungerar. På min dator, bygga projektet klippa filstorleken i halva, från knappt en megabyte till ~ 400kb. Du kan förmodligen få det ännu mindre om du minskar CSS.
I den här artikeln lärde jag dig Volos syntax och vi byggde ett exempelapplikation. Vi lärde oss hur vi använder Volo för att skapa ett projekt, lägga till beroende, lägga till egna kommandon för att automatisera vanliga uppgifter och optimera ett helt projekt.
Sammanfattningsvis är Volo ett omni-verktyg: du får vad du lägger i det. Du har några, men kraftfulla, kommandon, men Volos sanna kraft kommer från det otroliga förlängningsförmåga och i slutändan sitt samhälle.
Så vad tycker du om Volo? Ska du skapa egna Volo-kommandon? Lämna en kommentar med dina frågor och åsikter.
Tack för att du läste.
"+"