Share
Noen gang finner du deg kjedelig, repeterende oppgaver som webutvikler? I dag skal jeg vise deg hvordan du kan kutte de meta-oppgavene ut av utviklingssyklusen med litt automatisering. I denne opplæringen lærer du hvordan du enkelt utfører de repeterende oppgavene med Apache Ant.
Publisert opplæringNoen få uker besøker vi noen av leserens favorittinnlegg fra hele historien til nettstedet. Denne opplæringen ble først publisert i mars 2011.
Myr gjør det utrolig enkelt å definere et sett med oppgaver som du deretter kan utføre med noen få kommandoer.
Myr er et stykke programvare som opprinnelig ble bygget for å automatisere programvarebygg. Den er laget av Apache (ja, som i Apache-serveren), og dens primære formål er å bygge Java-applikasjoner. Når du bygger programvare (eller, i vårt tilfelle, nettsteder / apper), gjør du flere oppgaver som er identiske hver gang du bygger eller publiserer eller distribuerer prosjektet ditt. Det er bortkastet din verdifulle tid å gjøre dette manuelt. Myr gjør det utrolig enkelt å definere et sett med oppgaver som du deretter kan utføre med noen korte og søte kommandoer gjennom terminalen.
Klar? La oss komme i gang!
Før vi kommer til Ant, må vi ha et prosjekt å jobbe med her. Her er index.html fil jeg bruker:
Dummy Project Demo Side
Det er tre CSS-filer og tre JavaScript-filer i dette prosjektet.
- Eric Meyer Reset
- Grid.css fra Blueprint CSS
- Et tilpasset stilark
- jQuery
- Douglas Crockfords Top Down Operator Precedence filen tokens.js og parse.js.
Alle disse filene er ukomprimert; det er poenget med denne opplæringen, tross alt.
Som du kan se, forklarer dette resten av prosjektet. Hvis du laster ned prosjektet (link øverst), får du CSS- og JavaScript-filene.
Så hva skal vi gjøre med dette prosjektet? Som du ser, har vi flere CSS- og JavaScript-filer koblet sammen i dette prosjektet. Hva vi skal gjøre er å kompilere og komprimere hver i sin respektive fil og FTP alt sammen til en server. Før alt dette begynner vi ved å installere Ant.
Installere Ant kan være en ganske skremmende oppgave. Heldigvis, både Windows og Mac installasjonsprosessen er ganske lik. Hvis du er på Linux, kommer jeg til å anta at du enten har Ant installert allerede, vet hvordan, eller kan finne ut det uten min håndholdte.
Hvis du er på en Mac, har du sannsynligvis allerede Ant installert; Men noen av de mer avanserte oppgavene (i vårt tilfelle, FTP) vil ikke fungere. Så, vi installerer den nyeste versjonen.
Før vi begynner, vil jeg peke deg på de fullstendige instruksjonene som Apache tilbyr: du kan få dem her. (Dessverre er det hele håndboken for Ant, jeg kan ikke gjøre noe bedre, som det er gjort med rammer. Du får se koblingen "Installere Apache Ant" i venstre ramme.) Det jeg forteller deg nedenfor, kan alle bli funnet der inne (og mer dessuten), men min versjon er litt mer web-utvikler vennlig.
Først av, la oss sørge for at vi har de riktige Java-avhengighetene. Enten du er på Windows eller Mac, trenger du Java Development Kit (JDK) - minst versjon 1.4. Du kan laste den ned her. Hvis du ikke er sikker på hvilken versjon av JDK du har, kjør kommandoen java-versjon i terminal / kommandolinjen. Som jeg forstår, er JDK-versjonsnummeret det samme som Java-versjonsnummeret.
La oss nå laste ned den nyeste versjonen av Ant. Du kan hente den fra nedlastingssiden for binær distribusjon (selvfølgelig kan du få kilden og kompilere det selv, hvis det er slik du ruller). Du finner koblingene halvveis ned på siden:
Når du har lastet ned og pakket ut den, må vi installere den. Dette er hva du får:
Den første delen av installasjonen er forskjellig fra plattformen. La oss starte med Windows-trinnene:
Først må du velge mappen der du vil installere Ant. jeg gikk med C: \ maur, men det er opp til deg. Opprett den mappen, og flytt den bin, lib, og etc mapper fra nedlastingsmappen til den mappen. Du vil også flytte fetch.xml og get-m2.xml.
Når du har gjort det, må du sette opp noen miljøvariabler. Hvis du ikke er sikker på hvordan du gjør dette, kan du finne instruksjoner her (Gjør disse systemvariablene - selv om det ikke er sant, det burde ikke være noe). Dette er hva du må sette opp:
Accentsconagua
ANT_HOME; dette bør peke på mappen som du flyttet ant-komponentene til. Eksempel: C: \ maur.JAVA_HOME; dette kan allerede være der, men hvis det ikke er det, bør det peke på mappen som holder Java-installasjonen din. Min er C: \ Program Files \ Java \ jdk1.6.0_18.Sti variabel. Dette er en liste over mapper kommandolinjen søker gjennom for å finne kommandoene du vil utføre. IKKE overskriv dette kompetent; bare legg til ;% ANT_HOME% \ bin til slutten av det. Ikke gå glipp av det semikolonet; Det er det som skiller stiene i listen. Du kan kanskje gjette at % ANT_HOME% litt refererer til variabelen vi laget tidligere.Nå har du Ant installert på Windows! Det er enda et viktig steg, men; Så hopp over Mac-stykket og følg med.
Du har allerede fått maur installert på din Mac; Du kan se dette ved å kjøre kommandoen hvilken myr på terminalen. Dette vil utføre noe i tråd med / Usr / bin / maur, som stien til myren kjørbar du bruker. Men hvis du faktisk går til den mappen, finner du at det bare er en symlink til de virkelige tingene.
Som du kan se, er det knyttet til /usr/share/java/ant-1.8.1/bin/ant. Nå kan du bruke dette, men da jeg prøvde å, kunne jeg ikke bruke FTP-komponenten. Snarere enn å installere Ant et annet sted og rote med symlinken, valgte jeg å gjøre dette: flytt det som var i usr / share / java / ant-1.8.1 mappe til en undermappe som heter _gammel og flytt de nye tingene inn. Du må flytte bin, lib, og etc mapper, pluss fetch.xml og get-m2.xml filer. Nå vil den symlinken peke på den oppdaterte versjonen av maur. Hvis du kjører ant-versjon i terminalen bør du se at du har versjon 1.8.2 (eller hvilken versjon som er sist på det tidspunktet du leser dette).
Det er ett skritt å fullføre installasjonen. Det finnes flere valgfrie komponenter som ikke kommer med Ant, men at vi trenger for vårt prosjekt, og at du kanskje vil bruke nedover veien. La oss få dem nå.
Du starter med å åpne en kommandolinje eller terminal og skifte til katalogen som du nettopp har installert Ant in. Enda viktigere er det katalogen du legger fetch.xml fil inn. Kjør nå denne kommandoen:
ant-f hente.xml -Dest = system
Dette vil laste ned og installere ganske mange valgfrie komponenter; Dette er ikke en av disse blink-og-det-over-kommandoene: det kan ta noen minutter.
Nå har du Ant installert og klar til å kjøre; la oss komme på jobb.
build.xml FilAnt bruker en XML-fil for å lagre oppgavene for det nåværende prosjektet.
Ant bruker en XML-fil for å lagre oppgavene for det nåværende prosjektet; når du er i prosjektets katalog på kommandolinjen, kan du kjøre kommandoen myr TASK_NAME_HERE, og den finner den aktuelle oppgaven i XML-filen og utfører den.
Hvis du ikke er kjent med XML, ikke bekymre deg. XML står for eXtensible Markup Language, og det ligner veldig på HTML. Den bruker koder og attributter for å definere data. Faktisk ligner det mer på XHTML (RIP), fordi reglene er strenge: alle koder og attributter må være små, verdier er sitert, en doktype er nødvendig, etc. Ikke bekymre deg, men du vil bli avhengig av den.
XML-filen som Ant ser etter som standard, skal bli navngitt build.xml; du vil legge den inn i prosjektmappen din.
Så hva skjer i XML-filen? Her er en start:
Ser ut som HTML, eh? Den første linjen er en XML-doktype. Deretter har vi rotnoden, som er en prosjekt. Jeg har lagt to attributter til det: a Navn, som bare forklarer hva vår liste over oppgaver vil gjøre; og a misligholde, som definerer standard oppgave å kjøre.
Se, hvordan standard oppgaveideen fungerer. La oss si at vi lager en oppgave som heter ring mamma. Vi kunne kjøre det fra terminalen ved å gjøre dette:
myr call_mom
Hvis du finner at det meste du kjører Ant på et prosjekt, ringer du på samme oppgave, du vil gjøre det som standard. I vårt tilfelle har vi satt initial som standardoppgave, den som vil løpe hvis vi ikke forteller myr for å kjøre noe.
ant initierer myr
Disse er begge de samme.
Nå som vi har vår build.xml fil, la oss lage vår første oppgave.
Oppgaver kalles mål innen build.xml fil. Sjekk ut dette:
Hei mamma!
Koble dette inn i din build.xml fil og kjør myr call_mom på konsollen. Du bør skrive ut som ser noe ut som dette:
Buildfile: /path/to/your/build.xml call_mom: [echo] Hei mamma! BUILD SUCCESSFUL Total tid: 0 sekunder
I sin produksjon vil Ant ha en oppføring for alle oppgavene som kjøres. Deretter vil eventuelle utdata fra disse oppgavene vises, fanes inn under riktig oppgavenavn. Som du kan se, har vi kalt ekko oppgave, som skriver ut hva vi legger inne i det.
Men hvordan visste jeg at ekko var en oppgave? Vel, du kan få en liste over de innebygde oppgavene her i dokumentasjonen. Dette er en god tid å påpeke at mange oppgaver har flere måter de kan bli kalt. For eksempel kunne vi også ha gjort:
Nå som du begynner å varme opp i antips ideer, la oss snakke om egenskaper.
Myr har egenskaper, som er veldig lik variable i et programmeringsspråk.
Som du bruker Ant mer, kan du oppleve at du har en boilerplate build.xml fil som du bare justerer litt. En av disse tilpasningene kan være fil / mappenavn. Myr har egenskaper, som er veldig lik variable i et programmeringsspråk. Du kan lage dem på denne måten (dette gjøres i en oppgave).
stilark
Du kan også flytte alle disse egenskapene ut i en egen fil, og importere filen. Det er det vi skal gjøre her. Dette bringer oss til å skape vår første (virkelige) oppgave:
Importerte egenskaper
Vi har kalt vår oppgave get_properties. Det involverer to handlinger: først bruker vi eiendom Oppgave å importere filen (vi kan gjøre det med fil Egenskap). Da ekko vi en melding som sier at den var vellykket. Det er så enkelt.
Selvfølgelig må vi opprette ant.properties fil. Dette er super-enkelt; her er den vi skal bruke i dag:
css_dir = css js_dir = js assets_dir = eiendeler
Du kan tro at dette faktisk gjør det vanskeligere, fordi våre variabler navn er lengre enn verdiene selv. Vel, det er sant, men det gir oss litt fleksibilitet i bruken av vår build.xml fil, gjør det mer gjenbrukbart og mer delbart.
Ok, la oss bli seriøse. Vi har åpenbart fått ganske flere oppgaver å skape før vi har en nyttig build.xml fil.
Her er en liste over oppgavene vi må opprette:
Vi skal bruke noen forskjellige taktikker for å gjøre alt dette for å gi en god oversikt over hvordan Ant fungerer.
La oss starte med å samle oppgaver; disse tar et sett med filer og sammenkaller dem alle sammen i en fil. Myr har en innebygd oppgave kalt concat det gjør dette.
Jeg har kalt denne oppgaven concat_css. Innvendig kjører vi bare concat oppgave. Som du kan se, vil filen de blir sammenkalt til (destfile, eller destinasjonsfil) vil være i eiendeler / style.css. Du vil legge merke til at jeg bruker assets_dir egenskaper, som vil erstatte den riktige verdien i. Du må pakke inn bruk av egenskaper i dollar-sign-and-braces notation.
Inne i concat Oppgave, definerer vi a Filelist Dette er bare en av måtene vi kan gripe en haug med filer på. Jeg bruker det her fordi det gir meg mulighet til å definere rekkefølgen jeg vil like disse filene sammen. Jeg gir den et ID, som gir oss tilgang til filsettet på samme måte som vi ville bruke en parameter (selv om vi ikke vil gjøre det). Det har også attributtet dir, som forteller oppgaven hvilken mappe for å finne filene i. Deretter, inne, bare definer passende fil noder, med deres Navn Attributt holder filnavnet.
Det er din første virkelige oppgave! Forhåpentligvis er det fornuftig. Mens vi er i det, er JavaScript-en ikke så annerledes:
Komprimering blir litt vanskeligere, fordi den ikke er innebygd i Ant. Imidlertid støtter Ant utenfor oppgaver via java .jar-filer. Dette er utrolig nyttig for oss, fordi YUI Compressor er tilgjengelig som en .jar-fil (det er den eneste måten den er tilgjengelig på). Du kan laste den ned på YUI Library nedlastingssiden. Du vil lagre det på et smart sted, og kanskje omdøpe det. Jeg har reddet den til MY_USER_FOLDER / bin / yui.jar. Gjør det som gleder deg.
Nå vil YUI Compressor komprimere både JavaScript og CSS. Det vi kan gjøre her er å lage en komprimere oppgave, og deretter ring den fra to mer spesifikke oppgaver. Vi kan gjøre dette fordi Ant har støtte for å ringe andre oppgaver og passere i parametere. La oss se hvordan dette virker:
$ File
Vi bruker java kommandoen her. Dette ligner på å kjøre jarfilen fra kommandolinjen. De krukke Tilordne poeng til jarfilen. Hvis gaffel Attributtet er sant, vil kassen bli kjørt i en Java-virtuell maskin, skilt fra den ene Ant kjører på. Deretter inne i java node, definerer vi argumentene. På kommandolinjen, ville vi passere inn input.file -o output.file. Så, vi gjør det samme her.
Men hvor er det? fil eiendom kommer fra? Herfra:
Dette er vår CSS-komprimeringsoppgave. Først legg merke til at mål node har et andre attributt: avhenger. Du kan sikkert gjette at dette betyr at compress_css oppgavene avhenger av concat_css oppgave, så det må kjøres først. På denne måten kan vi ringe compress_css og det vil automatisk ringe concat_css først.
Nå, hva skjer inni? Vi utfører en antcall oppgave, som bare kaller en annen oppgave i vårt build.xml fil-i dette tilfellet, det er vår komprimere oppgave. Innenfor kan vi lage så mange parametre som vi trenger, hver med navn og verdi. Ja, dette er veldig som å kalle en funksjon. Dette er fil parameter som vi bruker innenfor vår komprimere oppgave.
Og her er JavaScript-versjonen:
Ikke glem, denne er avhengig av concat_js.
Vei tilbake på toppen av roten vår prosjekt node-vi satte misligholde oppgave som initial. Vi har ikke opprettet oppgaven enda, så la oss gjøre det nå.
Ferdig!
Denne oppgaven avhenger av to andre oppgaver (en av disse har vi ikke laget ennå); Vi bruker bare en kommaseparert liste for å kreve flere oppgaver.
Innsiden er den første oppgaven å opprette vår eiendomsmappe med mkdir oppgave (akkurat som på kommandolinjen). Deretter lager vi to antcalls, en for å komprimere CSS, og en for å komprimere JavaScript. Husk at disse to oppgavene er avhengige av deres respektive sammenkoblingsfunksjoner, så de vil ringe dem. Endelig vil vi ekko en melding som lar brukeren vite at vi er ferdige.
Hva med det rydde opp oppgave som initial kommer an på? Det er ganske enkelt:
Den sletter bare eiendomsmappen. Dette er ikke helt nødvendig, men du kan finne det nyttig.
La oss skape en ekstra oppgave; Vi vil laste opp prosjektet vårt til en server. Takk til ftp kommando, dette er en cinch.
Vi ringer denne oppgaven Last opp filer, og det avhenger av initial. Vi bruker FTP-oppgaven her. Som du kan se, lagres all viktig info i attributter. Hvis du har jobbet med FTP-klienter før, bør alle disse alternativene være kjent.
ftp node, vi har opprettet en samling av filer som vi vil laste opp. I dette tilfellet bruker vi en fileset element. dir attributt på filset nod som definerer rotkatalogen for det vi ønsker å samle inn.inkludere node for å få de spesifikke filene: vi passerer bare som navnet attributt filen / filene vi ønsker å få. I vårt eksempel får vi alt aktivitetsmappen og innholdet, og index.html-filen.Når du har fylt ut serverinformasjonen din i denne oppgaven, bør den laste opp disse filene for deg!
Legg merke til hvordan vi har ordnet disse oppgavene, skjønt. Hvis vi løper maur På kommandolinjen er vi sammenkalt og komprimerer CSS og JavaScript, men vi vil ikke laste det opp; det er ikke standard. Hvis vi vil laste opp det, kan vi kjøre ant upload_files; siden det avhenger av det initial, vi trenger ikke å ringe initial først. Selvfølgelig kan vi ringe noen individuelle oppgaver vi ønsker (for eksempel: myr compress_js).
Før vi lukker, er det noen få odds og ender jeg vil nevne:
avhenger Oppgave å daisy-chain oppgaver sammen. Du kan gjøre det, men jeg har valgt å holde det til faktiske avhengige oppgaver, og opprett initial Oppgave å ringe de andre. Dette virker bare mer korrekt semantisk.ekko oppgave). Mønstrene jeg har brukt er på ingen måte den "en riktig vei." Også Ant Wiki er en stor ressurs.Og det er en vikle! Jeg håper du har lært noen nye teknikker som vil spare deg tid i fremtiden. Hvis du har spørsmål, vær så snill å poste dem under! Takk så mye for å lese!
