Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ASP.NET

Integrieren eines JS-Buildprozesses in MSBuild in Visual Studio 2012 Express

by
Read Time:26 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Ich arbeite seit ungefähr zehn Jahren mit ASP und ASP.NET, angefangen mit ASP Classic bis hin zu .NET 2.0 als meinem Favoriten. Mein Neujahrsvorsatz in diesem Jahr (2013) war, meine .NET-Arbeit mit Visual Studio 2012 Express auf .NET 4.0 zu aktualisieren und mich wirklich mit MSBuild auseinanderzusetzen, damit ich meine JavaScript-Dateien als Teil des normalen Build-Prozesses verketten und minimieren kann eines .NET-Projekts in Visual Studio.

Meine erste Liebe ist es, Ant in NetBeans mit einer PHP- oder JSP-Plattform für diese Art von Arbeit zu verwenden, aber die Hauptwebsite meines Unternehmens läuft auf einer .NET-Plattform und es ist an der Zeit, sie zu aktualisieren, also beschloss ich, in den sauren Apfel zu beißen und wieder einzutauchen zu einer ernsthaften Studie über die Erstellung eines vollständig integrierten Build-Prozesses mit MSBuild.

In diesem Tutorial erfahren Sie, wie Sie Ihre Visual Studio 2012 Express-Projektdatei bearbeiten, um Ihre eigene separate Build-Datei einzuschließen, die den mittlerweile weit verbreiteten Prozess des Verkettens und Minimierens eines Satzes von JavaScript-Modulen in eine Datei für die Bereitstellung durchführt.


Software Anforderungen

Ich wollte ein nicht triviales Projekt, um diesen Prozess zu demonstrieren, denn ich finde, der Teufel steckt im Detail. Ich habe oft ein zu einfaches Tutorial oder eine Einführung in ein unbekanntes Thema treu befolgt und dann festgestellt, dass mich das Tutorial nicht darauf vorbereitet hat, wenn Sie etwas auch nur etwas Schwieriges tun möchten. In diesem Tutorial werden wir also versuchen, Knockout.js und jQuery UI zu heiraten. Wir werden auch eine JSON-Datei mit einer Datenhierarchie verwenden, um ein Menü zu definieren. Wir verwenden eine Knockout.js-Vorlage mit einer foreach-Bindung, die die JSON-Daten durchläuft, um eine Hierarchie von ul-Elementen auszugeben, die als HTML-Markup für eine mit der jQuery-UI kompatible Menüleiste fungieren.

Leider ist die Menüleiste noch nicht im Bundle mit jQuery UI verfügbar (Versionen 1.9 oder 1.10), daher müssen Sie die Menüleistendateien aus dem Menüleisten-Zweig von jQuery UI herunterladen. Außerdem benötigen Sie den YUI Compressor zum Verkleinern Ihrer JavaScript-Quelldateien. Für dieses Tutorial muss Visual Studio 2012 Express für Web installiert sein. Sie müssen außerdem herunterladen:

Wenn Sie mit JSON nicht vertraut sind, sollten Sie die JSON-Website besuchen.


Warum MSBuild und nicht NAnt?

Wenn Sie mein letztes Tutorial Mit Ant zum Erstellen einer JavaScript-Bibliothek lesen, fragen Sie sich vielleicht, warum es in diesem Tutorial nicht um NAnt geht. Nun, mit meiner glänzenden Neuinstallation von Visual Studio 2012 Express möchte ich versuchen, meine Entwicklung unter einen Hut zu bringen. Meine absolute Lieblings-IDE für die Entwicklung von C#-Assemblys war über viele Jahre SharpDevelop. Sie sind vor einigen Jahren von NAnt zu MSBuild für SharpDevelop Version drei gewechselt. Es ist endlich an der Zeit, dass ich nachziehe.

Wir verwenden NAnt in unserem Build-Prozess nicht mehr, sondern sind komplett auf MSBuild / CruiseControl.NET umgestiegen. Und wir betrachten die Fähigkeit, sich auf das dominante Betriebssystem zu verlassen, nicht als Rückschritt: Es hilft, die Anzahl der beweglichen Teile, die verschiedenen Konfigurationen und die verschiedenen Benutzereinstellungen zu reduzieren.

#D 3.0 - Abbruch des NAnt-Supports: Warum?

Begründung: Warum integriert man den JavaScript-Build in den .NET-Build?

Für meine .NET-Entwicklung habe ich jahrelang mit drei verschiedenen IDEs gleichzeitig gearbeitet:

  1. Sharp Develop für meine C#-Assembly-Entwicklung, aber ich habe auch den JavaScript- und CSS-Verkettungs- und Minify-Build-Prozess mit einer speziell installierten Kopie von NAnt in diese Umgebung integriert.
  2. Visual Studio (2005 usw.) für die Masterseiten, Inhaltsseiten.
  3. Ein externer Editor wie Aptana für die JavaScript-Entwicklung.

