web-dev-qa-db-ja.com

Visual Studio 2010：元のファイルの代わりに縮小されたJavaScriptファイルを公開する

プロジェクトで使用されるすべての.jsファイルを含むScriptsフォルダーがあります。 Ajax Minifierタスクを使用して、それぞれの.min.jsファイルを生成します。アプリケーションがデバッグモードで実行されているかリリースモードで実行されているかに応じて、元の.jsファイルまたは縮小されたファイルを含めます。

Scriptsフォルダーは次のようになります。

Scripts/script1.js
Scripts/script1.min.js   // Outside the project, generated automatically on build
Scripts/script2.js
Scripts/script2.min.js   // Outside the project, generated automatically on build

.min.jsファイルはプロジェクトの外部にあり（元のファイルと同じフォルダーにあります）、プロジェクトを公開するときに宛先フォルダーにコピーされません。

私はビルドタスクを使用した経験がまったくないので（ミニファイアタスクを含めることを除いて）、次の正しい方法について誰かにアドバイスしていただければ幸いです。

  • Visual Studioからアプリを公開するときに、.min.jsファイルを宛先フォルダーにコピーします。
  • 元のjsファイルを削除/コピーしない（これは重要ではありませんが、アプリで使用されないファイルはコピーしません）。

ありがとう、

編集：回答から、私はいくつかの詳細を見逃していることがわかり、おそらく問題の間違った解決策を探しています。質問に次の詳細を追加します。

  • 可能であれば、ソリューションのビルドプロセスでコピースクリプトを作成したくありません。確かに、私たちはそれを検討しましたが、これまでWeb展開プロジェクトを使用していたため、ビルドタスクにコピーコマンドを手動で追加するのではなく、VS2010の新しい公開機能（これらのプロジェクトを置き換えることになっています）の使用を開始したいと思います。
  • * .min.jsファイルは、ソース管理システム（現時点ではTFS）に含めることができないため、プロジェクトに含まれていません。これらはコンパイル中に生成されたファイルであり、TFSに「bin」フォルダーを含めるのと似ています（発生する問題を含む）。たぶん、minファイルを別のフォルダーに作成し、それを「bin」のように扱う必要がありますか？ （それも可能ですか？）
javascriptvisual-studio-2010
24
salgiza

編集（2012年10月）:ASP.NET 4.5に含まれるようになりました バンドルと縮小 。現在のバージョンは動的JavaScript生成をあまりサポートしていませんが、それ以外の点ではかなり使いやすく、たとえば、以下で説明するように、ファイルシステムが変更をライブで確認します。独自の圧縮を行う前に、それを試してください！

古い答え：

これをビルド時に実装するのではなく、実行時に実装することをお勧めします。これにはいくつかの利点があります。

  • エラーの識別を容易にするために、結合と縮小をオフにするデバッグパラメータを含めることができます。これにより、開発環境と本番環境の違いを少なくして実行することもできます。
  • ある程度の柔軟性が得られます。直接公開できるスクリプトのみの修正を介して、エラーを2回修正することができました。単純だが重大なエラーの場合、それは素晴らしいオプションです。
  • 実装するのはかなり簡単です-あなたはすでにhttp応答を実装する専門知識を持っています。それはここでうまく適用されます。
  • 関連するスクリプトの最終変更日を追跡し、それを使用して適切なETagなどを設定するだけでなく（IISも可能））、遠い将来の有効期限を設定できます。次に、実際のsciptをリンクするのではなく（縮小されているかどうかに関係なく）、スクリプトをクエリ文字列内の短いトークンにリンクできます。これにより、クライアントはjsが更新されたかどうかを確認する必要がなくなります。ページは、とにかく個別に要求する必要がある「新しい」スクリプトファイルにリンクします（これはビルドスクリプトで行うことは可能ですが、注意が必要です）。
  • 複雑なビルドプロセスには、多くの場合、隠れたコストがあります。実行に時間がかかるだけでなく、ビルド自動化ツールを更新するとどうなりますか？ IISまたはWindowsバージョンを切り替えるとき？VS 2010に移行するとき？新しい開発者をスピードアップするのはどれくらい簡単ですか？

