Share
Applikationerna verkar alla ha ett byggversionsnummer, eller hur? Överallt söker du råd om att hantera ett stort mjukvaruprojekt, du kommer att upptäcka att en automatiserad byggprocess är praktiskt taget ett krav. Jag har funnit det nödvändigt att automatisera en byggprocess som sammanfogar och minifilerar de filer som behövs för en viss sida. Denna handledning kommer att mystify Ant-byggverktyget och visa dig hur du skapar egna, flexibla, bygga filer för ett JavaScript-bibliotek.
För denna handledning behöver du NetBeans med Ant installerad. Jag använder ofta:
Myrverktyget i PHP-versionen är en något begränsad version, men är perfekt för våra ändamål, eftersom PHP-projekten inte är komplicerade med en automatiskt genererad byggfil. Så för denna handledning kommer jag att demonstrera med PHP-versionen. Ant är dock naturligtvis tillgängligt vid Apache och används ofta i IDEs, som Eclipse. För .Net C # community finns det ett verktyg som heter Nant, som jag använder i mitt .NET-projekt - det är ganska lika.
I mitt första allvarliga försök att skapa en Ajax-applikation på en sida slutade jag med en lista med nästan 40 skriptkoder som gav en starttid på över en minut. För att göra projektet hanterbart, behövde jag innehålla koden i flera moduler, för att inte tala om alla de YUI-moduler som krävdes. Efter att ha läst bloggar skrivna av YUI-teamet, insåg jag hur viktigt det är för prestanda att minska antalet skriptkoder till så lite ett antal som möjligt. Därför intresserar jag mig för att sammanfatta och minimera JavaScript-filer.
Kombinera flera filer reducerar de extra bytesna från HTTP-rubrikerna samt möjlig överföringstidslängd som orsakas av långsamma TCP-start, paketförluster etc..
YUI Blog: Prestationsforskning, Del 6
Lajos Moczars utmärkta Tomcat 5 Unleashed hade ett stort inflytande på min inställning till att utveckla en komplett webbaserad applikation. Det är mycket mer än en bok om Tomcat. Det gav mig motivation, vägledning och mod att börja använda Ant för att bygga mina JSP-projekt. Ant är inbyggd i NetBeans, min favorit IDE för JSP, och jag blev van att använda den automatiskt genererade byggfilen med lite behov av manuell redigering när man byggde ett Java-paket av klasser. Men när min förståelse för JavaScript växte upptäckte jag att jag behövde en byggprocess och var tvungen att skriva egna byggkonfigurationsfiler manuellt bara för JavaScript-delen av projektet. Moczar's build.xml för en Tomcat-applikation gav mig en bra utgångspunkt.
Att ha en bra utvecklingsmiljö är absolut kritisk till framgången för din utvecklingsinsats. Du behöver en strukturerad miljö som låter dig utföra dina byggprocesser på ett effektivt och repeterbart sätt.
- Lajos Moczar, Tomcat 5 Unleashed
Redaktörens anmärkning: Om du bestämmer dig för att använda Ant, är Grunt ett fantastiskt byggverktyg för dina JavaScript-applikationer. Läs mer om det här på Netuts+.
Öppna ett nytt projekt i NetBeans. Jag har ringt min NetTutsBuildJs, och har skapat den i min Netuts + -mapp här: C: \ NetTuts \ BuildJs. Självklart behöver JavaScript inte sammanställas till en exe fil; vi har olika bekymmer. Det finns minst tre saker som vi behöver för ett stort JavaScript-projekt:
Som du kan se i skärmdumpen har jag skapat en mapp som heter js för min JavaScript, och sedan lagt till mapparna, src, concat och min.
Jag är lite uttråkad med att säga "Hello World" i början av varje ny IT-handledning, eller hur? Så jag trodde det skulle vara trevligt att ignorera världen den här gången. Det kan trots allt bara vara en fantasi av min fantasi!
Jag är en solipsist. Varför är det inte mer av oss?
Accentsconagua
build.xml. Du kanske inte märker något nu, men om du startar om IDE kommer du att se det build.xml har nu en speciell ikon med en gul triangel i samband med Ant-filer. Om du markerar det ser du att navigationspanelen nu visar Ant-mål i dess rubrik.
Varje uppsättning uppgifter i en Ant-byggfil kallas ett mål, så vi behöver skapa ett enkelt meddelandemål
nestad inuti projekttaggen, så här:
Expandera nu build.xml filen på projektpanelen och du kommer att se det nya målet i Navigator-panelen. Högerklicka på ignorera-världen-meddelandet och du ska se meddelandet i utmatningspanelen, så här:
Höger. Världen kan inte existera och vi har ignorerat det, men åtminstone verkar Ant vara att arbeta! Skämtar ihop, vi måste nu få den mest avgörande saken i Ant rätt: vägar.
Jag kan vara lite långsam, men jag har alltid haft problem med det här, så låt oss trampa försiktigt. Lägg till en egenskap överst i filen, precis under projektets tagg. Ring fastigheten rot och ange platsen till en nolllängdsträng.
Lägg till ett nytt mål för att visa den här platsen så att vi kan se till att vi har våra vägar raka. Lägg märke till den sammanfattade syntaxen för att referera till rotegenskapen? Du måste bifoga egenskapsnamnet inuti dubbla citattecken, men dessutom måste du lägga det med ett dollartecken och ett lockigt hål på vänster och stäng sedan det med en lockigt hylsa till höger. Vilket väsen!
Du kan sätta det efter ignorationsvärlden. Nu när du högerklickar på show-root-path mål för att visa snabbmenyn och klicka sedan på "Kör mål", borde du se rätt väg till roten till ditt projekt. I mitt fall: C: \ NetTuts \ BuildJs.
Härlig. Vi har vår miljö och vi har en rotbana som pekar på rätt plats på hårddisken. Nu kan vi lägga till de andra vägarna.
Äntligen, lite verkligt arbete. Vi lägger till ett nytt mål, vilket inkluderar en concat tagg så här:
Det här är bara ett trivialt exempel, men för snabbhet så att du kan följa med, har jag skapat två enkla JavaScript-filer: tree_data.js och tree.js, som beror på YUI-filerna, Yahoo-dom-event.js och Treeview-min.js. tree_data.js har följande ganska meningslösa innehåll:
var treeData = ["etikett": "Storbritannien", "barn": ["London", "Edinburgh"], "etikett": "Frankrike", "barn": ["Paris", "Lyon"] , "label": "Japan", "barn": ["Tokyo", "Kyoto"], "etikett": "Thailand", "barn": ["Bangkok", "Pattaya"]]
Och tree.js gör enkelt en Trädvy med den data.
YAHOO.util.Event.onDOMReady (funktion () var tree = nytt YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Observera att filelistiketten är precis vad vi behöver här. I JavaScript gäller order, så vi vill noga ha data först och sedan återgivningsfilen andra. Om vi använde en tagg som åberopade filens naturliga ordning i operativsystemet kan vi få dem i fel ordning. Så vi skriver ut arbetskortet manuellt i en fillista taggar för att säkerställa den ordning vi vill ha.
För dig JavaScript purister där ute: Jag känner min
treeDatavariabeln är en global variabel och jag borde göra det på ett annat sätt. Detta är bara ett snabbt exempel för att förklara hur man använder Ant. Jag är helt säker på att folket som följer handledningen följer också nuvarande bästa praxis för deras JavaScript-bibliotek.
Kör nu concat mål. Kom och se, en fil som heter träd-concat.js visas magiskt i concat katalog, och när du öppnar den kan du se de data som definieras längst upp och reningsfunktionen längst ner.
För att prova detta har jag skapat två enkla HTML-filer: tree_src.html och tree_concat.html. I rubriken har de båda samma länkar till de CSS-filer som behövs för att skapa Sam-skinnet för en TreeView.
Strax före kroppens slut tree_src.html, jag har lagt till
För att testa den sammanlänkade filen. Jag har ändrat manus taggar i tree_concat.html till:
Vårt trädbibliotek verkar fungera, och när vi sammanfogar filerna verkar vi ha fått rätt ordning. Excellent! Det är nu äntligen dags att minska allt och minska antalet manus taggar ner till en. Detta är lite mer komplicerat.
Observera egenskapskompressorn. För att få allt detta att köra, kopierade jag YUI-kompressorkärlfilen till yui_compressor mapp i mitt projekt och skapade en egenskap i byggfilen:
När vi kör min mål, bör du nu se den här utmatningen och en ny fil, kallad träd-min.js i min mapp. Om du öppnar den ser du en lång kontinuerlig ström av JavaScript utan någon blankutrymme, allt på en rad.
Det behövs bara ett ytterligare mål: sammanfoga de två YUI-filerna med vår nya minifilerade fil.
I testfilen, tree_min.html, Nu behöver jag bara en manus märka:
Det sista steget är att lägga till ett mål som samlar alla nödvändiga mål och kör dem i rätt ordning. Konventet är att kalla detta mål, bygga. Det är också användbart att ha en rena målet att radera concat och min kataloger och en i det målet att ställa in dessa kataloger.
Byggnadsmålet ska nu köras:
Sättet att kombinera alla dessa är att helt enkelt lägga till dem till beror attributet, så här.
Vi gick igenom de steg som krävs för att skapa en konfigurationsfil för Ant att bygga ett JavaScript-bibliotek.
I den här handledningen gick vi igenom de steg som krävs för att skapa en konfigurationsfil för Ant för att skapa ett JavaScript-bibliotek. Med utgångspunkt från källkoden sammanfogade vi alla filer i biblioteket i en fil, så att varje källfil läggs till i rätt ordning. Vi testade den resulterande sammanlänkade filen för att säkerställa att ingenting saknades eller var ostört. Vi minskade sedan den filen och sammanfogade den med de YUI-filer som det berodde på.
Slutresultatet var att vi hade en webbsida med bara en manus tagg, som innehåller alla de komplexa JavaScript som behövs för att köra sidan. Jag tror att du kan se hur enkelt det skulle vara att anpassa detta exempel till ett mycket stort komplext JavaScript-bibliotek. Med detta grundläggande exempel som utgångspunkt borde du kunna utforska Ant-dokumentationen och utveckla en fullt fungerande byggfil för att automatisera alla delar av din byggprocess.
Jag använder också Ant för SQL för att bygga den lokala klonen i min databas.
Dessutom använder jag den här typen av bygg för CSS-filer också. De kan bli nästan lika invecklade som JavaScript-filerna och det hjälper verkligen att sammanfatta och minska dem också. Jag använder också Ant för SQL för att bygga den lokala klonen i min databas. Jag tycker att när jag vill börja på nytt med ett projekt, städar ut hela experimentkoden och börjar från början, är det väldigt användbart att ta med en fin ny databas. Myrverktyget gör det enkelt att snabbt bygga tabellerna, funktionerna och rutinerna och sedan fylla i saken med vissa provdata.