Die Verwendung von drei IDEs wie dieser war anstrengend (und überraschend anstrengend für meine CPU und meinen RAM), daher ist ein weiterer Vorsatz für das neue Jahr, alles in Visual Studio zusammenzuführen. Daher muss ich verstehen, wie ich meinen JavaScript-Build-Prozess in den gesamten Projekt-Build integrieren kann.

Einer der Hauptvorteile von MSBuild für mich (auf Windows-Plattformen) ist, dass es als Teil von .NET selbst bereitgestellt wird. Das bedeutet, dass auf jedem Windows-Computer, der mit Windows Update auf dem neuesten Stand ist, MSBuild verfügbar ist.

Vergleich von NAnt und MSBuild auf StackOverflow.

Einrichten Ihrer Umgebung

Öffnen Sie ein neues Projekt in Visual Studio 2012 Express. Ich habe es NetTutsMSBuildJs genannt und es in meinem NetTuts-Ordner hier erstellt: C:\NetTuts\MSBuildJs.

New Project Dialog BoxNew Project Dialog BoxNew Project Dialog Box

Wie Sie im Screenshot sehen können, habe ich eine Reihe von Ordnern wie folgt erstellt:

js_folders
Ordner Inhalt
CSS Produktionsversionen von jQuery-UI-CSS-Dateien. Für dieses Tutorial verwenden wir das Smoothness-Thema.
debug Verschiedene Versionen der Webformularseite Default.aspx für Debugging-Zwecke.
debug-js Drei Ordner: concat, min und src.
js Produktionsversionen von jQuery, jQuery UI und Knockout.
jsbuild Eine XML-Builddatei mit allen für den JavaScript-Build erforderlichen Aufgaben und eine Kopie des YUI-Kompressors.
json Die wichtige JSON-Datei menubar-data.json, die die zum Erstellen der Menüleiste erforderlichen Daten enthält. Auch die JSON-Dateien, die zum Auffüllen der Seite gemäß den Menüoptionen des Benutzers verwendet werden.

Beachten Sie, dass einige der Ordner ausgegraut sind. Dies liegt daran, dass ich sie aus dem Projekt ausgeschlossen habe. Sie können diese Einstellung über das Kontextmenü umschalten:

exclude_from_projectexclude_from_projectexclude_from_project

Es ist einfach, Verzeichnisse während des Buildprozesses zu löschen und zu erstellen, aber es gibt keine Möglichkeit, Elemente programmgesteuert in das Projekt einzuschließen oder auszuschließen. Die Ordner concat und min in debug-js sind wegwerfbar und werden automatisch vom Build-Prozess aus allem generiert, was Sie im src-Ordner erstellt haben, daher ist es angemessen, sie aus dem Projekt auszuschließen. Beachten Sie, dass Sie den debug-Ordner nicht aus dem Projekt ausschließen können, da er .NET-Webformularseiten mit CodeBehind-Dateien enthält. Wenn Sie den Ordner ausschließen, geben die Webformularseiten Fehler aus, die besagen, dass die in den CodeBehind-Dateien definierten Klassen nicht gefunden werden können.

show_all_files

Sie können umschalten, ob diese ausgeschlossenen Objekte angezeigt werden sollen, indem Sie oben im Projektmappen-Explorer auf das Symbol Alle Dateien anzeigen klicken und auf klicken. Ich möchte sie immer sehen können.

Es gibt noch ein weiteres wichtiges Konfigurationselement, das wir für dieses Projekt benötigen. IIS und das integrierte IIS Express enthalten standardmäßig keinen JSON-Mime-Typ, und wir werden JSON-Dateien häufig verwenden, um Inhalte bereitzustellen, daher müssen wir dies der Datei Web.config hinzufügen. Fügen Sie im configuration-Element ein system.webServer-Element wie folgt hinzu:


Das JavaScript-Projekt: Erstellen einer Menüleiste mit JSON, Knockout und jQuery UI

Der Schwerpunkt dieses Tutorials liegt auf der Erstellung eines JavaScript-Projekts in einem .NET-Projekt, aber wir können nicht weitermachen, bis wir etwas zu bauen haben. Lassen Sie mich nun das etwas ehrgeizige Projekt erklären, das ich im Sinn habe.

Hier ist ein UML-Komponentendiagramm, das alle Teile zeigt, die das Projekt benötigt. Bitte beachten Sie, dass dies aus Entwicklersicht ein umfassendes Komponentendiagramm ist, das alle möglichen Wegwerf-Artefakte zeigt, die beispielsweise nur für das Debugging wichtig sind. Es ist kein Komponentendiagramm, das nur die wichtigsten Artefakte enthält, die für das Zielsystem benötigt werden.

Component DiagramComponent DiagramComponent Diagram

Ein Komponentendiagramm definiert die Zusammensetzung von Komponenten und Artefakten im System.IBM: Komponentendiagramme

