Share
Aplicațiile par să aibă un număr de versiune de construcție, nu-i așa? Oriunde ați căuta sfaturi despre gestionarea unui proiect software mare, veți descoperi că un proces automat de construcție este practic o cerință. Am descoperit că este esențial să se automatizeze un proces de construire care să concatenate și să micieze fișierele necesare pentru o anumită pagină. Acest tutorial va demintifica instrumentul de construcție Ant și vă va arăta cum să vă creați propriile fișiere flexibile pentru a crea o bibliotecă JavaScript.
Pentru acest tutorial, veți avea nevoie de NetBeans cu Ant instalat. Adesea folosesc:
Instrumentul Ant în versiunea PHP este o versiune puțin limitată, dar este ideal pentru scopurile noastre, deoarece proiectele PHP nu sunt complicate cu un fișier construit automat. Deci, pentru acest tutorial, voi demonstra cu versiunea PHP. Cu toate acestea, Ant este, desigur, disponibil la Apache și este utilizat pe scară largă în IDE-uri, cum ar fi Eclipse. Pentru comunitatea .Net C #, există un instrument numit Nant, pe care îl folosesc în proiectele mele .NET - este destul de similar.
În prima mea încercare serioasă de a crea o aplicație Ajax de o pagină, am ajuns cu o listă de aproape 40 de etichete de script care au produs un timp de pornire de peste un minut. Pentru a face proiectul ușor de gestionat, trebuia să conțin codul în mai multe module, fără a menționa toate modulele YUI necesare. După ce am citit blogurile scrise de echipa YUI, mi-am dat seama cât de important este ca performanța să reducă numărul de etichete de script la un număr cât mai mic posibil. Prin urmare, interesul meu pentru concatenarea și minierea fișierelor JavaScript.
Combinarea mai multor fișiere reduce bataii suplimentari de la anteturile HTTP, precum și o latență de transfer potențială cauzată de pornirea lentă a TCP, pierderile de pachete etc..
YUI Blog: Cercetare de performanță, Partea 6
Lajos Moczar excelentul Tomcat 5 Unleashed a avut o influență enormă asupra atitudinii mele față de dezvoltarea unei aplicații complete bazate pe web. Este mult mai mult decât o carte despre Tomcat. Mi-a dat motivația, îndrumarea și curajul de a începe să folosesc Ant pentru a-mi construi proiectele JSP. Ant este construit în NetBeans, IDE-ul meu preferat pentru JSP, și m-am obișnuit să folosesc fișierul generat automat generat, cu puțină nevoie de editare manuală atunci când construiesc un pachet Java de clase. Cu toate acestea, pe măsură ce înțelegerea mea despre JavaScript a crescut, am descoperit că aveam nevoie de un proces de construire și am fost obligat să scriu propriile fișiere de configurare manuală doar pentru partea JavaScript a proiectului. Moczar build.xml pentru o aplicație Tomcat mi-a dat un punct de plecare excelent.
Având un mediu de dezvoltare bun este absolut critică la succesul eforturilor dvs. de dezvoltare. Aveți nevoie de un mediu structurat care vă permite să executați procesele de construire într-un mod eficient și repetabil.
- Lajos Moczar, Tomcat 5 Dezlănțuit
Nota editorului: Dacă decideți împotriva folosirii lui Ant, Grunt este un instrument de construire fantastic pentru aplicațiile dvs. JavaScript. Aflați mai multe despre el aici pe Nettuts+.
Deschideți un nou proiect în NetBeans. Am apelat la NetTutsBuildJs și am creat-o în interiorul directorului Nettuts + aici: C: \ NetTuts \ BuildJs. Evident, JavaScript nu trebuie să fie compilat într-un executabil fişier; avem preocupări diferite. Există cel puțin trei lucruri de care avem nevoie pentru un proiect JavaScript mare:
După cum puteți vedea în screenshot, am creat un dosar numit js pentru JavaScript-ul meu, apoi am adăugat dosarele, src, concat și min.
Sunt puțin plictisit de a spune "Hello World" la începutul fiecărui tutorial IT nou, nu-i așa? Așa că am crezut că ar fi frumos să ignorăm lumea de data asta. La urma urmei, ar putea fi doar o fantezie a imaginației mele!
Sunt un solipsist. De ce nu sunt mai mulți dintre noi?
Accentsconagua
build.xml. S-ar putea să nu observați nimic acum, dar dacă reporniți IDE-ul, veți vedea asta build.xml acum are o pictogramă specială cu un triunghi galben asociat cu fișierele Ant. Dacă îl selectați, veți vedea că panoul de navigare afișează acum obiectele Ant în capul său.
Fiecare set de sarcini într-un fișier Ant build este numit o țintă, deci trebuie să creați o țintă simplă a mesajului
imbricate în tag-ul proiectului, după cum urmează:
Acum, extindeți build.xml fișier din panoul Proiect și veți vedea noua destinație din panoul Navigator. Faceți clic dreapta pe mesajul ignore-world-message și ar trebui să vedeți mesajul în panoul Output, după cum urmează:
Dreapta. Lumea ar putea să nu existe și am ignorat-o, dar cel puțin Ant pare să funcționeze! Glumește în afară, acum trebuie să obținem cel mai important lucru în dreptul lui Ant: căi.
S-ar putea să fiu un pic cam lent, dar am avut întotdeauna probleme cu asta, așa că hai să mergem cu atenție. Adăugați o proprietate în partea de sus a fișierului, chiar sub eticheta proiectului. Apelați proprietatea rădăcină și setați locația la un șir cu lungime zero.
Adăugați o nouă destinație pentru a afișa această locație, astfel încât să ne asigurăm că avem căile noastre drepte. Observați sintaxa convinsă că se referă la proprietatea rădăcină? Trebuie să închideți numele proprietății în ghilimele duble, dar, în plus, trebuie să-l înfășurați cu un semn de dolar și o bretonă în partea stângă, apoi închideți-o cu o bretonă în dreapta. Ce agitație!
Ai putea pune asta după ținta ignorată. Acum când faceți clic dreapta pe Arată-rădăcină-cale vizați meniul contextual și apoi faceți clic pe "Run Target", ar trebui să vedeți calea corectă către rădăcina proiectului. În cazul meu: C: \ NetTuts \ BuildJs.
Minunat. Avem mediul înconjurător și avem o cale rădăcină care indică locul potrivit pe hard disk-ul nostru. Acum putem adăuga celelalte căi.
În sfârșit, niște lucruri reale. Adăugăm o nouă țintă, care include o concat etichetă, după cum urmează:
Acesta este doar un exemplu trivial, dar pentru rapiditate, astfel încât să puteți urma, am creat două fișiere JavaScript simple: tree_data.js și tree.js, care depind de fișierele YUI, yahoo-dom-event.js și TreeView-min.js. tree_data.js are următoarele conținuturi destul de lipsite de sens:
var treeData = ["label": "Marea Britanie", "copii": ["London", "Edinburgh"], "label": "France", "copii": ["Paris", "Lyon"] , "label": "Japonia", "copii": ["Tokyo", "Kyoto"]]
Și tree.js redă pur și simplu a TreeView cu aceste date.
YAHOO.util.Event.onDOMReady (funcția () var tree = nou YAHOO.widget.TreeView ("copac", copacData); tree.render ();); Observați că eticheta de fișiere este exact ceea ce avem nevoie aici. În JavaScript, comanda contează, deci probabil că vom dori mai întâi datele și apoi al doilea fișier de randare. Dacă am folosit o etichetă care sa bazat pe ordinea naturală a fișierelor din sistemul de operare, este posibil să le obținem în ordine greșită. Așadar, scriem manual lista în mod manual filelist etichetă pentru a ne asigura ordinea dorită.
Pentru tine purici JavaScript acolo: Știu meu
treeDatavariabila este o variabilă globală și ar trebui să o fac într-un mod diferit. Acesta este doar un exemplu rapid pentru a explica cum să utilizați Ant. Sunt foarte sigur că oamenii care urmăresc tutorialul urmăresc, de asemenea, cele mai bune practici actuale pentru biblioteca lor JavaScript.
Acum rulați concat ţintă. Da și iată, un fișier numit arbori-concat.js apare magic în concat , iar atunci când o deschideți, puteți vedea datele definite în partea de sus și funcția de redare din partea de jos.
Pentru a încerca acest lucru, am creat două fișiere html simple: tree_src.html și tree_concat.html. În antet, ambele au aceleași legături cu fișierele CSS necesare pentru a crea skinul Sam pentru un TreeView.
Chiar înainte de sfârșitul cadavrului tree_src.html, am adăugat
Pentru a testa fișierul concatenat. Am schimbat-o scenariu tag-uri în tree_concat.html la:
Biblioteca noastră de arbori pare să funcționeze și, atunci când concatenăm fișierele, par să fi obținut ordinea corectă. Excelent! Acum este momentul să minimalizăm totul și să reducem numărul de scenariu etichete la unul. Este un pic mai complicat.
Observați compresorul proprietății. Pentru a face acest lucru pentru a rula, am copiat fișierul de compresor YUI compresor la yui_compressor folder în proiectul meu și a creat o proprietate în fișierul de construire:
Când conducem min țintă, ar trebui să vedeți acum această ieșire și un nou fișier numit arbori-min.js în min pliant. Dacă îl deschideți, veți vedea un flux continuu lung de JavaScript fără spațiu alb, toate pe o singură linie.
Există doar o singură țintă necesară: concatenați cele două fișiere YUI cu noul fișier minificat.
În fișierul de test, tree_min.html, Acum am nevoie doar de unul scenariu etichetă:
Ultimul pas este să adăugați o țintă care să apeleze toate țintele necesare și să le execute în ordinea corectă. Convenția este de a numi această țintă, construi. Este, de asemenea, util să aveți a curat țintă pentru a șterge concat și min directoare, și an init țintă pentru a crea aceste directoare.
Obiectivul de construire ar trebui să ruleze acum:
Modul de a combina toate acestea este pur și simplu să le adăugați la atributul depinde, cum ar fi acesta.
Am trecut prin pașii necesari pentru a crea un fișier de configurare pentru Ant pentru a construi o bibliotecă JavaScript.
În acest tutorial, am parcurs pașii necesari pentru a crea un fișier de configurare pentru Ant pentru a construi o bibliotecă JavaScript. Pornind de la codul sursă, am concatenat toate fișierele din bibliotecă într-un singur fișier, asigurându-ne că fiecare dintre fișierele sursă este adăugat în ordinea corectă. Am testat fișierul concatenat rezultat pentru a ne asigura că nimic nu lipsea sau nu a fost localizat. Apoi am minificat acel fișier și l-am concatenat cu fișierele YUI de care depindea.
Rezultatul final a fost că am avut o pagină web cu una singură scenariu , care conține toate JavaScript-urile complexe necesare pentru a rula pagina. Cred că puteți vedea cât de ușor ar fi să adaptați acest exemplu la o foarte mare bibliotecă JavaScript complexă. Cu acest exemplu de bază ca punct de plecare, ar trebui să puteți explora documentația Ant și să dezvoltați un fișier complet de lucru pentru a automatiza fiecare parte a procesului dvs. de construire.
De asemenea, folosesc Ant pentru SQL pentru a construi clona locală a bazei mele de date.
În plus, folosesc acest tip de construire și pentru fișierele CSS. Ele pot deveni aproape la fel de complicate ca fișierele JavaScript și chiar ajută să le concatenăm și să le mintim. De asemenea, folosesc Ant pentru SQL pentru a construi clona locală a bazei mele de date. Găsesc că atunci când vreau să încep din nou cu un proiect, curățând tot codul experimental și pornind de la zero, este foarte util să aduci împreună o nouă bază de date nouă. Instrumentul Ant face ușor să construiască rapid tabelele, funcțiile și procedurile, apoi să populeze lucrurile cu unele date de probă.
