Share
Toepassingen lijken allemaal een buildversienummer te hebben, nietwaar? Waar u ook advies zoekt over het beheer van een groot softwareproject, u zult merken dat een geautomatiseerd bouwproces vrijwel een vereiste is. Ik vond het essentieel om een bouwproces te automatiseren dat de bestanden die nodig zijn voor een bepaalde pagina samenvoegt en verkleint. Deze tutorial onthult de Ant-build-tool en laat je zien hoe je je eigen, flexibele, build-bestanden voor een JavaScript-bibliotheek kunt maken.
Voor deze zelfstudie hebt u NetBeans nodig met Ant geïnstalleerd. Ik gebruik vaak:
De Ant-tool in de PHP-versie is een enigszins beperkte versie, maar is ideaal voor onze doeleinden, omdat de PHP-projecten niet gecompliceerd zijn met een automatisch gegenereerd buildbestand. Dus voor deze tutorial zal ik demonstreren met de PHP-versie. Echter, Ant is natuurlijk verkrijgbaar bij Apache en wordt veel gebruikt in IDE's, zoals Eclipse. Voor de .Net C # -gemeenschap is er een tool genaamd Nant, die ik gebruik in mijn .NET-projecten - het is vrij gelijkaardig.
In mijn eerste serieuze poging om een Ajax-applicatie van één pagina te maken, kreeg ik een lijst met bijna 40 scripttags die een opstarttijd van meer dan een minuut opleverden. Om het project beheersbaar te maken, moest ik de code in meerdere modules bevatten, om nog maar te zwijgen van alle benodigde YUI-modules. Na het lezen van blogs geschreven door het YUI-team, besefte ik hoe belangrijk het voor de prestaties is om het aantal script-tags terug te brengen tot een zo klein mogelijk aantal. Vandaar mijn interesse in het samenvoegen en verkleinen van JavaScript-bestanden.
Het combineren van meerdere bestanden vermindert de extra bytes van HTTP-headers evenals mogelijke overdrachtslatentie veroorzaakt door trage TCP-starts, pakketverliezen, enz..
YUI Blog: prestatieonderzoek, deel 6
De uitstekende Tomcat 5 Unleashed van Lajos Moczar had een enorme invloed op mijn houding tegenover het ontwikkelen van een complete webgebaseerde applicatie. Het is veel meer dan een boek over Tomcat. Het gaf me de motivatie, begeleiding en moed om Ant te gaan gebruiken om mijn JSP-projecten te bouwen. Ant is ingebouwd in NetBeans, mijn favoriete IDE voor JSP, en ik raakte gewend aan het gebruik van het automatisch gegenereerde build-bestand met weinig behoefte aan handmatige bewerking bij het samenstellen van een Java-klassenpakket. Toen mijn kennis van JavaScript groeide, merkte ik echter dat ik een build-proces nodig had en moest ik mijn eigen build-configuratiebestanden handmatig alleen voor het JavaScript-deel van het project schrijven. De build.xml van Moczar voor een Tomcat-applicatie gaf me een goed startpunt.
Het hebben van een goede ontwikkelomgeving is absoluut kritisch aan het succes van uw ontwikkelingsinspanningen. U hebt een gestructureerde omgeving nodig waarmee u uw bouwprocessen op een efficiënte en herhaalbare manier kunt uitvoeren.
- Lajos Moczar, Tomcat 5 Unleashed
Opmerking van de uitgever: Als u besluit Ant niet te gebruiken, is Grunt een fantastische build-tool voor uw JavaScript-toepassingen. Lees hier meer over Nettuts+.
Open een nieuw project in NetBeans. Ik heb de NetTutsBuildJs gebeld en deze hier in mijn Nettuts + -map gemaakt: C: \ NetTuts \ BuildJs. Uiteraard hoeft JavaScript niet te worden gecompileerd in een exe het dossier; we hebben verschillende zorgen. Er zijn ten minste drie dingen die we nodig hebben voor een groot JavaScript-project:
Zoals je kunt zien in de schermafbeelding, heb ik een map gemaakt met de naam js voor mijn JavaScript en vervolgens de mappen toegevoegd, src, concat en min.
Ik ben een beetje verveeld met het zeggen van "Hello World" aan het begin van elke nieuwe IT-tutorial, is het niet? Dus ik dacht dat het leuk zou zijn om de wereld deze keer te negeren. Het is tenslotte slechts een verzinsel van mijn verbeelding!
Ik ben een solipsist. Waarom zijn we niet meer?
Accentsconagua
build.xml. U merkt nu misschien niets meer, maar als u de IDE opnieuw start, ziet u dat build.xml heeft nu een speciaal pictogram met een gele driehoek geassocieerd met Ant-bestanden. Als u het selecteert, ziet u dat het navigatorpaneel Ant-doelen in de koptekst weergeeft.
Elke set taken in een Ant-buildbestand wordt een doel genoemd, dus we moeten een eenvoudig berichtdoel maken
genest in de projecttag, zoals deze:
Breid nu het build.xml bestand in het deelvenster Project en ziet u het nieuwe doel in het deelvenster Navigator. Klik met de rechtermuisknop op ignore-world-bericht en u zou het bericht in het deelvenster Uitvoer als volgt moeten zien:
Rechts. De wereld bestaat misschien niet en we hebben het genegeerd, maar op zijn minst lijkt Ant te werken! Grapje uit elkaar, we moeten nu het meest cruciale ding in Ant rechts krijgen: paden.
Ik ben misschien een beetje traag, maar ik heb hier altijd problemen mee gehad, dus laten we voorzichtig zijn. Voeg een eigenschap toe aan de bovenkant van het bestand, net onder de projecttag. Bel de accommodatie wortel en stel de locatie in op een tekenreeks met een lengte van nul.
Voeg een nieuw doel toe om deze locatie weer te geven, zodat we ervoor kunnen zorgen dat we onze paden recht hebben. Merk de ingewikkelde syntaxis op om naar de worteleigenschap te verwijzen? U moet de eigenschapnaam tussen dubbele aanhalingstekens plaatsen, maar daarnaast moet u deze met een dollarteken en een gekrulde accolade aan de linkerkant omsluiten en vervolgens sluiten met een gekrulde beugel aan de rechterkant. Wat een ophef!
Je zou dat kunnen plaatsen na het doelwit van de negeerwereld. Nu wanneer u met de rechtermuisknop op de toon-root-path doel om het contextmenu weer te geven en klik vervolgens op "Doel uitvoeren", u zou het juiste pad naar de root van uw project moeten zien. In mijn geval: C: \ NetTuts \ BuildJs.
Heerlijk. We hebben onze omgeving en we hebben een root-pad dat naar de juiste locatie op onze harde schijf wijst. Nu kunnen we de andere paden toevoegen.
Eindelijk wat echt werk. We voegen een nieuw doel toe, inclusief een concat tag, zoals deze:
Dit is slechts een triviaal voorbeeld, maar voor de snelheid waarmee u kunt doorgaan, heb ik twee eenvoudige JavaScript-bestanden gemaakt: tree_data.js en tree.js, die afhankelijk zijn van de YUI-bestanden, yahoo-dom-event.js en treeview-min.js. tree_data.js heeft de volgende vrij betekenisloze inhoud:
var treeData = ["label": "Britain", "children": ["London", "Edinburgh"], "label": "France", "children": ["Paris", "Lyon"] , "label": "Japan", "children": ["Tokyo", "Kyoto"], "label": "Thailand", "children": ["Bangkok", "Pattaya"]]
En tree.js maakt gewoon een Boom zicht met die gegevens.
YAHOO.util.Event.onDOMReady (function () var tree = new YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Merk op dat de tag voor filelisten precies is wat we hier nodig hebben. In JavaScript is orde van belang, dus we willen waarschijnlijk eerst de gegevens en vervolgens het renderbestand als tweede. Als we een tag gebruiken die is gebaseerd op de natuurlijke volgorde van de bestanden in het besturingssysteem, krijgen we deze mogelijk in de verkeerde volgorde. We typen de lijst dus moeiteloos handmatig in a filelist tag om de gewenste volgorde te garanderen.
Voor jou JavaScript-puristen die er zijn: ik ken mijn
treeDatavariabele is een globale variabele en ik zou het op een andere manier moeten doen. Dit is slechts een snel voorbeeld om uit te leggen hoe u Ant gebruikt. Ik ben er vrij zeker van dat de mensen die de zelfstudie volgen ook de huidige beste werkwijzen voor hun JavaScript-bibliotheek volgen.
Voer nu het concat doelwit. Lo en zie, een bestand genaamd tree-concat.js verschijnt magisch in de concat map en, wanneer u deze opent, kunt u de gegevens bovenaan en de weergavefunctie onderaan zien.
Om dit uit te proberen, heb ik twee eenvoudige html-bestanden gemaakt: tree_src.html en tree_concat.html. In de header hebben ze allebei dezelfde koppelingen naar de CSS-bestanden die nodig zijn om de Sam-skin voor een TreeView te maken.
Vlak voor het einde van het lichaam in tree_src.html, Ik heb toegevoegd
Om het aaneengeschakelde bestand te testen. Ik heb de script tags in tree_concat.html naar:
Onze boombibliotheek lijkt te werken en als we de bestanden aaneenschakelen lijken we de juiste volgorde te hebben gevonden. Uitstekend! Het is nu eindelijk tijd om alles te verkleinen en het aantal te verminderen script tags tot één. Dit is een beetje ingewikkelder.
Let op de eigenschapcompressor. Om dit alles te laten draaien, heb ik het jar-bestand van de YUI-compressor gekopieerd naar de yui_compressor map in mijn project en creëerde een eigenschap in het buildbestand:
Wanneer we de min doel, je zou nu deze uitvoer en een nieuw bestand moeten zien, genaamd tree-min.js in de min map. Als u deze opent, ziet u een lange ononderbroken JavaScript-stroom zonder witruimte, allemaal op één regel.
Er is slechts één doelwit nodig: koppel de twee YUI-bestanden aan elkaar met ons nieuwe geminimaliseerde bestand.
In het testbestand, tree_min.html, Ik heb er nu maar een nodig script label:
De laatste stap is om een doel toe te voegen dat alle benodigde doelen oproept en in de juiste volgorde uitvoert. De conventie is om dit doelwit te noemen, bouwen. Het is ook handig om een schoon doel om het te verwijderen concat en min mappen en een in het doel om deze mappen in te stellen.
Het builddoel moet nu worden uitgevoerd:
De manier om al deze te combineren is om ze simpelweg toe te voegen aan het depend attribuut, zoals dit.
We hebben de stappen doorlopen die nodig zijn om een configuratiebestand voor Ant te maken om een JavaScript-bibliotheek te bouwen.
In deze zelfstudie hebben we de stappen doorlopen die nodig zijn om een configuratiebestand voor Ant te maken om een JavaScript-bibliotheek te maken. Uitgaande van de broncode hebben we alle bestanden in de bibliotheek samengevoegd in één bestand, zodat elk van de bronbestanden in de juiste volgorde is toegevoegd. We hebben het resulterende samengevoegde bestand getest om er zeker van te zijn dat er niets mis was of misplaatst was. We hebben dat bestand verkleind en samengevoegd met de YUI-bestanden waar het van afhankelijk was.
Het uiteindelijke resultaat was dat we een webpagina hadden met slechts één webpagina script tag, bevat alle complexe JavaScript-code die nodig is om de pagina uit te voeren. Ik denk dat je kunt zien hoe gemakkelijk het zou zijn om dit voorbeeld aan te passen aan een zeer grote complexe JavaScript-bibliotheek. Met dit eenvoudige voorbeeld als uitgangspunt, zou u de Ant-documentatie moeten kunnen verkennen en een volledig werkend buildbestand moeten ontwikkelen om elk onderdeel van uw bouwproces te automatiseren.
Ik gebruik ook Ant voor SQL om de lokale kloon van mijn database te bouwen.
Bovendien gebruik ik dit soort build ook voor CSS-bestanden. Ze kunnen bijna net zo ingewikkeld worden als de JavaScript-bestanden en het helpt ook om ze samen te voegen en te verkleinen. Ik gebruik ook Ant voor SQL om de lokale kloon van mijn database te bouwen. Ik merk dat wanneer ik opnieuw wil beginnen met een project, alle experimentele code wil opruimen en helemaal opnieuw wil beginnen, het erg handig is om een mooie frisse nieuwe database mee te nemen. Met de Ant-tool kun je snel de tabellen, functies en procedures bouwen en het ding vullen met een aantal voorbeeldgegevens.