In UML 2.0 wird "Komponente" verwendet, um eine abstraktere Idee zu beschreiben: autonome, gekapselte Einheiten; "Artefakt" wird verwendet, um zu beschreiben, was ich in diesem Diagramm zeige: Dateien und Bibliotheken. Es ist ein ideales Diagramm, um zu zeigen, wie die verschiedenen Dateien voneinander abhängen. Beispielsweise hängen alle Webformularseiten von der Hauptmasterseite ab. Die Datei js.build funktioniert nicht, wenn die JAR-Datei des Kompressors nicht vorhanden ist. Die Projektdatei und die js.build-Datei sind ärgerlicherweise voneinander abhängig. Wenn die Datei js.build nicht vorhanden ist, wird das Projekt nicht geladen. js.build nicht alleine laufen kann, werden die dort definierten Aufgaben durch das AfterBuild Event im Gesamtprojektbuild ausgelöst.

Für dieses Tutorial möchte ich eine horizontale Menüleiste mit dem Menüleistenzweig der jQuery-Benutzeroberfläche anzeigen. Dazu habe ich eine JSON-Datei mit den hierarchischen Daten für das Menü und ein Knockout.js-Template, das diese Daten in einer Schleife durchläuft, um das von jQuery Menubar benötigte HTML-Markup zu rendern. Ich habe eine Callback-Funktion renderMenu hinzugefügt, die vom afterRender-Ereignis in der Knockout-Vorlage ausgelöst wird. renderMenu ruft dann einfach die menubar auf, um die Menüleiste schließlich mit all den schönen glänzenden Funktionen der jQuery-Benutzeroberfläche zu rendern.


Schritt 1: Die Produktionsfreigabedateien

CSS

Laden Sie das vollständige Bundle von der jQuery-UI herunter, einschließlich eines Themas Ihrer Wahl. Nachdem Sie Ihren Download entpackt haben, gehen Sie zum Ordner mit dem Namen css, in dem Sie einen Ordner mit dem Namen Ihres gewählten Themas finden. In meinem Fall habe ich Glätte gewählt. Öffnen Sie diesen Ordner und Sie sollten die benötigten Dateien sehen:

jquery_ui_cssjquery_ui_cssjquery_ui_css

Kopieren Sie den gesamten Themenordner (Glätte) und fügen Sie ihn in Ihren css-Ordner im Projekt ein. Kehren Sie zu Visual Studio zurück, klicken Sie oben im Projektmappen-Explorer auf das Aktualisierungssymbol, und der Smoothness-Ordner sollte im css-Ordner angezeigt werden. Sie sollten den Ordner auch in das Projekt aufnehmen.

Neben jQuery UI und einem bestimmten Theme benötigen Sie auch die kleine CSS-Datei speziell für die Menüleiste. Nachdem Sie das Menüleistenprojekt von github heruntergeladen haben, führen Sie einen Drilldown zur Datei jquery.ui.menubar.css durch, indem Sie diesem Pfad folgen: \jquery-ui-menubar\themes\base\jquery.ui.menubar.css. Kopieren Sie das in den css-Ordner Ihres Projekts.

JavaScript

Laden Sie aktuelle Versionen der Produktionsversionen von jQuery, jQuery UI und Knockout herunter. Ich verwende 1.8.2 für jQuery, 1.9.2 für jQuery UI und 2.1.0 für Knockout. Kopieren Sie sie in den js-Ordner Ihres Projekts.

Sie benötigen außerdem die neueste, unkomprimierte Version von jquery.ui.menubar.js, die aus dem Menüleiste-Zweig des jQuery-UI-Projekts heruntergeladen wurde. Kopieren Sie diese in den Ordner debug-js\src in Ihrem Projekt.

Die Hauptmasterseite

Wir erstellen mehrere Versionen derselben Seite, um beim Debuggen und Testen unseres JavaScripts zu helfen. Die Masterseite kann natürlich dazu beitragen, Codeduplikate zu vermeiden. Rufen Sie diese Masterseite Main.Master auf.

add_new_master_pageadd_new_master_pageadd_new_master_page

Lassen Sie das Titelelement leer (wir definieren den Titel für jede Seite, die diesen Master verwendet) und verlinken Sie auf alle Stylesheets, die wir für die jQuery-Benutzeroberfläche und die Menüleiste benötigen:

Fügen Sie kurz vor dem Ende des Hauptteils einen ContentPlaceHolder hinzu, in dem jede Seite mit den entsprechenden JavaScript-Dateien verlinkt wird


Schritt 2: Die JSON-Definition der für die Menüleiste benötigten Daten

Hier ist das JSON-Objekt, das eine Menüleiste definiert, die wir für eine Englischlehrer-Website verwenden könnten. Erstellen Sie eine JSON-Datei namens menubar-data.json im Ordner json und füllen Sie sie mit dem folgenden JSON.

Knoten der obersten Ebene haben keine definierte URL-Eigenschaft, sodass beim Anklicken nur Untermenüelemente angezeigt werden. Die Untermenüs enthalten Knoten mit der definierten URL-Eigenschaft. Wenn Sie auf einen dieser Knoten klicken, ruft das System die JSON-Daten aus der Datei unter dieser URL ab.

Jede in der Menüleiste verlinkte JSON-Datei enthält einige Inhalte in einer einfachen Struktur, die eine Kopfzeile und etwas Text definiert:


