web-dev-qa-db-ja.com

ASP.NET MVCアプリでJavaScriptファイルを自動的に圧縮して最小化するにはどうすればよいですか？

そのため、さまざまな場所（サイトマスター内およびいくつかのビュー内の追加の参照）にある多数のjavascriptファイルを参照するASP.NETMVCアプリがあります。

可能であれば、そのような参照を単一の.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>

ありがとう

javascriptasp.net-mvccompressionextjsminimize
36
wgpubs

個人的には、開発中にファイルを分離しておくことは非常に重要であり、本番環境ではこのようなことが重要だと思います。そこで、上記を行うためにデプロイメントスクリプトを変更しました。

私は読むセクションがあります：

<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によって提供されるため、gzip圧縮を取得するためにIISで圧縮をオンにします。****追加****展開スクリプトは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を使用します。

24
Min

実際には、 Web Deployment Projects （WDP）を使用するはるかに簡単な方法があります。 WDPは、aspnet__compilerおよびaspnet__mergeツールの複雑さを管理します。 VisualStudio内の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のいくつかのリンクの場合：

イブラヒム橋見は言った

私の本： Microsoftビルドエンジンの内部：MSBuildとTeam Foundationビルドの使用

8
Sayed Ibrahim Hashimi

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>

静的ファイルの縮小に関しては、ビルド/デプロイ時に縮小ツールを使用する必要があります（使用する必要があります）。

4
Josef Pfleger

MvcContrib.IncludeHandling この状況ではうまく機能します。この例では、スタイル（文字列）のコレクションを持つモデルがあります。また、カスタムのStyle/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は、オンのときにスクリプトを縮小または結合しないデバッグフラグも提供します。これは、非常に便利です。

ほんの数分で、YslowのスコアがFからBになりました（24スクリプトから2に）...すごい！そして40kbsのドロップ。

明らかな欠点は、サーバーがオンザフライで圧縮を実行していることです。結合されたスクリプトを定義された期間キャッシュするオプションがあると思いますが、これはすぐにこれを軽減します。

4
Jafin

MvcContrib.IncludeHandlingを使用できます。それ：

  • CSSとJSをサポート
  • 単一のリクエストに結合
  • 最小化
  • Gzip/Deflate圧縮
  • キャッシュヘッダーを設定します
  • HTMLHelper拡張メソッドを使用してインクルードを登録し、実行時にそれらを結合します
  • IoC経由でプラグイン可能

裏では、YUICompressorを使用しています。

2
Peter Mounce

他の人が示唆しているように、静的な縮小ビルドを作成するのが最善です。または、.NETで利用できるYUICompressorのバージョンがここにあります： http://www.codeplex.com/YUICompressor

2
Evan Trimboli

これは古い質問ですが、ミニファイ検索を行っているときに最初に出てきました。 Gruntjsの使用をお勧めします http://gruntjs.com 。これは完全なWebビルドツールです。

0
Chris Love

私はこれを自動的に処理するために何かを書きました。それはグーグルのクロージャーコンパイラを使用します。ここでコードを読むことができます：

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

ありがとう

Guido

0
gatapia