Share
Programmer ser alle ut til å ha et versjonsnummer, ikke sant? Hvor som helst du ser etter råd om å administrere et stort programvareprosjekt, vil du oppdage at en automatisert byggeprosess er praktisk talt et krav. Jeg har funnet det viktig å automatisere en byggprosess som sammenkorter og minifiserer filene som trengs for en gitt side. Denne opplæringen vil de-mystify Ant-byggeverktøyet og vise deg hvordan du lager dine egne, fleksible, bygge filer til et JavaScript-bibliotek.
For denne opplæringen trenger du NetBeans med Ant installert. Jeg bruker ofte:
Myrverktøyet i PHP-versjonen er en litt begrenset versjon, men er ideell for vårt formål, fordi PHP-prosjekter ikke er kompliserte med en automatisk generert byggfil. Så for denne opplæringen vil jeg demonstrere med PHP-versjonen. Imidlertid er Ant selvfølgelig tilgjengelig på Apache og er mye brukt i IDEer, som Eclipse. For .Net C # fellesskapet, er det et verktøy som heter Nant, som jeg bruker i .NET prosjekter - det er ganske like.
I mitt første alvorlige forsøk på å skape et Ajax-applikasjon på en side, endte jeg med en liste med nesten 40 skriptkoder som ga oppstartstid på over et minutt. For å gjøre prosjektet overskuelig, trengte jeg å inneholde koden i flere moduler, for ikke å nevne alle de YUI-modulene som var påkrevd. Etter å ha lest blogger skrevet av YUI-teamet, skjønte jeg hvor viktig det er for ytelse å redusere antall skriptkoder til så lite et nummer som mulig. Derfor er jeg interessert i å sammenkoble og minifisere JavaScript-filer.
Kombinere flere filer reduserer ekstra bytes fra HTTP-hoder, samt potensiell overføringsforsinkelse forårsaket av TCP-treg start, pakketap osv..
YUI Blog: Performance Research, Del 6
Lajos Moczar utmerkede Tomcat 5 Unleashed hadde stor innflytelse på min holdning til å utvikle en komplett web-basert applikasjon. Det er mye mer enn en bok om Tomcat. Det ga meg motivasjon, veiledning og mot til å begynne å bruke Ant for å bygge mine JSP-prosjekter. Myr er bygd inn i NetBeans, min favoritt IDE for JSP, og jeg ble vant til å bruke den automatisk genererte byggefilen med lite behov for manuell redigering når du bygger en Java-pakke med klasser. Men da min forståelse av JavaScript vokste, fant jeg ut at jeg trengte en byggeprosess og ble tvunget til å skrive mine egne byggkonfigurasjonsfiler manuelt bare for JavaScript-delen av prosjektet. Moczar's build.xml for en Tomcat-applikasjon ga meg et godt utgangspunkt.
Å ha et godt utviklingsmiljø er helt kritisk til suksess for din utviklingsarbeid. Du trenger et strukturert miljø som gjør at du kan utføre byggeprosessene på en effektiv og repeterbar måte.
- Lajos Moczar, Tomcat 5 Unleashed
Redaktørens merknad: Hvis du bestemmer deg for å bruke Ant, er Grunt et fantastisk byggverktøy for JavaScript-applikasjoner. Lær mer om det her på Nettuts+.
Åpne et nytt prosjekt i NetBeans. Jeg har kalt min NetTutsBuildJs, og har laget den inne i min Nettuts + -mappe her: C: \ NetTuts \ BuildJs. Selvfølgelig trenger JavaScript ikke å bli kompilert til en exe fil; vi har forskjellige bekymringer. Det er minst tre ting vi trenger for et stort JavaScript-prosjekt:
Som du kan se i skjermbildet, har jeg opprettet en mappe som heter js for min JavaScript, og deretter lagt til mappene, src, concat og min.
Jeg er litt lei av å si "Hello World" i begynnelsen av hver ny IT-opplæring, ikke sant? Så jeg trodde det ville vært fint å ignorere verden denne gangen. Tross alt kan det være bare en fantasi av fantasien min!
Jeg er solipsist. Hvorfor er det ikke flere av oss?
Accentsconagua
build.xml. Du kan ikke legge merke til noe nå, men hvis du starter på nytt, vil du se det build.xml Nå har et spesielt ikon med en gul trekant forbundet med Ant-filer. Hvis du velger den, vil du se navigatørpanelet nå viser Ant-mål i overskriften.
Hvert sett med oppgaver i en Ant-byggefil kalles et mål, så vi må opprette et enkelt meldingsmål
nestet inne i prosjektet, slik:
Nå, utvide build.xml filen i Prosjektpanelet, og du vil se det nye målet i Navigator-panelet. Høyreklikk på ignorere-verdensmelding, og du bør se meldingen i Utdata-panelet, slik som dette:
Ikke sant. Verden kan ikke eksistere, og vi har ignorert det, men i det minste ser Ant ut til å fungere! Skrekk fra hverandre, vi må nå få mest avgjørende ting i Ant rett: stier.
Jeg kan være litt treg, men jeg har alltid hatt problemer med dette, så la oss tread forsiktig. Legg til en egenskap øverst på filen, like under prosjektet. Ring eiendommen rot og sett plasseringen til en nulllengdesnor.
Legg til et nytt mål for å vise denne plasseringen, slik at vi kan sikre at vi har stiene rett. Legg merke til den konvolutte syntaksen for å referere til rotegenskapen? Du må legge inn eiendomsnavnet inne i dobbeltsedler, men i tillegg må du pakke det med et dollarskilt og en krøllete stav til venstre, og lukk den med en krøllet stav til høyre. Hva en oppstyr!
Du kan sette det etter ignorert verdensmål. Nå når du høyreklikker på vis-rot-bane mål for å vise kontekstmenyen og deretter klikke "Kjør mål", bør du se den riktige banen til roten til prosjektet ditt. I mitt tilfelle: C: \ NetTuts \ BuildJs.
Herlig. Vi har vårt miljø og vi har en rutebane som peker til riktig sted på harddisken vår. Nå kan vi legge til de andre banene.
Til slutt, noen virkelige arbeid. Vi legger til et nytt mål, som inkluderer en concat tag, slik:
Dette er bare et trivielt eksempel, men for raskhet slik at du kan følge med, har jeg opprettet to enkle JavaScript-filer: tree_data.js og tree.js, som er avhengig av YUI-filene, yahoo-dom-event.js og Utforsker-min.js. tree_data.js har følgende ganske meningsløse innhold:
var treeData = ["label": "Britain", "children": ["London", "Edinburgh"], "label": "Frankrike", "barn": ["Paris", "Lyon"] , "label": "Japan", "barn": ["Tokyo", "Kyoto"], "label": "Thailand", "barn": ["Bangkok", "Pattaya"]]
Og tree.js gjør ganske enkelt a Tre utsikt med dataene.
YAHOO.util.Event.onDOMReady (funksjon () var tree = nytt YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Legg merke til at filelisten-taggen er akkurat det vi trenger her. I JavaScript er ordren viktig, så vi vil sannsynligvis dataene først og deretter gjengivelsesfilen andre. Hvis vi brukte en tagg som stod på den naturlige rekkefølgen på filene i operativsystemet, kan vi få dem i feil rekkefølge. Så skriver vi arbeidskrevende ut manuelt i listen Filelist tag for å sikre bestillingen vi ønsker.
For deg JavaScript-purister der ute: Jeg vet min
treeDatavariabel er en global variabel, og jeg bør gjøre det på en annen måte. Dette er bare et raskt eksempel for å forklare hvordan du bruker Ant. Jeg er ganske sikker på at folk som følger opplæringen, også følger dagens beste praksis for deres JavaScript-bibliotek.
Kjør nå concat mål. Se og se, en fil som heter tre-concat.js vises magisk i concat katalog, og når du åpner den, kan du se dataene som er definert øverst og gjengivelsesfunksjonen nederst.
For å prøve dette, har jeg opprettet to enkle HTML-filer: tree_src.html og tree_concat.html. I toppteksten har de begge de samme koblingene til CSS-filene som trengs for å lage Sam-skinet for et TreeView.
Like før slutten av kroppen i tree_src.html, jeg har lagt til
For å teste den sammenkoblede filen. Jeg har endret manus tagger inn tree_concat.html til:
Vårt trebibliotek ser ut til å fungere, og når vi slår sammen filene, ser vi ut til å ha fått riktig rekkefølge. Utmerket! Nå er det endelig tid til å redusere alt og redusere antall manus merker ned til en. Dette er litt mer komplisert.
Legg merke til egenskapskompressoren. For å få dette til å løpe, kopierte jeg YUI kompressor jar fil til yui_compressor mappe i prosjektet mitt og opprettet en eiendom i byggfilen:
Når vi kjører min mål, bør du nå se denne utgangen og en ny fil, kalt tre-min.js i min mappe. Hvis du åpner den, ser du en lang kontinuerlig strøm av JavaScript uten hvitt plass, alt på en linje.
Det er bare ett mål som er nødvendig: sammenkoble de to YUI-filene med vår nye, minifiserte fil.
I testfilen, tree_min.html, Jeg trenger nå bare en manus stikkord:
Det endelige trinnet er å legge til et mål som kaller alle de nødvendige målene og kjører dem i riktig rekkefølge. Konvensjonen er å kalle dette målet, bygge. Det er også nyttig å ha a ren Målet er å slette concat og min kataloger og en i det Målet er å sette opp disse katalogene.
Byggemålet skal nå løpe:
Måten å kombinere alle disse er å bare legge dem til avhengighetsattributtet, slik som dette.
Vi gikk gjennom trinnene som kreves for å opprette en konfigurasjonsfil for Ant for å bygge et JavaScript-bibliotek.
I denne veiledningen gikk vi gjennom trinnene som kreves for å opprette en konfigurasjonsfil for Ant for å bygge et JavaScript-bibliotek. Fra kildekoden sluttet vi alle filene i biblioteket til en fil, og sørget for at hver av kildefilene ble lagt til i riktig rekkefølge. Vi testet den resulterende sammenkoblede filen for å sikre at ingenting manglet eller var ute av sted. Vi minifiserte den filen og konkluderte den med YUI-filene den avhengige av.
Det endelige resultatet var at vi hadde en nettside med bare en manus tag, som inneholder alt komplekst JavaScript som trengs for å kjøre siden. Jeg tror du kan se hvor enkelt det ville være å tilpasse dette eksemplet til et veldig stort komplekst JavaScript-bibliotek. Med dette grunnleggende eksemplet som utgangspunkt bør du kunne utforske Ant-dokumentasjonen og utvikle en fullt fungerende byggfil for å automatisere alle deler av byggeprosessen din.
Jeg bruker også Ant for SQL for å bygge den lokale klonen i databasen min.
I tillegg bruker jeg denne typen bygge for CSS-filer også. De kan bli nesten like innviklede som JavaScript-filene, og det hjelper virkelig å sammenkoble og redusere dem også. Jeg bruker også Ant for SQL for å bygge den lokale klonen i databasen min. Jeg finner at når jeg vil starte på nytt med et prosjekt, rydder ut all eksperimentell kode og starter fra bunnen av, er det veldig nyttig å ta med en fin fersk ny database. Myrverktøyet gjør det enkelt å raskt bygge tabellene, funksjonene og prosedyrene, og deretter fylle saken med noen prøvedata.