Schritt 3: Die Knockout-Vorlage für die Menüleiste

Dies definieren wir in Main.Master. Es gibt keine offensichtliche Möglichkeit, es für die Bereitstellung zu verkleinern oder zu verbessern, daher möchte ich es mit jeder Version der Seiten wiederverwenden, die auf die Masterseite verweisen.

Ich wollte nur eine Knockout-Vorlage haben, um das HTML-Markup (ein Satz verschachtelter ul-Elemente) für die Menüleiste zu rendern, aber es überrascht nicht, dass das mit der foreach-Bindung verbundene afterRender-Ereignis bei jeder Schleife ausgelöst wird, nicht am Ende des gesamten Rendering-Prozesses . Also musste ich ein observableArray mit nur einem ul-Element erstellen, dieses an eine Menu-Vorlage binden, die das äußerste ul-Element rendert, und die Menüleistenvorlage darin verschachteln. Ich kann dann dieses einzelne foreach-Ereignis mit meiner Funktion renderMenu behandeln, die den jQuery-Menüleistenkonstruktor aufruft und die Menüleiste in all ihrer Pracht rendert. Ich habe viel Hilfe dazu von diesem Thread bekommen: nested-templates-with-knockoutjs-and-mvc-3-0.

Hier die Menüvorlage:

Und hier ist die Knotenvorlage für jeden Knoten der Menüleiste:

Sie benötigen dann ein div-Element, das Sie an MenuTemplate binden:

Beachten Sie, dass die Knotenvorlage eine containerlose Ablaufsteuerungssyntax verwendet, die auf Kommentar-Tags basiert. Hier passieren ein paar Dinge, also lass es mich erklären

In der vollständig gerenderten jQuery-Menüleiste möchte ich einen Handler an das select-Ereignis anhängen. Der Handler hat das Signatur event, ui. Wenn Sie auf ein Menüleistenelement klicken, wird dem Handler das Ereignisobjekt und ein jQuery-Objekt übergeben, das das Element darstellt. Um den Text aus dem ui-Objekt zu erhalten, können wir die Textmethode aufrufen ( ui.item.text() ). Aber wie erhalten wir die url-Eigenschaft aus dem zugrunde liegenden JSON? Das ist etwas kniffliger und ich erkläre es später, wenn wir uns die select-Funktion ansehen, die durch das Click-Ereignis in jedem Untermenüelement ausgelöst wird, und die benutzerdefinierte Bindung addData, die an das li-Element in der Knockout-Vorlage angehängt ist.

Schließlich brauchen Sie nur noch ein div-Element, in dem wir den aus den JSON-Datendateien abgerufenen Inhalt anzeigen können:


Schritt 4: Erstellen der Webformularseiten, die von der Main.Master-Datei abhängen

Default-src.aspx

Erstellen Sie ein Webformular mithilfe der Masterseite im Debugordner mit dem Namen Default-src.aspx.

add_page_using_master_pageadd_page_using_master_pageadd_page_using_master_page

Dies stellt sich als gnädigerweise kurze Datei heraus. Dies ist einer der großen Vorteile des .NET-Ansatzes für Masterseiten. Es gibt nur zwei ContentPlaceHolder auf der Masterseite. Fügen Sie die Links zu Ihren JavaScript-Dateien wie folgt zum Content-Element hinzu, das mit dem JsScripts-ContentPlaceHolder verknüpft ist:

Erstellen Sie eine neue JavaScript-Datei namens default-src.js im Ordner debug-js\src.

Wir schließen alles in einen Aufruf der üblichen jQuery $-Funktion ein, die sicherstellt, dass die Seite vollständig geladen ist, bevor wir etwas ausführen.

Ab jQuery 1.4 schlägt die Anfrage normalerweise stillschweigend fehl, wenn die JSON-Datei einen Syntaxfehler enthält. Siehe: jQuery.getJSON().

Wir brauchen hier drei Hauptfunktionen:

  1. Ein Aufruf der jQuery getJSON-Methode zum Abrufen der JSON-Daten für die Menüleiste. Wenn das gelingt, erstellen wir ein Knockout-Ansichtsmodell und rufen ko.applyBindings(viewModel) auf, um es zu aktivieren.
  2. Eine renderMenu-Funktion, die vom afterRender-Ereignis des MenuTemplate aufgerufen wird. Diese Funktion ruft den Menüleistenkonstruktor auf, um die menubar zu rendern.
  3. Eine select-Funktion, die aufgerufen wird, wenn der Benutzer auf ein Menüleistenelement klickt. Diese Funktion ruft die JSON-Daten aus der entsprechenden Inhaltsdatei ab und zeigt sie auf der Seite an.

