36


34

そこで、私はさまざまな場所で(サイトマスターで、またいくつかのビューで追加の参照で)多数のJavaScriptファイルを参照するASP.NET MVCアプリケーションを持っています。

そのような参照を可能な限り単一の.jsファイルに圧縮および最小化するための自動化された方法があるかどうかを知りたいです。 こんなこと…

Content / ExtJS / Ext.ux.grid.GridSummary / Ext.ux.grid.GridSummary.js "type =" text / javascript "> Content / ExtJS / ext.ux.rating / ext.ux.ratingplugin.js" type = "text / javascript">コンテンツ/ ExtJS / ext-starslider / ext-starslider.js "type ="テキスト/ javascript ">コンテンツ/ ExtJS / ext.ux.dollarfield.js" type = "テキスト/ javascript">コンテンツ/ ExtJS / ext.ux.combobox.js "type ="テキスト/ javascript ">コンテンツ/ ExtJS / ext.ux.datepickerplus / ext.ux.datepickerplus-min.js" type = "テキスト/ javascript">コンテンツ/ ExtJS / SessionProvider.js "type =" text / javascript ">コンテンツ/ ExtJS / TabClos​​eMenu.js" type = "text / javascript"> Content / ActivityViewer / ActivityForm.js "type ="テキスト/ javascript "> Content / ActivityViewer / UserForm。 js "type =" text / javascript ">コンテンツ/ ActivityViewer / SwappedGrid.js" type = "text / javascript"> Content / ActivityViewer / Tree.js "type ="テキスト/ javascript ">
  1. could be reduced to something like this …​

コンテンツ/ MyViewPage-min.js "type ="テキスト/ javascript ">

ありがとう

8 回答


24


私は個人的には、開発中はファイルを別々にしておくことが非常に重要であると考えていますし、制作中はこのようなことが重要になると思います。 だから私は上記を行うために私のデプロイメントスクリプトを修正しました。

私は読んでいるセクションがあります:


そして私のマスターページファイルで私は使用します:

if(HttpContext.Current.IsDebuggingEnabled){%> ">"> ">"> ">"> ">"> <%} else {%> "> <%}%>

ビルドスクリプトは、セクション内のすべてのファイルを受け取り、それらをまとめて結合します。 それから私はYUIのminifierを使用してJavaScriptの縮小版を取得します。 これはIISによって提供されるので、私はむしろgzip圧縮を取得するためにIISの圧縮を有効にします。 *追加*私の展開スクリプトはMSBuildスクリプトです。 私はまた、優れたMSBuildコミュニティタスク(http://msbuildtasks.tigris.org/)を使用してアプリケーションをデプロイします。

スクリプトファイル全体をここに投稿するつもりはありませんが、ここでは、実行内容の大部分を示すための関連行をいくつか示します。

次のセクションでは、asp.netコンパイラでビルドを実行してアプリケーションをコピー先ドライブにコピーします。 (前のステップで、exec net useコマンドを実行してネットワーク共有ドライブをマップしました)。


すべてのソリューションプロジェクトがコピーされたら、これを実行します。


自動展開を開始するにはこれで十分です。 これらすべてをAspnetdeploy.msbuildという別のファイルに入れました。 msbuild / t:環境にデプロイする必要があるときはいつでもターゲットにするだけです。


8


実際にはhttp://www.microsoft.com/downloads/details.aspx?FamilyId=0AA30AE8-C73B-4BDD-BB1B-FE697256C459を使用してはるかに簡単な方法があります WDPは* aspnetcompiler および aspnetmerge *ツールの複雑さを管理します。 あなたは、Visual Studio内のUIによってプロセスをカスタマイズすることができます。

jsファイルの圧縮に関しては、すべてのjsファイルをそのままにしておき、ビルドプロセス中にこれらのファイルを圧縮するだけで済みます。 そのため、WDPでは次のように宣言します。

Webの内容はここで削除


$(BuildDependsOn); CompressJavascript


<_JSFilesToCompress Include = "$(OutputPath)Scripts \ ** \ *。js" />

これは私がJSMinに基づいていると思う MSBuild Community TasksからのJSCompress MSBuildタスクを使います。

つまり、すべてのjsファイルを_のままにします。 デバッグ可能(人間が読める形式)_。 WDPを構築すると、まずjsファイルが* OutputPath にコピーされ、次に CompressJavascript *ターゲットが呼び出されてjsファイルが最小化されます。 これはオリジナルのソースファイルを変更するのではなく、WDPプロジェクトのoutputフォルダーにあるものだけを変更します。 次に、事前コンパイル済みサイトを含むWDP出力パスにファイルをデプロイします。 私は自分の本でこの正確なシナリオを取り上げました。

チェックボックスをオンにして仮想ディレクトリの名前を入力するだけで、WDPに仮想ディレクトリの作成を処理させることもできます。

MSBuild上のいくつかのリンクの場合:

イブラヒムハシミと言う


4


Scott Hanselmanは最近、http://www.hanselman.com/blog/ASPNETAjaxScriptCombiningAndMovingScriptResourceaxdsToStaticScripts.aspx [スクリプトの静的ファイルへの結合と移動]について、基本的にhttp://msdn.microsoft.com/en-us/library/systemを使用してブログを書いています。 .web.ui.scriptmanager.aspx [+ ScriptManager +]と `+ CompositeScript `参照および ` Path +`属性:


静的ファイルの縮小に関しては、おそらくビルド/デプロイメント時に縮小ツールを使用する必要があります(そしてそうすべきです)。


4


この状況では MvcContrib.IncludeHandlingがうまく機能します。 この例では、スタイル(文字列)のコレクションを含むモデルがあります。 私がページにカスタムStyle / JSを追加する必要があるならまたそれからそれをすることができます。 次にHtml.RenderCssを呼び出すと、すべてのスタイル/ jsが1つのファイルにまとめられ、縮小されます。

<%foreach(Model.Stylesのvar styleSheet){%> <%Html.IncludeCss(styleSheet));

<%}%> <%Html.IncludeCss( "〜/ Scripts / jquery.1.4.2.js"));

<%= Html.RenderCss()%>

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-ja-GB.js"); %>

これがクライアントにレンダリングされると、出力は次のようになります(1つのファイルにまとめたファイル)


APIにはデバッグフラグも用意されています。これをオンにすると、スクリプトを縮小または結合しても非常に便利です。

ほんの数分で、私はYslowのスコアFからBに行きました。 (2から24スクリプト)…​ 驚くばかり! そして40kbsのドロップ。

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


2


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


2


あなたはMvcContrib.IncludeHandlingを使うことができます。 それ:

  • CSSとJSをサポート

  • 単一のリクエストに結合

  • 縮小する

  • Gzip / Deflate圧縮

  • キャッシュヘッダを設定する

  • HTMLHelper拡張メソッドを使用してインクルードを登録し、実行時にそれらを結合します。

  • IoC経由でプラグ可能

カバーの下に、それはYUICompressorを使います。


0


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

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

ありがとう

グイド


0


私はこれが古い質問であることを知っています、しかし私がいくつかの縮小検索をしていたのでそれは最初に起こりました。 私はGruntjs、http://gruntjs.comを使用することをお勧めします。 それは完全なWeb構築ツールです。