Share
Alle Anwendungen scheinen eine Build-Versionsnummer zu haben, nicht wahr? Überall, wo Sie nach Ratschlägen zum Verwalten eines großen Softwareprojekts suchen, werden Sie feststellen, dass ein automatisierter Build-Prozess praktisch eine Anforderung ist. Ich habe es für unerlässlich gefunden, einen Build-Prozess zu automatisieren, der die für eine bestimmte Seite benötigten Dateien verkettet und minimiert. In diesem Tutorial wird das Ant-Build-Tool entmystifiziert und Sie erfahren, wie Sie eigene, flexible Build-Dateien für eine JavaScript-Bibliothek erstellen.
Für dieses Tutorial benötigen Sie NetBeans mit installiertem Ant. Ich benutze oft:
Das Ant-Tool in der PHP-Version ist eine etwas eingeschränkte Version, ist jedoch ideal für unsere Zwecke, da die PHP-Projekte mit einer automatisch generierten Build-Datei nicht kompliziert sind. Für dieses Tutorial werde ich die PHP-Version demonstrieren. Ant ist natürlich bei Apache erhältlich und wird häufig in IDEs wie Eclipse verwendet. Für die .Net C # -Community gibt es ein Werkzeug namens Nant, das ich in meinen .NET-Projekten verwende - es ist ziemlich ähnlich.
Bei meinem ersten ernsthaften Versuch, eine einseitige Ajax-Anwendung zu erstellen, erhielt ich eine Liste mit fast 40 Skript-Tags, die eine Startzeit von über einer Minute verursachten. Um das Projekt verwaltbar zu machen, musste ich den Code in mehreren Modulen enthalten, von allen benötigten YUI-Modulen ganz zu schweigen. Nachdem ich die Blogs des YUI-Teams gelesen hatte, wurde mir klar, wie wichtig es für die Leistung ist, die Anzahl der Skript-Tags auf eine möglichst geringe Anzahl zu reduzieren. Daher mein Interesse, JavaScript-Dateien zu verketten und zu minimieren.
Durch die Kombination mehrerer Dateien werden die zusätzlichen Bytes von HTTP-Headern sowie die mögliche Übertragungslatenz durch langsame TCP-Starts, Paketverluste usw. Reduziert.
YUI-Blog: Leistungsforschung, Teil 6
Lajos Moczars hervorragender Tomcat 5 Unleashed hatte einen großen Einfluss auf meine Einstellung zur Entwicklung einer kompletten webbasierten Anwendung. Es ist viel mehr als ein Buch über Tomcat. Es gab mir die Motivation, Anleitung und den Mut, Ant zu nutzen, um meine JSP-Projekte aufzubauen. Ant ist in NetBeans, meine Lieblings-IDE für JSP, integriert. Ich habe mich daran gewöhnt, die automatisch generierte Build-Datei zu verwenden, ohne dass manuelles Editieren erforderlich wäre, wenn ein Java-Klassenpaket erstellt wurde. Als mein Verständnis von JavaScript jedoch wuchs, stellte ich fest, dass ich einen Build-Prozess benötigte und meine Build-Konfigurationsdateien nur für den JavaScript-Teil des Projekts manuell schreiben musste. Die build.xml von Moczar für eine Tomcat-Anwendung bot mir einen hervorragenden Ausgangspunkt.
Eine gute Entwicklungsumgebung zu haben ist absolut kritisch zum Erfolg Ihrer Entwicklungsbemühungen. Sie benötigen eine strukturierte Umgebung, in der Sie Ihre Buildprozesse effizient und wiederholbar ausführen können.
- Lajos Moczar, Tomcat 5 entfesselt
Anmerkung des Herausgebers: Wenn Sie sich gegen Ant entscheiden, ist Grunt ein fantastisches Build-Tool für Ihre JavaScript-Anwendungen. Erfahren Sie hier mehr über Nettuts+.
Öffnen Sie ein neues Projekt in NetBeans. Ich habe meine NetTutsBuildJs aufgerufen und hier in meinem Nettuts + -Ordner erstellt: C: \ NetTuts \ BuildJs. Natürlich muss JavaScript nicht in eine exe Datei; Wir haben unterschiedliche Anliegen. Es gibt mindestens drei Dinge, die wir für ein großes JavaScript-Projekt benötigen:
Wie Sie auf dem Screenshot sehen können, habe ich einen Ordner erstellt js für mein JavaScript und fügte dann die Ordner hinzu, src, concat und Mindest.
Ich bin etwas gelangweilt, wenn ich zu Beginn jedes neuen IT-Tutorials "Hello World" sage, nicht wahr? Ich dachte, es wäre schön, diesmal die Welt zu ignorieren. Es könnte ja nur eine Einbildung meiner Fantasie sein!
Ich bin ein Solipsist. Warum gibt es nicht mehr von uns??
Accentsconagua
build.xml. Möglicherweise bemerken Sie jetzt noch nichts, aber wenn Sie die IDE neu starten, werden Sie das sehen build.xml hat nun ein spezielles Symbol mit einem gelben Dreieck, das mit Ant-Dateien verknüpft ist. Wenn Sie es auswählen, wird im Navigatorfenster jetzt Ant-Ziele in der Kopfzeile angezeigt.
Jeder Satz von Aufgaben in einer Ant-Build-Datei wird als Ziel bezeichnet. Daher müssen Sie ein einfaches Nachrichtenziel erstellen
verschachtelt im Projekt-Tag wie folgt:
Nun erweitern Sie die build.xml Datei im Projektfenster und das neue Ziel wird im Navigatorfenster angezeigt. Klicken Sie mit der rechten Maustaste auf ignore-world-message und Sie sollten die Nachricht im Ausgabe-Bedienfeld wie folgt sehen:
Recht. Die Welt existiert vielleicht nicht und wir haben sie ignoriert, aber zumindest scheint Ant zu funktionieren! Spaß beiseite, jetzt müssen wir das Wichtigste in Ant richtig machen: Wege.
Ich bin zwar ein bisschen langsam, aber ich hatte immer Probleme damit, also lassen Sie uns vorsichtig gehen. Fügen Sie am Anfang der Datei eine Eigenschaft direkt unter dem Projekttag hinzu. Rufen Sie die Eigenschaft an Wurzel und legen Sie den Speicherort auf eine Zeichenfolge der Länge Null.
Fügen Sie ein neues Ziel hinzu, um diesen Standort anzuzeigen, damit wir sicherstellen können, dass unsere Wege klar sind. Beachten Sie die gewundene Syntax, um auf die Root-Eigenschaft zu verweisen. Sie müssen den Namen der Eigenschaft in Anführungszeichen einschließen, zusätzlich müssen Sie ihn mit einem Dollarzeichen und einer geschweiften Klammer auf der linken Seite einwickeln und dann mit einer geschweiften Klammer auf der rechten Seite schließen. Was für ein Trubel!
Man könnte das nach dem Ignorierweltziel setzen. Nun, wenn Sie mit der rechten Maustaste auf das Symbol klicken show-root-path Ziel, um das Kontextmenü anzuzeigen, und klicken Sie dann auf "Ziel ausführen". Sie sollten den korrekten Pfad zum Stamm Ihres Projekts sehen. In meinem Fall: C: \ NetTuts \ BuildJs.
Schön. Wir haben unsere Umgebung und einen Stammpfad, der auf die richtige Position auf unserer Festplatte verweist. Jetzt können wir die anderen Pfade hinzufügen.
Endlich ein bisschen Arbeit. Wir fügen ein neues Ziel hinzu, das ein enthält concat Tag wie folgt:
Dies ist nur ein triviales Beispiel, aber aus Gründen der Schnelligkeit, damit Sie mitverfolgen können, habe ich zwei einfache JavaScript-Dateien erstellt: tree_data.js und Baum.js, welche von den YUI-Dateien abhängen, yahoo-dom-event.js und treeview-min.js. tree_data.js hat folgende eher sinnlose Inhalte:
var treeData = ["label": "Britain", "children": ["London", "Edinburgh"], "label": "France", "children": ["Paris", "Lyon"] , "label": "Japan", "children": ["Tokyo", "Kyoto"], "label": "Thailand", "children": ["Bangkok", "Pattaya"]]
Und Baum.js macht einfach ein Baumsicht mit diesen Daten.
YAHOO.util.Event.onDOMReady (function () var tree = new YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Beachten Sie, dass das Dateilistentag genau das ist, was wir hier brauchen. In JavaScript ist die Reihenfolge von Bedeutung, daher möchten wir wahrscheinlich zuerst die Daten und dann die Renderdatei. Wenn wir ein Tag verwenden, das auf der natürlichen Reihenfolge der Dateien im Betriebssystem basiert, werden diese möglicherweise in der falschen Reihenfolge angezeigt. Also tippen wir mühsam die Liste manuell in ein Dateiliste tag, um die gewünschte Reihenfolge sicherzustellen.
Für Sie JavaScript-Puristen da draußen: Ich kenne meine
treeDataVariable ist eine globale Variable und ich sollte es anders machen. Dies ist nur ein kurzes Beispiel, um die Verwendung von Ant zu erläutern. Ich bin ziemlich sicher, dass die Leute, die das Tutorial befolgen, auch die aktuellen Best Practices für ihre JavaScript-Bibliothek einhalten.
Führen Sie jetzt die concat Ziel. Und siehe da, eine Datei heißt baumkonz.js erscheint magisch in der concat Verzeichnis, und wenn Sie es öffnen, sehen Sie die oben definierten Daten und unten die Rendering-Funktion.
Um dies auszuprobieren, habe ich zwei einfache HTML-Dateien erstellt: tree_src.html und tree_concat.html. In der Kopfzeile haben beide die gleichen Links zu den CSS-Dateien, die zum Erstellen der Sam-Skin für eine TreeView erforderlich sind.
Kurz vor dem Ende des Körpers in tree_src.html, Ich habe hinzugefügt
So testen Sie die verkettete Datei. Ich habe das geändert Skript Tags in tree_concat.html zu:
Unsere Baumbibliothek scheint zu funktionieren, und wenn wir die Dateien verketten, scheinen wir die richtige Reihenfolge gefunden zu haben. Ausgezeichnet! Jetzt ist es endlich Zeit, alles zu minimieren und die Anzahl zu reduzieren Skript Tags bis zu einem. Das ist etwas komplizierter.
Beachten Sie den Eigenschaftskompressor. Damit das alles funktioniert, kopierte ich die YUI-Kompressor-JAR-Datei in die yui_compressor Ordner in meinem Projekt und erstellt eine Eigenschaft in der Build-Datei:
Wenn wir das laufen lassen Mindest Ziel sollten Sie nun diese Ausgabe und eine neue Datei mit dem Namen Baum-min.js in dem Mindest Mappe. Wenn Sie es öffnen, sehen Sie einen langen, kontinuierlichen JavaScript-Stream ohne Leerzeichen in einer Zeile.
Es ist nur noch ein weiteres Ziel erforderlich: Verketten Sie die beiden YUI-Dateien mit unserer neuen minimierten Datei.
In der Testdatei, tree_min.html, Ich brauche jetzt nur noch einen Skript Etikett:
Der letzte Schritt ist das Hinzufügen eines Ziels, das alle erforderlichen Ziele aufruft und in der richtigen Reihenfolge ausführt. Die Konvention ist, dieses Ziel zu nennen, bauen. Es ist auch nützlich, eine zu haben sauber Ziel, das zu löschen concat und Mindest Verzeichnisse und ein drin Ziel, um diese Verzeichnisse einzurichten.
Das Build-Ziel sollte jetzt ausgeführt werden:
Alle kombinieren Sie einfach, indem Sie sie einfach zu den Abhängen-Attributen hinzufügen.
Wir haben die Schritte durchlaufen, die zum Erstellen einer Konfigurationsdatei für Ant erforderlich sind, um eine JavaScript-Bibliothek zu erstellen.
In diesem Lernprogramm haben wir die Schritte beschrieben, die zum Erstellen einer Konfigurationsdatei für Ant zum Erstellen einer JavaScript-Bibliothek erforderlich sind. Ausgehend vom Quellcode haben wir alle Dateien in der Bibliothek in einer Datei verkettet, um sicherzustellen, dass jede der Quelldateien in der richtigen Reihenfolge hinzugefügt wird. Wir haben die resultierende verkettete Datei getestet, um sicherzustellen, dass nichts fehlt oder nicht korrekt ist. Wir haben diese Datei dann minimiert und mit den YUI-Dateien verkettet, von denen sie abhängig war.
Das Endergebnis war, dass wir eine Webseite mit nur einer hatten Skript Tag, der alles komplexe JavaScript enthält, das zum Ausführen der Seite erforderlich ist. Ich denke, Sie können sehen, wie einfach es wäre, dieses Beispiel an eine sehr große komplexe JavaScript-Bibliothek anzupassen. Mit diesem grundlegenden Beispiel als Ausgangspunkt sollten Sie in der Lage sein, die Ant-Dokumentation zu erkunden und eine voll funktionsfähige Build-Datei zu entwickeln, um jeden Teil Ihres Build-Prozesses zu automatisieren.
Ich verwende auch Ant for SQL, um den lokalen Klon meiner Datenbank zu erstellen.
Außerdem verwende ich diese Art von Build auch für CSS-Dateien. Sie können fast so verworren sein wie die JavaScript-Dateien und es hilft wirklich, sie auch zu verketten und zu minimieren. Ich verwende auch Ant for SQL, um den lokalen Klon meiner Datenbank zu erstellen. Ich finde, wenn ich mit einem Projekt von vorne anfangen möchte, den gesamten experimentellen Code bereinigen und von vorne anfangen möchte, ist es wirklich nützlich, eine schöne neue Datenbank mitzubringen. Mit dem Ant-Tool können Sie die Tabellen, Funktionen und Prozeduren schnell erstellen und anschließend mit einigen Beispieldaten füllen.