Beachten Sie, dass die Auswahlfunktion in der Lage sein muss, die URL aus den zugrunde liegenden JSON-Daten abzurufen. Dies ist der schwierigste Teil der Verknüpfung der jQuery-Menüleistenfunktion mit der Knockout-Vorlage. Mit jQuery können Sie einem HTML-Element Daten hinzufügen und Daten daraus abrufen. Um Daten aus unserer Knockout-Vorlage hinzuzufügen, müssen wir eine benutzerdefinierte Bindung verwenden, die Zugriff auf das HTML-Element hat, an das sie gebunden ist. Das von mir erstellte Binding heißt addData und wird einfach in gewohnter Knockout-Manier mit einer init-Methode und einer update-Methode an ko.bindingHandlers angehängt.

Vielleicht macht die Node-Vorlage jetzt mehr Sinn. Das im select-Handler als ui übergebene jQuery-Objekt stellt das oberste li-Element jedes Menüleistenelements dar. Daher fügen wir die benutzerdefinierte Bindung zu diesem Listenelementelement hinzu: data-bind="addData: $data.url". Da nun an jedes Element einige Daten angehängt sind, können wir es mit der folgenden Syntax vom select-Handler abrufen: ui.item.data("url") unter Verwendung der jQuery-data-Methode.

Das Link-Element ist einfacher und verwendet nur die Standard-attr- und text-Bindungen:

Beachten Sie nur, dass ich dem href ein Hash-Symbol vorangestellt habe. Auf diese Weise folgen Sie beim Klicken auf das Menüleistenelement keinem Link zu einer anderen Seite. Stattdessen wird das select-Ereignis ausgelöst und der Handler verarbeitet es leider.

Hier ist die vollständige Auswahlfunktion, die diesen Ansatz verwendet, um die Daten aus dem jQuery-Objekt abzurufen, das das von Knockout gerenderte Element darstellt:

Ich habe die zusätzliche Fehlerfalle hinzugefügt, da jQuery jetzt über JSON-Syntaxfehler schweigt. Ich möchte nicht, dass der Benutzer mit den Details von JSON-Syntaxfehlern belastet wird, aber ich möchte einen Hinweis darauf geben, was möglicherweise schief gelaufen ist.

Hier ist das Knockout-Ansichtsmodell, das in der an die Methode getJSON() angehängten Funktion definiert ist:


Schritt 5: Ausführen des Projekts im Debug-Modus.

Wenn Default-src.aspx im IDE-Fenster geöffnet ist, klicken Sie auf Ausführen (der grüne Pfeil direkt unter dem Menü der IDE) im Debug-Modus.

debugdebugdebug

Nach dem Build-Prozess sollte die Default-src.aspx im Fenster Ihres Browsers erscheinen. Die IDE führt im Hintergrund eine Express-Version des IIS-Webservers aus. In meinem Fall verwendet das Projekt Port 54713 auf localhost, um die Seite auszuführen: http://localhost:54713/debug/Default-src.aspx

Default-srcDefault-srcDefault-src

Wir sind jetzt bereit, am JavaScript-Build-Prozess zu arbeiten.


Integrieren des JavaScript-Buildprozesses in MSBuild

Dieses Projekt automatisiert die beiden wichtigsten Schritte, die wir zum Erstellen eines komplexen JavaScript-Projekts benötigen:

  • Verketten: Sammeln Sie alle Quelldateien, die Sie für eine bestimmte Seite benötigen, und verketten Sie sie in einer Datei. MSBuild verfügt nicht über eine integrierte Concat-Aufgabe wie Ant oder NAnt, daher müssen wir basierend auf diesem ausgezeichneten Blog How To: Verketten von Dateien mit MSBuild-Aufgaben unsere eigene erstellen.
  • Minimieren: Minimieren Sie unsere eigenen Quelldateien und verketten Sie sie mit Produktionsversionsdateien wie der jQuery-Datei in einer komprimierten Datei.

Schritt 1: Umschalten zwischen dem Projekt und dem Bearbeiten der Projekt-Build-Datei

Der Ordner, in dem Sie Ihr .NET-Projekt erstellt haben, enthält Dateien, die wie folgt aussehen:

project_fileproject_fileproject_file

Die Datei NetTutsMSBuildJs.csproj ist nur eine XML-Datei, die speziell für die Verarbeitung des MSBuild-Prozesses für dieses Projekt konfiguriert wurde. Es ist völlig legitim, eines davon manuell zu erstellen oder es an Ihr Projekt anzupassen. Für reine .NET-Zwecke ist es natürlich viel besser, die Visual Studio-GUI zu verwenden, um diese Datei automatisch für Sie zu konfigurieren, aber der Sinn dieses Tutorials besteht darin, Ihnen zu zeigen, wie Sie einen JavaScript-Build hinzufügen, der nicht zum Standard gehört. NET-Build.

In Visual Studio können Sie diese Projektdatei nur bearbeiten, wenn Sie das Projekt entladen, und Sie können das Projekt nicht laden, wenn die Datei einen Syntaxfehler enthält! Üben Sie also das Entladen und Laden des Projekts, damit Sie diese Schlüsseldatei bearbeiten können. Um das Projekt zu entladen, klicken Sie mit der rechten Maustaste auf das Projekt und klicken Sie auf das Element Projekt entladen.

unload_projectunload_projectunload_project

