ASP.NET MVCアプリでJavaScriptファイルを自動的に圧縮および最小化するにはどうすればよいですか？
https://stackoverflow.com/questions/1224292
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
だから私は、さまざまな場所で（サイトマスターやいくつかのビューの追加参照でも）多くのjavascriptファイルを参照するASP.NET MVCアプリを持っています。
可能な場合、そのような参照を単一の.jsファイルに圧縮および最小化する自動化された方法があるかどうかを知りたい。このような...
<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>
...は、このようなものに減らすことができます...
<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>
ありがとう
解決
個人的には、開発中にファイルを分離しておくことは非常に貴重であり、生産中はこのようなことが重要だと考えています。そのため、上記を行うために展開スクリプトを変更しました。
次のセクションがあります：
<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>
そして、使用するマスターページファイルで：
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>
<% } %>
ビルドスクリプトは、セクション内のすべてのファイルを取得し、それらをすべて結合します。次に、YUIのミニファイヤを使用して、javascriptの縮小バージョンを取得します。これはIISによって提供されるため、IISで圧縮を有効にしてgzip圧縮を取得します。 ****追加**** 私の展開スクリプトはMSBuildスクリプトです。また、優れたMSBuildコミュニティタスク（ http://msbuildtasks.tigris.org/ ）を使用して、アプリケーション。
スクリプトファイル全体をここに投稿するつもりはありませんが、ほとんどの機能を実証するために関連する行をいくつか示します。
次のセクションでは、asp.netコンパイラでビルドを実行して、アプリケーションをコピー先ドライブにコピーします。 （前のステップで、exec net useコマンドを実行し、ネットワーク共有ドライブをマップするだけです。）
<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>
すべてのソリューションプロジェクトがコピーされた後、これを実行します：
<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>
これで、デプロイメントの自動化を開始するのに十分なはずです。これらすべてをAspnetdeploy.msbuildという別のファイルに入れました。環境にデプロイする必要があるときはいつでもmsbuild / t：Targetします。
他のヒント
実際には、 Web Deployment Projects （WDP）。 WDPは、 aspnet__compiler および aspnet__merge ツールの複雑さを管理します。 Visual Studio内のUIでプロセスをカスタマイズできます。
jsファイルの圧縮に関しては、すべてのjsファイルをそのままにして、ビルドプロセス中にこれらのファイルを圧縮するだけです。そのため、WDPでは次のように宣言します。
<Project>
REMOVE CONTENT HERE FOR WEB
<Import
Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
<BuildDependsOn>
$(BuildDependsOn);
CompressJavascript
</BuildDependsOn>
</PropertyGroup>
<Target Name="CompressJavascript">
<ItemGroup>
<_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
</ItemGroup>
<Message Text="Compresing Javascript files" Importance="high" />
<JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>
これは、 MSBuild Community Tasks のJSCompress MSBuildタスクを使用していますが、これはJSMinに基づいていると思います。
アイデアは、すべてのjsファイルを（つまり、デバッグ可能/人間が読み取れる）のままにしておくことです。 WDPをビルドすると、まずjsファイルが OutputPath にコピーされ、次に CompressJavascript ターゲットが呼び出されてjsファイルが最小化されます。これは元のソースファイルを変更するのではなく、WDPプロジェクトの出力フォルダーにあるものだけを変更します。次に、事前にコンパイルされたサイトを含むWDP出力パスにファイルを展開します。この正確なシナリオについては、本（私の名前の下のリンク）で説明しました。
WDPで仮想ディレクトリの作成も処理できます。チェックボックスをオンにして、仮想ディレクトリの名前を入力するだけです。
MSBuildの一部のリンク：
イブラヒム橋見と言った
Scott Hanselmanは最近基本的に静的ファイルへのスクリプトの組み合わせと移動についてブログに投稿しました ScriptManager CompositeScript 参照と Path 属性を使用：
<asp:ScriptManager runat="server">
<CompositeScript path="http://www.example.com/1.js">
<Scripts>
<asp:ScriptReference />
<asp:ScriptReference />
<!-- etc. -->
</Scripts>
</CompositeScript>
</asp:ScriptManager>
静的ファイルの縮小に関しては、おそらくビルド/デプロイ時に縮小ツールを使用する必要があります（使用する必要があります）。
MvcContrib.IncludeHandling はこの状況に適しています。 この例では、スタイルのコレクション（文字列）を持つモデルがあります。 また、カスタムスタイル/ JSをページに追加する必要がある場合も、同様に行うことができます。 次に、Html.RenderCssを呼び出すと、すべてのstyles / jsが1つのファイルにまとめられ、縮小されます。
<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet));
<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js"));
<%= Html.RenderCss() %>
</head>
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");
%>
これがクライアントにレンダリングされると、出力は次のようになります（結合された1つのファイルが縮小されます）
<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>
APIにはデバッグフラグも用意されており、オンに設定するとスクリプトが縮小または結合されず、非常に便利です。
数分のうちに、FのYslowスコアからBに移行しました（24スクリプトから2まで）...すばらしい！そして、40kbのドロップ。
明らかな欠点は、サーバーが即座に圧縮を実行していることです。結合されたスクリプトを定義された期間キャッシュするオプションがあると思いますが、これはこれをすぐに軽減します。
他の人が示唆しているように、静的な縮小ビルドを作成することをお勧めします。または、ここで.NETのYUICompressorのバージョンを利用できます： http://www.codeplex.com/YUICompressor
MvcContrib.IncludeHandlingを使用できます。それ：
- CSSとJSをサポート
- 単一のリクエストに結合
- 最小化
- Gzip / Deflate圧縮
- キャッシュヘッダーを設定します
- HTMLHelper拡張メソッドを使用してインクルードを登録し、実行時にそれらを結合します
- IoC経由でプラグイン可能
カバーの下では、YUICompressorを使用します。
これを自動的に処理するために何かを書きました。 Googleのクロージャーコンパイラを使用します。ここでコードを読むことができます：
ありがとう
ガイド
これは古い質問であることは知っていますが、いくつかの縮小検索を行っていたときに最初に出てきました。 Gruntjs、 http://gruntjs.com を使用することをお勧めします。これは完全なWebビルドツールです。
