Share
Te-ai gandit vreodata sa faci sarcini plictisitoare, repetitive, ca dezvoltator web? Astăzi, vă voi arăta cum puteți să eliminați acele meta-sarcini din ciclul de dezvoltare cu puțină automatizare. În acest tutorial, veți învăța cum să efectuați cu ușurință aceste activități repetate cu Apache Ant.
Tutorial publicatLa fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în martie 2011.
Ant face incredibil de ușor să definiți un set de sarcini pe care le puteți executa apoi cu câteva comenzi.
Ant este o piesă de software care a fost construită inițial pentru a automatiza software-ul. Este realizat de Apache (da, la fel ca în serverul Apache), iar scopul său principal este de a construi aplicații Java. Când construiți software (sau, în cazul nostru, site-uri / aplicații), faceți mai multe sarcini identice de fiecare dată când construiți, publicați sau implementați proiectul. Este o risipă de timpul tău prețios pentru a face acest lucru manual. Ant face incredibil de ușor să definiți un set de sarcini pe care le puteți executa cu câteva comenzi scurte și dulci prin terminal.
Gata? Să începem!
Înainte să ajungem la Ant, trebuie să avem un proiect pentru a lucra aici. Iată-l index.html fișier pe care îl folosesc:
Proiectul Dummy Pagina demo
Există trei fișiere CSS și trei fișiere JavaScript în acest proiect.
- Restabilirea lui Eric Meyer
- Grid.css de la CSS Blueprint
- O foaie de stil personalizată
- jQuery
- Douglas Crockford a descoperit fișierele Precedence Topkat tokens.js și parse.js.
Toate aceste fișiere sunt necomprimate; acesta este punctul din acest tutorial, la urma urmei.
După cum puteți vedea, acest lucru explică restul proiectului. Dacă descărcați proiectul (link-ul din partea de sus), veți obține fișierele CSS și JavaScript.
Deci, ce vom face cu acest proiect? După cum puteți vedea, avem mai multe fișiere CSS și JavaScript conectate în acest proiect. Ce vom face este compilarea și comprimarea fiecăruia în fișierul respectiv și FTP-ul până la un server. Înainte de toate, vom începe prin instalarea lui Ant.
Instalarea Ant poate fi o sarcină destul de descurajantă. Din fericire, atât procesul de instalare Windows cât și Mac sunt destul de asemănătoare. Dacă sunteți pe Linux, o să vă presupun că fie aveți deja instalat Ant, știți cum, sau vă puteți da seama fără mâna mea.
Dacă sunteți pe un Mac, probabil că ați instalat Ant; cu toate acestea, unele dintre sarcinile mai avansate (în cazul nostru, FTP) nu vor funcționa. Deci, vom instala cea mai recentă versiune.
Înainte de a începe, vă voi îndruma la instrucțiunile complete pe care Apache le oferă: le puteți aduce aici. (Din păcate, acesta este întregul manual pentru Ant, nu pot să fac mai bine, așa cum se întâmplă cu cadrele. Veți vedea linkul "Instalarea Apache Ant" în cadrul din stânga.) Ce vă spun mai jos pot fi găsite acolo (și mai mult), dar versiunea mea este un pic mai mult web-developer prietenos.
În primul rând, să ne asigurăm că avem dependențele Java potrivite. Indiferent dacă sunteți pe Windows sau Mac, veți avea nevoie de Java Development Kit (JDK) - cel puțin versiunea 1.4. Puteți descărca aici. Dacă nu sunteți sigur ce versiune de JDK aveți, executați comanda java -versiune în linia de comandă / terminal. După cum am înțeles, numărul versiunii JDK este același cu numărul versiunii Java.
Acum, să descărcăm cea mai recentă versiune a lui Ant. Puteți obține de la pagina de descărcare pentru distribuția binară (desigur, puteți obține sursa și compilați-o singură, dacă aceasta este modul în care vă rolați). Veți găsi link-urile la jumătatea drumului în jos al paginii:
După ce ați descărcat și dezarhivat, trebuie să-l instalăm. Aceasta este ceea ce veți obține:
Prima parte a instalării diferă de platforma dvs. Să începem cu pașii Windows:
În primul rând, va trebui să alegeți dosarul în care doriți să instalați Ant. m-am dus cu C: \ furnica, dar depinde de tine. Creați dosarul respectiv și mutați cos, lib, și etc dosarele din dosarul de descărcare în acel dosar. Veți dori, de asemenea, să vă mutați fetch.xml și get-m2.xml.
Odată ce ați făcut acest lucru, va trebui să configurați unele variabile de mediu. Dacă nu sunteți sigur cum să faceți acest lucru, puteți găsi instrucțiuni aici (Faceți aceste variabile de sistem - deși, în mod sincer, nu ar trebui să conteze). Aceasta este ceea ce veți avea nevoie să configurați:
Accentsconagua
ANT_HOME; acest lucru ar trebui să indice directorul la care ați mutat componentele Ant. Exemplu: C: \ furnica.JAVA_HOME; acest lucru ar putea fi deja acolo, dar dacă nu este, ar trebui să indice folderul care conține instalarea Java. Al meu e C: \ Program Files \ Java \ jdk1.6.0_18.cale variabil. Aceasta este o listă de directoare pe care linia de comandă o caută pentru a găsi comenzile pe care doriți să le executați. NU suprascrieți acest lucru în mod concurent; doar adauga ;% ANT_HOME% \ bin până la sfârșitul acesteia. Nu ratați acest punct și virgulă; asta separă căile din listă. S-ar putea să puteți ghici că % ANT_HOME% biți menționează variabila pe care am făcut-o mai devreme.Acum, aveți Ant instalat pe Windows! Mai este un pas important, totuși; astfel încât sări peste piesa Mac și continuați să urmați.
Ai deja instalat furnica pe Mac; puteți vedea acest lucru executând comanda care furnică pe terminal. Acest lucru va scoate ceva de-a lungul liniilor / Usr / bin / ant, ca calea către executabilul Ant pe care îl folosiți. Cu toate acestea, dacă te duci de fapt la acel dosar, vei descoperi că este doar o simbolică a lucrurilor reale.
După cum puteți vedea, pentru mine este legată /usr/share/java/ant-1.8.1/bin/ant. Acum, ați putea folosi acest lucru, dar când am încercat, nu am reușit să folosesc componenta FTP. Mai degrabă decât să instalez Ant în altă parte și să munciți cu simbolink, am ales să fac acest lucru: mișcați ceea ce a fost în usr / share / java / Ant-1.8.1 folder într-un subfolder numit _vechi și mutați lucrurile noi. Va trebui să mutați cos, lib, și etc dosare, plus fetch.xml și get-m2.xml fișiere. Acum, acel simbolink va indica versiunea actualizată a ant. Dacă alergi ant -versiune în terminal, ar trebui să vezi că ai versiunea 1.8.2 (sau orice versiune este cea mai recentă în momentul în care citești asta).
Mai este un pas pentru a termina instalarea. Există mai multe componente opționale care nu vin cu Ant, dar că vom avea nevoie de proiectul nostru și că poate doriți să folosiți drumul. Să le luăm acum.
Veți începe prin deschiderea unei linii de comandă sau a unui terminal și trecerea la directorul pe care tocmai l-ați instalat. Mai important, este directorul pe care l-ați pus fetch.xml fișier. Acum, executați această comandă:
ant -f fetch.xml -Ddest = sistem
Aceasta va descărca și instala câteva componente opționale; aceasta nu este una dintre comenzile intermitente și peste: ar putea dura câteva minute.
Acum, aveți Ant instalat și gata de alergare; sa trecem la treaba.
build.xml FişierAnt utilizează un fișier XML pentru a stoca sarcinile pentru proiectul curent.
Ant folosește un fișier XML pentru a stoca sarcinile pentru proiectul curent; când sunteți în directorul proiectului din linia de comandă, veți putea rula comanda și TASK_NAME_HERE, și va găsi sarcina corespunzătoare în fișierul XML și o va executa.
Dacă nu sunteți familiarizat cu XML, nu vă faceți griji. XML reprezintă limbajul eXtensible Markup Language și este foarte asemănător cu HTML. Utilizează etichete și atribute pentru a defini datele. De fapt, este mai asemănătoare cu XHTML (RIP), prin faptul că regulile sunt stricte: toate etichetele și atributele trebuie să fie mici, valorile sunt cotate, un doctype necesar, etc. Nu vă faceți griji, totuși, aceasta.
Fișierul XML pe care Ant îl caută în mod implicit ar trebui să fie numit build.xml; veți dori să o puneți în dosarul proiectului.
Deci, ce se întâmplă exact în fișierul XML? Iată un început:
Arată ca HTML, nu? Prima linie este o doctype XML. Apoi, avem nodul rădăcină, care este a proiect. Am adăugat două atribute: a Nume, care explică doar ceea ce va face lista noastră de sarcini; și a Mod implicit, care definește sarcina implicită pentru a rula.
Vedeți cum funcționează ideea de sarcină implicită. Să presupunem că am creat o sarcină numită Sun-o pe mama. Am putea rula asta de la terminal făcând acest lucru:
și call_mom
Dacă descoperiți că, de cele mai multe ori, când executați Ant pe un proiect, sunați la aceeași sarcină, veți dori să o faceți implicit. În cazul nostru, am stabilit inițializa ca sarcină implicită, cea care se va executa dacă nu spunem că furnica să ruleze ceva.
și inițializează ant
Acestea sunt ambele.
Acum că avem pe noi build.xml fișier, să creăm prima noastră sarcină.
Sunt solicitate sarcini obiective în cadrul build.xml fişier. Verificați acest lucru:
buna mama!
Conectați-l la dvs. build.xml fișier și rulați și call_mom pe consola. Ar trebui să ieșiți care arată cam așa:
Buildfile: /path/to/your/build.xml call_mom: [echo] Max mamă! BUILD SUCCESSFUL Timp total: 0 secunde
În rezultatele sale, Ant va avea o intrare pentru toate sarcinile care se execută. Apoi, orice ieșire din acele sarcini va fi afișată sub tabelul corespunzător. După cum puteți vedea, am sunat ecou sarcină, care imprimă tot ceea ce punem în ea.
Dar cum am știut că ecoul a fost o sarcină? Ei bine, puteți obține o listă a sarcinilor încorporate aici în documentație. Acesta este un moment bun pentru a sublinia că multe sarcini au mai multe moduri în care pot fi numite. De exemplu, am fi putut face și noi:
Acum, când începeți să vă încălziți ideile lui Ant, să vorbim despre proprietăți.
Ant are proprietăți care sunt foarte asemănătoare variabilelor într-un limbaj de programare.
Pe măsură ce îl folosiți mai mult pe Ant, s-ar putea să știți că aveți o boilerplate build.xml fișier pe care îl modificați doar puțin. Una dintre aceste modificări ar putea fi numele fișierelor / dosarelor. Ant are proprietăți care sunt foarte asemănătoare variabilelor într-un limbaj de programare. Puteți să le creați în acest fel (acest lucru se face într-o sarcină).
stylesheets
De asemenea, puteți muta toate aceste proprietăți într-un fișier separat și puteți importa fișierul. Asta vom face aici. Aceasta ne duce la crearea primei noastre sarcini (reale):
Proprietăți importate
Ne-am chemat sarcina get_properties. Aceasta implică două acțiuni: în primul rând, folosim proprietate sarcina de a importa fișierul (putem face acest lucru cu fişier atribut). Apoi, sună un mesaj care spune că a avut succes. Este atat de simplu.
Desigur, va trebui să creăm ant.properties fişier. Acest lucru este foarte simplu; iată-l pe cel pe care îl vom folosi azi:
css_dir = css js_dir = js activ_dir = active
S-ar putea să credeți că acest fapt face mai greu, deoarece numele variabilelor noastre sunt mai lungi decât valorile în sine. Asta e adevărat, dar ne dă o anumită flexibilitate în folosirea noastră build.xml fișier, îl face mai reutilizabil și mai ușor de împărțit.
Bine, hai să ne grăbim. În mod evident, avem mai multe sarcini de creat înainte de a ne ajuta build.xml fişier.
Iată o listă a sarcinilor pe care trebuie să le creăm:
Vom folosi câteva tactici diferite pentru a face toate acestea, pentru a da o imagine de ansamblu asupra modului în care funcționează Ant.
Să începem cu sarcinile de compilare; acestea iau un set de fișiere și le conectează pe toate într-un fișier. Ant are o sarcină încorporată numită concat care face asta.
Am numit această sarcină concat_css. Înăuntru, conducem doar concat sarcină. După cum puteți vedea, fișierul va fi concatenat în (destfile, sau fișierul de destinație) active / style.css. Veți observa că folosesc assets_dir proprietăți, care vor înlocui valoarea corectă. Trebuie să înfășurați utilizările proprietăților în notația dollar-sign-and-braces.
În interiorul concat sarcină, definim a filelist Aceasta este doar una din modalitățile prin care putem lua o grămadă de fișiere. Îl folosesc aici pentru că îmi permite să defini ordinea în care as fi concatenate aceste fișiere. Îi dau un id, care ne oferă acces la fișierul setat în același mod în care am folosi un parametru (deși nu vom face asta). De asemenea, are atributul dir, care spune task-ului care folder pentru a găsi fișiere inch Apoi, în interiorul, doar definiți corespunzătoare fişier noduri, cu lor Nume atribut care deține numele fișierului.
Este prima ta sarcină reală! Sperăm că are sens. În timp ce suntem la el, JavaScript nu este prea diferit:
Compresia devine puțin mai complicată, deoarece nu este integrată în Ant. Cu toate acestea, Ant suportă sarcini exterioare prin intermediul fișierelor java .jar. Acest lucru este incredibil de util pentru noi, deoarece Compresorul YUI este disponibil ca fișier .jar (acesta este singurul mod în care acesta este disponibil). Puteți să o descărcați pe pagina de descărcare Biblioteca YUI. Veți dori să o salvați într-o locație inteligentă și poate să o redenumiți. Am salvat-o MY_USER_FOLDER / bin / yui.jar. Fă ce ți-e plăcut.
Compresorul YUI va comprima atât JavaScript, cât și CSS. Ce putem face aici este să creați unul comprima și apoi să-l numiți din două sarcini specifice. Putem face acest lucru deoarece Ant are suport pentru a apela alte sarcini și a trece în parametri. Să vedem cum funcționează acest lucru:
$ Fișier
Folosim java comanda aici. Acest lucru este foarte similar cu rularea fișierului jar din linia de comandă. borcan atribuie puncte la fișierul jar. În cazul în care furculiţă atributul este adevărat, borcanul va fi rulat într-o mașină virtuală Java separată de cea pe care rulează Ant. Apoi, în interiorul java nod, definim argumentele. Pe linia de comandă, trecem input.file -o output.file. Deci, facem același lucru aici.
Dar, unde este? fişier proprietate provenind de la? De aici:
Aceasta este sarcina noastră de comprimare CSS. În primul rând, observați că ţintă nod are un al doilea atribut: depinde. Probabil că puteți presupune că acest lucru înseamnă că compress_css sarcinile depind de concat_css sarcină, deci trebuie să fie rulat primul. În acest fel, putem apela compress_css și va suna automat concat_css primul.
Ce se întâmplă înăuntru? Executăm un antcall sarcină, care pur și simplu numește o altă sarcină în cadrul nostru build.xml dosar - în acest caz, asta e al nostru comprima sarcină. Înăuntru, putem crea cât mai mulți parametri de care avem nevoie, fiecare având un nume și o valoare. Da, aceasta înseamnă foarte mult o chemare la o funcție. Acesta este fişier parametru pe care îl folosim în cadrul nostru comprima sarcină.
Iată versiunea JavaScript:
Nu uita, de asta depinde concat_js.
Reveniți la partea de sus a rădăcinii noastre proiect nod - am setat Mod implicit sarcina ca inițializa. Nu am creat încă acea sarcină, deci hai să o facem acum.
Terminat!
Această sarcină depinde de alte două sarcini (dintre care una nu am creat încă); noi doar folosim o listă separată prin virgulă pentru a cere mai multe sarcini.
În interiorul nostru, prima sarcină este crearea directorului nostru de active, cu mkdir (ca și pe linia de comandă). Apoi, facem două antcalls, una pentru a comprima CSS și una pentru a comprima JavaScript. Amintiți-vă că aceste două sarcini depind de funcțiile de concatenare respective, astfel încât acestea le vor numi. În cele din urmă, vom ecou un mesaj care permite utilizatorului să știe că am terminat.
Ce zici de asta a curăța sarcina asta inițializa depinde de? Este destul de simplu:
Sterge doar directorul de materiale. Acest lucru nu este absolut necesar, dar s-ar putea să-l găsiți util.
Să facem încă o sarcină; dorim să încărcăm proiectul nostru pe un server. Mulțumită ftp comanda, este un cinch.
Chemăm această sarcină încărca fișiere, și depinde de asta inițializa. Folosim sarcina FTP aici. După cum puteți vedea, toate informațiile importante sunt stocate în atribute. Dacă ați lucrat cu clienți FTP înainte, toate aceste opțiuni ar trebui să fie familiare.
ftp nod, am creat o colecție de fișiere pe care dorim să le încărcăm. În acest caz, folosim a mapei element. dir atribut pe filset nod care definește directorul rădăcină pentru ceea ce vrem să colectăm.include nod pentru a obține fișiere specifice: pur și simplu trecem ca atributul name fișierul (e) pe care dorim să-l primim. În exemplul nostru, primim totul directorul de materiale și conținutul acestuia și fișierul index.html.Odată ce ați completat informațiile despre server în această sarcină, ar trebui să încărcați aceste fișiere pentru dvs.!
Observați cum am aranjat aceste sarcini. Dacă fugim furnică pe linia de comandă, concatenăm și comprimăm CSS și JavaScript, dar nu o vom încărca; acest lucru nu este implicit. Dacă vrem să îl încărcăm, putem rula ant upload_files; deoarece depinde de asta inițializa, nu trebuie să sunăm inițializa primul. Desigur, putem numi orice sarcină individuală pe care o dorim (de exemplu: și compress_js).
Înainte de a închide, există câteva șanse și sfaturi pe care aș vrea să le menționez:
depinde sarcina de a sarcinilor lant margine împreună. Ați putea face acest lucru, dar am ales să păstrez asta pentru sarcinile dependente și să creez inițializa sarcina de a apela pe ceilalți. Acest lucru pare mai corect din punct de vedere semantic.ecou sarcină). Modelele pe care le-am folosit nu sunt niciodată "calea cea dreaptă". De asemenea, Ant Wiki este o resursă excelentă.Și asta e o înfășurare! Sper că ați învățat câteva tehnici noi care vă vor economisi timp în viitor. Dacă aveți întrebări, nu ezitați să le postați mai jos! Vă mulțumesc foarte mult pentru lectură!