Nach dem Entladen des Projekts verschwinden alle Ordner und Dateien und Sie haben nur noch die Projektmappen und Projekte im Projektmappen-Explorer. Klicken Sie mit der rechten Maustaste auf das Projekt und dieses Mal ist das Kontextmenü sehr kurz. Wählen Sie NetTutsMSBuildJs.csproj bearbeiten und die Projektkonfigurationsdatei wird geöffnet.

edit_proj_fileedit_proj_fileedit_proj_file

Jetzt, um Ihr Selbstvertrauen aufzubauen und sich an die Zeiten zu gewöhnen, in denen Sie das Projekt aufgrund eines Syntaxfehlers in den Projektdateien nicht laden können, geben Sie einen absichtlichen Fehler am Anfang der Projektdatei ein: Geben Sie einfach einen Buchstaben davor ein das erste Tag außerhalb der XML-Dokumentstruktur. Speichern und schließen Sie die Datei. Versuchen Sie, das Projekt über das Kontextmenü zu laden, und Sie erhalten eine Fehlermeldung, dass das Projekt nicht geladen werden kann. Ja, Visual Studio ist sehr streng.

project_load_errorproject_load_errorproject_load_error

Projektdatei erneut öffnen, Fehler beheben, speichern und wieder schließen. Wenn Sie das Projekt erneut laden, sollte es reibungslos geladen werden. Jetzt ist es Zeit, wirklich zu bearbeiten. Wir werden nur eine Sache in der Projektdatei manuell ändern, und zwar das Hinzufügen eines Import-Elements, das eine Datei importiert, um den JavaScript-Build durchzuführen.


Schritt 2: Erstellen einer Build-Datei für den JavaScript-Build und Importieren sie in die Projektdatei.

Wenn Sie der Projektdatei ein Importelement für eine nicht vorhandene Datei hinzufügen, können Sie das Projekt nicht laden. Erstellen Sie daher eine neue Textdatei namens js.build im Ordner jsbuild. Nachdem Sie den erforderlichen XML-Code eingegeben haben, erkennt die IDE diese Datei als XML-Datei. Es ist nicht erforderlich, die Erweiterung .build dem XML-Editor zuzuordnen. Geben Sie diesen Startcode in jsbuild\js.build ein, speichern und schließen Sie.

Entladen Sie nun das Projekt und bearbeiten Sie die Projektdatei, indem Sie diese Zeile am Ende der Datei kurz vor dem schließenden Tag hinzufügen.

Sie sollten das Projekt jetzt erneut laden können.


Schritt 3: Hallo Discworld!!!!

Fünf Ausrufezeichen, das sichere Zeichen eines Wahnsinns. - Terry Pratchett, Reaper Man

Es ist mir ein bisschen langweilig, zu Beginn jedes neuen IT-Tutorials "Hallo Welt" zu sagen. Also werde ich dieses Mal Terry Pratchetts erstaunliche Scheibenwelt begrüßen.

Öffnen Sie js.build. Die IDE sollte automatisch erkennen, dass es sich um eine XML-Datei handelt. Wenn nicht, haben Sie möglicherweise ungültiges XML. Nach dem Hinzufügen des folgenden Codes zum Einrichten einer Hello Discworld-Nachricht sollte die IDE endlich erkennen, dass es sich um XML handelt. Stellen Sie sicher, dass die Datei js.build jetzt das folgende XML enthält. Vergesst die fünf Ausrufezeichen nicht, um den richtigen Hauch von Wahnsinn für die Scheibenwelt zu bekommen!!!!!

Wenn Sie mit der rechten Maustaste auf das Projekt klicken und Build ausführen, sollten Sie die Meldung im Ausgabefenster sehen.

hello_discworldhello_discworldhello_discworld

Wie Ant verwendet MSBuild die Idee von Zielen, um Gruppen von Aufgaben auszuführen. Das AfterBuild-Ziel wird automatisch von MSBuild ausgeführt, nachdem alles andere erfolgreich erstellt wurde. Ich hefte den JavaScript-Build an das Ende des .NET-Builds, sodass der AfterBuild-Erweiterungspunkt der beste Ort dafür zu sein scheint. Beachten Sie, wie AfterBuild automatisch ausgeführt wird und innerhalb von AfterBuild wir unser Target HelloDiscworld nennen. Ich habe die Wichtigkeit der Nachricht auf hoch gesetzt, da sie sonst möglicherweise nicht im Ausgabefenster erscheint.


Schritt 4: Pfade sortieren

Rechts. Wir sind in der Scheibenwelt ein bisschen verrückt geworden mit zu vielen Ausrufezeichen, aber zumindest scheint unsere JavaScript-Build-Datei zu funktionieren! OK. Spaß beiseite, wir müssen jetzt das Wichtigste in einer Build-Routine richtig machen: Pfade.

Wie bei Ant hatte ich immer Probleme, absolute und relative Pfade in diesen Konfigurationsdateien zu verstehen, daher möchte ich vorsichtig vorgehen. Fügen Sie oben in der Datei js.build direkt unter dem Project-Tag ein PropertyGroup-Element hinzu und fügen Sie zwei Eigenschaften wie diese hinzu.

