Clever Geek Handbook

Visual Studio 2012による効果的なWeb開発：パッケージ化の革新とスクリプトとスタイルの縮小



Visual Studio 2012のリリースに伴い、Web Optimization Frameworkのスクリプトとスタイルを自動的に最小化およびパッケージ化するツールが大幅に更新されました。 これらの変更には2つの目標があります。



  1. デフォルトのWebアプリケーションテンプレートによって登録されているパッケージ化されたパッケージに対するフルコントロールを付与します。
  2. デバッグおよび公開モードをサポートして、デバッグ中にパッケージがパッケージ化されず、アプリケーションがサーバーでホストされるときに自動化されるようにします


主な変更点



提起された問題の解決策を提供するために、パッケージングパッケージの決定および登録方法、およびパッケージパッケージのビューでの参照方法に関して、フレームワークにいくつかの変更が加えられました。



登録の変更



以前に使用されたEnableDefaultBundlesメカニズムは廃止され、Visual Studio 2012の最終バージョンでは削除されます。



新しいプロジェクトを作成すると、アプリケーションの起動時にglobal.asaxで呼び出されるRegisterBundlesメソッドのみを含むApp_Start \ BundleConfig.csという名前の新しいファイルを見つけることができます。



この新しい方法は、プロジェクトのすべてのパッケージングパッケージを作成および登録するためのすべてのタスクを実行するように設計されています。 フレームワークの以前のバージョンでは、デフォルトでアセンブリを登録するプロセスは、アセンブリに組み込まれたメソッドRegisterTemplateBundlesまたはEnableDefaultBundlesを呼び出すことで実行されていました。 これで、この呼び出しはプロジェクト内のコードとして利用できるようになり、パッケージングパッケージの登録と作成を柔軟に管理できるようになりました。



さらに、新しいバージョンのVisual Studio 2012 RCでは、jQuery、jQuery UI、検証などのさまざまなタイプのスクリプト用にデフォルトのパッケージングパッケージが分離されました。 これにより、ページに含まれるスクリプトのセットを管理できます。



さらに、パッケージングパッケージの登録プロセスが簡素化されました。 たとえば、以前に次のコードを記述する必要があった場合： 



bundle = new Bundle("~/Content/themes/base/css", csstransformer); bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true); bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true); bundles.Add(bundle);


次に、新しいバージョンでは、次のように定義できます。 



 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css"));


ご覧のとおり、いくつかの改善点があります。



ビューでのパッケージングパッケージの使用の変更



パッケージングパッケージの作成と登録のプロセスを簡素化することに加えて、ビューでパッケージを使用するプロセスも改善されました。 これらの変更により、現在の開発タスク（デバッグまたはリリース）に応じて縮小化とパッケージ化がどのように機能するかを再構成するタスクが大幅に簡素化されます。



以前のバージョンでは、ビュー内のパッケージパッケージへのリンクは、スクリプトタグのヘルパーメソッドを使用して作成されました。次に例を示します。



<link href = '@ BundleTable.Bundles.ResolveBundleUrl（“〜/ Content / themes / base / css”）' rel =” stylesheet” type =” text / css” />



<script src = '@ BundleTable.Bundles.ResolveBundleUrl（“〜/ Scripts / js”）'> </ script>



このアプローチは一般に、URLを逆参照する目的や、バージョン管理された一意のURLを取得する目的でもうまく機能しますが、デバッグモードで作業する場合、その短所を示します。 デバッグ時には、各スクリプトまたはスタイルをページ上の個別の行として表示したいと思います。



新しいバージョンでは、次のコードを使用してページにパッケージングパッケージを登録することにより、この問題を解決します。



@ Styles.Render（「〜/コンテンツ/テーマ/ベース/ css」）



@ Scripts.Render（「〜/スクリプト/ js」）



さらに、これらのヘルパーメソッドは、ページにレンダリングするためのURL配列を持​​つパラメーターを受け入れることができるため、複数のパッケージの出力を一度に指定できます。



@ Styles.Render（「〜/コンテンツ/テーマ/ベース/ css」、「〜/コンテンツ/ css」）



このアプローチのおかげで、デバッグモードでは、パッケージングパッケージを使用して決定されるスクリプトとスタイルが個別のファイルとしてページにレンダリングされます。 サイトを運用サーバーで運用する場合、これらのスクリプトとスタイルはパッケージ化された縮小パッケージの形式でレンダリングされます。



デフォルトでは、モードの切り替えは現在のHttpContextコンテキストのIsDebuggingEnabledプロパティに依存します。つまり、web.config設定を介してパッケージ化メカニズムの動作モードを制御できます。



<compilation debug =” false” />



BundleTableクラスの静的プロパティEnableOptimizationsの独自のバージョンを実装することにより、この動作をオーバーライドできます。



これらのプロパティを使用すると、デバッグモードとリリースモードの切り替えを制御できますが、他の多くの要因に応じて、より柔軟な規制とマークアップの生成が必要な例が多数あります。 フレームワークの新しいバージョンは、ヘルパーメソッドのおかげで、このシナリオを引き続きサポートします。



<script type =” text / javascript” src = '@ Scripts.Url（“〜/ bundles / modernizr”）'> </ script>



このアプローチにより、スタイルとスクリプトを定義するためのマークアップを完全に制御できます。



サードパーティのミニファイライブラリの接続



Web最適化フレームワークは、標準のJsMinifyおよびCssMinifyに加えて、スクリプトとスタイルを最小化およびパッケージ化するためのサードパーティライブラリをサポートしています。 新しいバージョンでは、スクリプトファイルとスタイルの複数の変換の可能性が追加されました。 たとえば、LESSスタイルをCSSに変換してからパックできます。 



 var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less"); lessBundle.Transforms.Add(new LessTransform()); lessBundle.Transforms.Add(new CssMinify()); bundles.Add(lessBundle);


このような変換の順序は、ライブラリをコレクションに追加する順序によって決まります。


More articles:


All Articles