これは私が従うプロセスの大まかな概要です：

  1. 圧縮可能なcssとjsのみを含むものとして2つのディレクトリを指定します。 appdomainのインスタンス化時、またはその直後に静的コンストラクターを介して、クラスはそれらのディレクトリの内容を検索し、変更を監視するために FileSystemWatcher を作成します。
  2. すべてのファイルはファイル名の順序で読み取られます（00_jquery.js10_init.jsなどのプレフィックスを使用すると、ここで順序を制御するのに役立ちます）。ファイル名のリストは、デバッグ目的で保存されます。
  3. すべてのファイルは文字列連結によって結合され、YUIによって縮小され、GZipStreamによって圧縮されます。バージョン固有のトークンは、最新の最終変更日または結果のハッシュのいずれかによって計算されます。
  4. 圧縮の結果（バイト配列、ファイル名、およびバージョン固有のトークン）は、静的クラス変数（lockで保護されています）に格納されます。ファイルシステムウォッチャーが更新を検出すると、ステップ2が再開され、圧縮が完了するまでバックグラウンドで実行されます。つまり、ロックされます。
  5. 結合されたjavascript（および/またはcss）を含めたいページは、共有静的変数を呼び出します。デバッグモードの場合は、手順2で保存したファイル名ごとにスクリプト（またはリンク）タグが生成されます。それ以外の場合は、カスタムIHttpHandler。すべてのURIは、クエリ文字列にバージョン固有のトークンを含みます。これは、IIS静的ファイルハンドラーと結合された縮小バージョンのカスタムhttpハンドラーの両方で無視されますが、キャッシュが簡単になります。
  6. カスタムIHttpHandlerでは、結合されたjavascript（またはcss）の要求を受信すると、Content-Encoding：gzipヘッダーが設定され、遠い将来の有効期限が設定されます。次に、事前圧縮されたバイト配列がcontext.Response.OutputStreamを介してhttpストリームに直接書き込まれます。

このアプローチを使用すると、スクリプトファイルを追加または削除するたびにweb.configオプションをいじる必要がなくなります。アプリの実行中にスクリプトを更新でき、クライアントは次のページビューでスクリプトを要求しますが、有効期限ヘッダーが原因でブラウザーがIf-Not-Modified要求を送信しないため、最適なキャッシュ動作が得られます。通常、スクリプトの圧縮には1秒ほどかかり、圧縮結果は非常に小さいため、静的変数のメモリオーバーヘッドは無視できます（非常に大量のスクリプト/ cssの場合、最大で数100 KB）。

20
Eamon Nerbonne

Visual Studioを介してJavascriptの縮小を実行する場合は、次のように開始します。 http://encosia.com/2009/05/20/automatically-minify-and-combine-javascript-in-visual-studio /

それ以外の場合は、Javascriptを自動的に組み合わせて縮小できるツールをお勧めします。私が見た2つのツールは、 Justin Etheredge の Bundler と Combres です。私は現在のプロジェクトでBundlerを使用しており、同僚の1人がCombresを使用しています。 Bundlerは少し使いやすいですが、Combresよりも機能が劣ります。 Bundlerを使用すると、web.configでデバッグがオフになっている場合、縮小および結合されません。つまり、開発環境でjavascriptをデバッグできます。

P.S. BundlerはSquishItに名前が変更されました。

7
Daniel Lee

ビルドイベント を確認することをお勧めします。これを使用して、ビルド後を実行するコマンドラインを指定できます。さらに、あなたの質問は これら質問 に似ています。

実際のコピーでは、 [〜＃〜] copy [〜＃〜] コマンドを使用するだけで簡単に実行できます。

3
James B

このアプローチがこの状況で役立つかどうかはよくわかりませんが、想像できます... csprojファイルを次のように変更できます。特定のタイプのビルドに含めるファイルに影響を与えます。

特定のタイプでは、構成マネージャーを指します。

デバッグとリリースがデフォルトですが、新しいものを作成することを妨げるものは何もありません。選択した構成に基づいて、構成の一部としてさまざまなファイルを含めることができます。その方法でさまざまなファイルを公開できると思います。私はここに私のブログでその戦略を説明しています： http://realfiction.net/go/1

2
flq

「ASP.NETプロジェクトの* .jsファイルと* .cssファイルを自動的に縮小、結合、圧縮、およびキャッシュする」に関するこの記事は、おそらくあなたを助けることができます

http://www.codeproject.com/KB/aspnet/CssAndJavaScriptOptimizer.aspx?display=Print

1
Ivo