Ändern Sie nun die Nachricht, damit wir sehen können, was diese Eigenschaften enthalten:

Bereinigen und erstellen Sie das Projekt nun erneut oder wählen Sie einfach Rebuild. Die Meldung erscheint in der Ausgabe wie folgt:

Hello Discworld!!!!! from debug-js\concat


Schritt 5: Clean- und Init-Ziele erstellen

Schön. Wir haben unsere Umgebung, unsere Quelldateien und wir haben Eigenschaften in der Build-Datei, die relative Pfade enthalten, die auf die Verzeichnisse verweisen, mit denen wir arbeiten müssen. Jetzt können wir ein CleanJs-Ziel und ein InitJs-Ziel hinzufügen, um die Verzeichnisse concat und min zu entfernen und zu erstellen. Ich habe die Angewohnheit, beim Entwickeln dieser Dateien kleine "Hallo"-Nachrichten in diese Ziele einzufügen, nur um mich selbst zu vergewissern, dass sie tatsächlich ausgeführt werden oder Eigenschaftswerte überprüfen. Ich stelle fest, dass die Erhöhung der Ausführlichkeit der Ausgabe in MSBuild dazu führt, dass ich eine Flut von Informationen bekomme, die ich nicht benötige, obwohl es großartig ist, wenn ich nicht herausfinden kann, wo ich einen Fehler gemacht habe.

MSBuild verwendet einfache relative Pfade aus dem Stammordner des gesamten Projekts. Wenn Sie in Ihrem Projekt einen Ordner namens js haben, können Sie den Wert js in einer benannten Property innerhalb einer PropertyGroup ohne weitere Komplikationen verwenden.

Um diese Ziele auszuführen, fügen Sie CallTarget-Elemente zum AfterBuild-Ziel hinzu.


Schritt 6: Verketten der Dateien

Sie haben sich wahrscheinlich schon daran gewöhnt, die Datei js.build zu bearbeiten. Sie haben vielleicht eine nervige Fehlermeldung bemerkt, die mit Text verknüpft ist, der mit wackeligen blauen Linien unterstrichen ist, wie diese:

invalid_child_element

Dies ist ein nerviger Fehler in Visual Studio, der schon seit einiger Zeit da ist. PropertyGroup-Elemente und ItemGroup-Elemente können mit jedem beliebigen Wert gefüllt werden. Das Problem besteht darin, dass Visual Studio fälschlicherweise einen Fehler für die erste Eigenschaft oder das erste Element meldet, die Sie in einer dieser Gruppen definieren. Wie Sie gesehen haben, funktioniert ConcatDir beim Erstellen des Projekts, und das Laden des Projekts ist problemlos. Ignorieren Sie einfach diese ablenkenden Fehler durch ungültige untergeordnete Elemente.

Endlich mal echte Bauarbeiten. Wir fügen ein neues Ziel hinzu, um die gewünschten Dateien zu verketten. Im Gegensatz zu Ant und NAnt gibt es keine integrierte Concat-Aufgabe, daher müssen wir unsere eigene mit der ReadLinesFromFile-Aufgabe ausführen

Fügen Sie dem AfterBuild-Ziel in js.build ein neues CallTarget-Element hinzu, das ConcatenateJsFiles aufruft. Erstellen Sie das Projekt wie gewohnt neu und siehe da, eine Datei namens default-concat.js wird auf magische Weise im Verzeichnis debug-js\concat erstellt. Sie müssen wahrscheinlich den Projektmappen-Explorer aktualisieren, um ihn anzuzeigen.

Fügen Sie nun eine neue Webformularseite namens Default-concat.aspx zum debug-Ordner hinzu und verknüpfen Sie sie mit der Seite Main.Master. Dies ist sehr kurz und unterscheidet sich geringfügig von der Seite Default-src.aspx. Dieses Mal wurde das gesamte benötigte JavaScript in einer Datei verkettet, sodass Sie nur einen Skript-Tag-Link zu default-concat.js benötigen.

Um dies auszuprobieren, öffnen Sie die Seite Default-concat.aspx im IDE-Fenster und führen Sie das Projekt erneut im Debug-Modus aus. Sie sollten die voll funktionsfähige Menüleiste Ihres Browsers mit dem Titel Debug concat in der Titelleiste des Browsers sehen.


Schritt 7: Endphase - Minimieren

Das letzte Ziel, Ziel!!!!!

Unsere Menüleiste scheint zu funktionieren und wenn wir die Dateien verketten, scheinen wir die richtige Reihenfolge zu haben und alles läuft reibungslos auf der Debug-concat.aspx-Seite. Jetzt ist es endlich an der Zeit, die Quelldateien default-src.js und jquery.ui.menubar.js zu minimieren und in der richtigen Reihenfolge mit den professionellen Release-Dateien zu verketten. Dies ist etwas komplizierter, da wir jetzt eine externe Abhängigkeit einbringen müssen, die wir bisher nicht benötigten: den YUI-Kompressor. Es wird eine .NET-Portierung davon entwickelt, aber ich bin so an die Java-Version gewöhnt, dass ich lieber meinen alten Favoriten verwende. Erstellen Sie ein neues Ziel namens MinifyJsFiles wie folgt:

