Wie kann ich automatisch komprimieren und JavaScript-Dateien in einem ASP.NET MVC-app minimieren?
https://stackoverflow.com/questions/1224292
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Also habe ich eine ASP.NET MVC-app, die eine Reihe von Javascript-Dateien an verschiedenen Orten verweist (im Betriebsstamm und weitere Referenzen in verschiedenen Ansichten als auch).
Ich würde gerne wissen, ob es eine automatisierte Möglichkeit ist zum Komprimieren und solche Verweise in ein einziges Js minimiert, wo möglich einreichen. So dass diese ...
<script src="<%= ResolveUrl("~") %>Content/ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.rating/ext.ux.ratingplugin.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext-starslider/ext-starslider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.dollarfield.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.combobox.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/SessionProvider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/TabCloseMenu.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/ActivityForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/UserForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/SwappedGrid.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/Tree.js" type="text/javascript"></script>
... so etwas wie diese reduziert werden könnte ...
<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>
Danke
Lösung
Ich persönlich denke, dass hält die Dateien während der Entwicklung zu trennen ist von unschätzbarem Wert und die bei der Herstellung ist, wenn so etwas wie dies zählt. So modifizierte ich meinen Deployment-Skript, um die oben zu tun.
Ich habe einen Abschnitt, der lautet:
<Target Name="BeforeDeploy">
<ReadLinesFromFile File="%(JsFile.Identity)">
<Output TaskParameter="Lines" ItemName="JsLines"/>
</ReadLinesFromFile>
<WriteLinesToFile File="Scripts\all.js" Lines="@(JsLines)" Overwrite="true"/>
<Exec Command="java -jar tools\yuicompressor-2.4.2.jar Scripts\all.js -o Scripts\all-min.js"></Exec>
</Target>
Und in meiner Masterseite Datei Ich benutze:
if (HttpContext.Current.IsDebuggingEnabled)
{%>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-1.3.2.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-ui-1.7.2.min.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.form.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.metadata.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.validate.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/additional-methods.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/form-interaction.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/morevalidation.js")%>"></script>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/showdown.js") %>"></script>
<%
} else {%>
<script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/all-min.js")%>"></script>
<% } %>
Der Build-Skript nimmt alle Dateien im Abschnitt und verbindet sie alle zusammen. Dann benutze ich YUI minifier eine verkleinerte Version der Javascript zu bekommen. Da diese von IIS serviert wird, würde ich eher einschalten Komprimierung in IIS gzip-Komprimierung zu erhalten. **** Hinzugefügt **** Mein Deployment-Skript ist ein MSBuild-Skript. Ich benutze auch die ausgezeichnete MSBuild Community Tasks ( http://msbuildtasks.tigris.org/ ) eine helfen, bereitstellen Anwendung.
Ich werde nicht meine ganze Skript-Datei hier posten, aber hier sind einige relevante Linien sollten die meisten zeigen, was sie tut.
Im Folgenden wird die Build-in asp.net Compiler führen die Anwendung über auf das Ziellaufwerk zu kopieren. (In einem frühen Schritt, den ich gerade exec net use Befehle ausführen und ein Netzlaufwerk zuordnen).
<Target Name="Precompile" DependsOnTargets="build;remoteconnect;GetTime">
<MakeDir Directories="%(WebApplication.SharePath)\$(buildDate)" />
<Message Text="Precompiling Website to %(WebApplication.SharePath)\$(buildDate)" />
<AspNetCompiler
VirtualPath="/%(WebApplication.VirtualDirectoryPath)"
PhysicalPath="%(WebApplication.PhysicalPath)"
TargetPath="%(WebApplication.SharePath)\$(buildDate)"
Force="true"
Updateable="true"
Debug="$(Debug)"
/>
<Message Text="copying the correct configuration files over" />
<Exec Command="xcopy $(ConfigurationPath) %(WebApplication.SharePath)\$(buildDate) /S /E /Y" />
</Target>
Nachdem alle Lösungs Projekte kopiert werden über ich dies ausführen:
<Target Name="_deploy">
<Message Text="Removing Old Virtual Directory" />
<WebDirectoryDelete
VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
ServerName="$(IISServer)"
ContinueOnError="true"
Username="$(username)"
HostHeaderName="$(HostHeader)"
/>
<Message Text="Creating New Virtual Directory" />
<WebDirectoryCreate
VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
VirtualDirectoryPhysicalPath="%(WebApplication.IISPath)\$(buildDate)"
ServerName="$(IISServer)"
EnableDefaultDoc="true"
DefaultDoc="%(WebApplication.DefaultDocument)"
Username="$(username)"
HostHeaderName="$(HostHeader)"
/>
</Target>
Das sollte ausreichen, um Sie auf die Automatisierung von Einsatz zu erhalten begonnen. Ich habe alle diese Dinge in einer separaten Datei namens Aspnetdeploy.msbuild. Ich habe gerade msbuild / t. Ziel, wenn ich in eine Umgebung bereitstellen müssen
Andere Tipps
Eigentlich gibt es eine viel einfachere Art und Weise mit MSBuild Community-Aufgaben die aus ich denke, basierend von JSMin.
Die Idee ist, lassen Sie alle Ihre js Dateien, wie sie sind (d. Debug / Menschen lesbare) . Wenn Sie Ihren WDP bauen wird es zuerst die js Dateien in das Verzeichnis Kopieren OutputPath und dann die CompressJavascript Ziel aufgerufen, um die js Dateien zu minimieren. Dies gilt nicht Ihre ursprünglichen Quelldateien ändern, nur die, die im Ausgabeordner des WDP-Projektes. Dann verteilen Sie die Dateien in dem WDPs Ausgangspfad, der die Pre-kompilierte Website beinhaltet. Ich bedeckte genau dieses Szenario in meinem Buch (Link unten meinen Namen) .
Sie können auch die WDP behandeln lassen als auch das virtuelle Verzeichnis erstellen, überprüfen Sie einfach eine Checkbox und im Namen des virtuellen Verzeichnisses füllen.
Für einige Links auf MSBuild:
Sayed Ibrahim Hashimi
My Book: Innerhalb der Microsoft Build Engine: Mit MSBuild und Team Foundation Build
Scott Hanselman gebloggt vor kurzem über Kombinieren und Verschieben von Skripten zu statischen Dateien , grundsätzlich mit der ScriptManager mit CompositeScript Referenzen und einem Path Attribut:
<asp:ScriptManager runat="server">
<CompositeScript path="http://www.example.com/1.js">
<Scripts>
<asp:ScriptReference />
<asp:ScriptReference />
<!-- etc. -->
</Scripts>
</CompositeScript>
</asp:ScriptManager>
Im Hinblick auf die Verkleinerungs die statischen Dateien, haben Sie wahrscheinlich (und sollte) verwenden Verkleinerungs Tools zur Build / Bereitstellungszeit.
MvcContrib.IncludeHandling funktioniert gut für diese Situation. Im Beispiel habe ich ein Modell mit einer Sammlung von Stilen (string). wenn ich auch kann einen benutzerdefinierten Style / JS auf der Seite hinzufügen muß dann tut das auch. Dann ruft Html.RenderCss vereint alle Stile / js zusammen in einer Datei und minifies es.
<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet));
<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js"));
<%= Html.RenderCss() %>
</head>
Die gleiche Art und Weise für Sie Javascript.
<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>
Wenn diese an den Client gerendert wird die Ausgabe wie folgt aussieht (minimierte kombiniert 1 Datei)
<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>
Die API bietet auch einen Debug-Flag, das, wenn nicht die Skripte nicht minify oder kombinieren, wenn es gesetzt, die stark von Nutzen ist.
In wenigen Minuten, die ich von YSlow Score von F nach B ging (24 Skripte bis zu 2) ... Awesome! Und ein Tropfen 40kbs.
offensichtlicher Nachteil ist der Server der Kompression on the fly tut. Ich denke, es gibt Möglichkeiten, das kombinierte Skript für einen bestimmten Zeitraum cachen, die diese jedoch schnell lindern würde.
Wie andere vorgeschlagen haben, dann würden Sie am besten aus einer statischen minified bauen zu schaffen. Alternativ gibt es eine Version von YUICompressor für .NET hier: http://www.codeplex.com/YUICompressor
Sie könnten MvcContrib.IncludeHandling verwenden. It:
- Unterstützt CSS und JS
- Kombiniert zu einer einzigen Anfrage
- Minifies
- gzip / Deflate komprimiert
- Richtet Cache-Header
- Verwendet Htmlhelper-Erweiterungsmethoden enthält zu registrieren, um sie dann zur Laufzeit kombinieren
- Ist steckbar über IoC
Unter den Abdeckungen, verwendet es YUICompressor.
Ich habe etwas geschrieben dies automatisch für mich zu handhaben. Es nutzt Googles Schließung Compiler. Sie können den Code lesen Sie hier:
Danke
Guido
Ich weiß, dass dies eine alte Frage, aber es kam zuerst als ich einige minification Suche tat. Ich würde mit Gruntjs empfehlen, http://gruntjs.com . Es ist ein komplettes Web-Build-Tool.