Beachten Sie die Eigenschaft Kompressor. Hier müssen Sie nur den relativen Pfad aus dem project-Ordner definieren, aber die JAR-Datei, die vom Java-Prozess ausgeführt wird, benötigt den vollständigen Pfad. Glücklicherweise bietet MSBuild eine einfache Möglichkeit, einen relativen Pfad in einen vollständigen Pfad zu konvertieren. Sie verwenden die %-Syntax und rufen die Fullpath-Eigenschaft auf. Dies ist ein Beispiel für MSBuild-Metadaten für bekannte Elemente.

Fügen Sie dem AfterBuild-Element ein weiteres CallTarget-Element hinzu, um das MinifyJsFiles-Ziel aufzurufen.

Jetzt unser letztes Ziel, Ziel. Wir müssen alle professionellen Release-Dateien nehmen und sie mit der minimierten Version unserer Quellen verketten und sie in einer Datei verketten.

Sie müssen mit dieser ItemName-Eigenschaft in den Build-Dateien vorsichtig sein. Eigenschafts- und Elementinstanzen werden in MSBuild in einem globalen Kontext gespeichert. Wenn Sie den gleichen Namen für ItemName in zwei verschiedenen verketteten Zielen verwenden, verketten Sie am Ende alle Dateien von beiden Zielen.

Erstellen Sie das Projekt neu und Sie sollten jetzt zwei neue Dateien im Ordner debug-js\min sehen: default-min.js und jquery.ui.menubar-min.js. Der debug-js-Ordner sollte nun nach dem Neuaufbau und der Aktualisierung des Solution Explorers so aussehen:

debug-js

Erstellen Sie eine neue Webformularseite namens Default-min.aspx, die mit der Main.Master-Seite verknüpft ist, und legen Sie sie in den debug-Ordner.


Abschluss

Wir haben die in Visual Studio Express 2012 für Web erforderlichen Schritte durchlaufen, um ein JavaScript-Projekt zu erstellen, das Knockout mit der jQuery-Benutzeroberfläche verbindet, um eine Menüleiste zu erstellen, und dann einen JavaScript-Build in den Gesamtprojektbuild in Visual Studio zu integrieren.

In diesem Tutorial haben wir die erforderlichen Schritte in Visual Studio Express 2012 für Web durchlaufen, um ein JavaScript-Projekt zu erstellen, das Knockout mit der jQuery-Benutzeroberfläche verbindet, um eine Menüleiste aus einer JSON-Definitionsdatei zu erstellen und dann einen JavaScript-Build der Quelldateien in die . NET MSBuild-Prozess. Das Endergebnis war, dass wir eine Webseite mit nur einem Skript-Tag hatten, das das gesamte 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, die in einem .NET-Projekt ausgeführt wird. Es sollte auch relativ einfach sein, diese Ideen zu entwickeln, um Aufgaben einzuschließen, die für eine Release-Version geeignet sind. Der offensichtliche nächste Schritt besteht darin, die vollständig minimierte und verkettete Datei default.js in den Ordner js zu kopieren und diese dann in eine endgültige Datei Default.aspx im Stammverzeichnis aufzunehmen. Mit diesem Beispiel als Ausgangspunkt sollten Sie in der Lage sein, die MSBuild-Dokumentation zu durchsuchen und eine voll funktionsfähige Build-Datei zu entwickeln, um jeden Teil Ihres Build-Prozesses zu automatisieren.

Diesen Ansatz verwende ich auch für CSS-Dateien. In diesem speziellen Fall sind die CSS-Dateien der jQuery-Benutzeroberfläche so gut optimiert, dass es sich kaum lohnt, sie zu verkleinern, aber in anderen Projekten kann dies für die Leistung wichtig sein. Ein komplexerer nächster Schritt für Sie Grunters da draußen wäre das Erstellen einer js.build-Datei, die eine Grunt-Datei mit einer MSBuild Exec-Aufgabe ausführt. Auf diese Weise können Sie Linting und Tests problemlos in den Build-Prozess einbeziehen.

Weiterlesen

Weitere Informationen zu Visual Studio finden Sie in diesem ausgezeichneten Nettuts+ Visual Studio: Web Dev Bliss, wie Sie Web Essentials integrieren und Ihrem Buildprozess Codeprüfung hinzufügen. Leider ist Web Essentials für die Express-Edition nicht verfügbar. Siehe die Antwort von Mads Kristensen hier: "... leider erlaubt Express die Installation von Erweiterungen von Drittanbietern nicht". Dieses Tutorial richtet sich an Benutzer der Express-Edition und ich hoffe, es hat Ihnen einen Ausgangspunkt für die Erstellung Ihres eigenen integrierten JavaScript-Builds innerhalb der Visual Studio Express-Umgebung gegeben.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.