web-dev-qa-db-ja.com

ASP.NETMVCを使用しないバンドルとミニファイ

MVCプロジェクトがなくても、Microsoft.AspNet.Web.Optimizationのバンドルとミニファイを使用することはできますか？

REST APIと通信するAngularJSサイトを作成しています。REST APIの場合、ASP.NET WebAPIを使用しています。また、 「ASP.NET空のWebアプリケーション」。このプロジェクト（およびweb.config）にはHTML、js、およびCSSファイルのみが含まれています。jsファイルとCSSファイルをバンドルして縮小したいのですが、しません。それを得るためだけにMVCプロジェクトを作成したいのですが、それは可能ですか？

c#asp.netasp.net-mvcvisual-studio-2012bundling-and-minification
23
Joel

空白のプロジェクトでバンドルとミニファイを使用することは絶対に可能です。

  1. Nugetを使用してパッケージをインストールします：Install-Package Microsoft.AspNet.Web.Optimization

  2. BundleConfigクラスを作成し、バンドルを定義します。

    using System.Web.Optimization;
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").Include(
                  "~/Scripts/*.js"));
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                   "~/Styles/*.css")); 
    } 
}

  3. Global.asaxのアプリケーション開始内にBundleConfigクラスを登録します

    void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}
  4. hTMLドキュメント内のバンドルを参照します。
  5. デバッグモードを無効にして、バンドルを有効にします。
23
Claies

上記の回答に加えて、忘れられた重要なステップが1つあったことを述べておきます。

Microsoft.AspNet.Web.Optimization のNuGetパッケージをインストールし、Global.asaxにバンドルを登録した後（ Claies answer で説明）、を追加する必要があります。スタイルとスクリプトのレンダリングメソッドは次のとおりです。

<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

以前にページに追加したバンドル「〜/ bundles/js」および「〜/ bundles/css」をレンダリングするには、これをASPXページのヘッドセクションに追加する必要があります。それがないと表示されません（ なぜレンダリングが必要なのですか？ を参照）。追加する必要があります

<%@ Import Namespace="System.Web.Optimization" %>

nUGETパッケージMicrosoft.AspNet.Web.Optimizationをコードに既に追加していると仮定して、名前空間を登録するためにページの2行目に移動します。

より多くの関連ファイルを含めたい場合は、次のようにします

void Application_Start()
{
    BundleCollection bundles=BundleTable.Bundles;
    var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");
    bundles.Add(jsMattsBundle);
}

またはもっと簡単に

    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",
            "~/Scripts/lib/jquery-ui.custom.min.js",
            "~/Scripts/lib/jquery.watermark.min.js");

これにより、仮想パス"~/bundles/MattsUIBundle/js"の下にある3つのスクリプトすべてがバンドルされます。

重要：バンドルは、デバッグモードかリリースモードかをチェックします。最適化は、次の場合にのみ適用されますデバッグフラグを削除 web.configで

<compilation debug="true" />

または、Application_Startの内部を明示的に定義する場合、デバッグモードに関係なく最適化する必要があります。

BundleTable.EnableOptimizations = true;

同様に、CDNサポートを使用している場合は、

BundleTable.Bundles.UseCdn = true;   //enable CDN support

これにより、宣言することができます

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

注 CDNはリリースモードでのみ使用されます。次のスクリプトは、CDNの読み込みに失敗した場合に、jQueryのローカルコピーが読み込まれるようにします。

    <%= Scripts.Render("~/bundles/jquery") %>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            var e = document.createElement('script');
            e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
            e.type = 'text/javascript';
            document.getElementsByTagName("head")[0].appendChild(e);
        }
    </script>

"~/Scripts"でjQuery1.7.1のローカルコピーを提供していると仮定します。

注： MVC Razor構文では、次のようにビューでレンダリングが行われます。

@Scripts.Render("~/bundles/MattsUIBundle/js") 
@Styles.Render("~/bundles/css")

詳細については、こちらをご覧ください こちら

7
Matt

@マット、実際には追加する必要はありません

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

また、CSHTMLテンプレートを使用する必要はありません。バンドルは、htmlページから次のように参照できます。

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

ViewEngineからページを保存します。

4
Srost

SPAでファイルの読み込み速度を上げるには、セットアップに手動の時間が必要です。 間違った答えは、特にあなたの目標全体がMVCとその友人から離れることであった場合、Razorを実装することです（あなたの目標がAngularJS SPAである場合、これは良いことです）。他の回答で言及されている最適化フレームワークを実装する場合、CSHTMLファイルを構築するためにView Engineを押す必要があります。これは、おそらくあなたが節約していると思う以上の速度への顕著な打撃です。

だから私が言ったように、あなたはファイルを最小化するために開発者の時間を必要とするでしょう。所有しているCDNに手動で送信する必要があります（または設定する必要があります）。次に、チームが設定した独自のパッケージを使用して独自のCDNを参照でき、そのCDNはユーザーのブラウザーによってキャッシュされます。

次に、1つ以上のSPAが更新されたHTML/CSS/JSを指す必要がある場合、そのSPAアプリでCDNバージョンをインクリメントします。他のSPAアプリは、古いバージョンでも同じままにすることができます（ただし、最新バージョンのCDNに固執することをお勧めします）。また、ユーザーのブラウザは新しいCDNバージョンを認識し、新しいバージョンをキャッシュにプルします。

3
Suamere

VSエクステンション WebEssentials minification を使用することもできます。これにより、プロジェクトのコンパイルとは別にjs/cssファイルを縮小できます（サードパーティのdll依存関係は必要ありません）。バンドルもあり、とても便利です。

0
Anton Lyhin

YUIまたはGoogleClouserMapperを使用できます

これは、VisualStudioでYUIを使用する方法の例です。

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

このリンクにはVisualStudio拡張機能があります http://visualstudiogallery.msdn.Microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

JSMINを使用できます http://www.crockford.com/javascript/jsmin.html

JsMinは、以下のようにビルド後のイベントとして実行できます。jsmin<"$（ProjectDir）\ debug.js"> "$（ProjectDir）\ min.js"

これは、JSMINを実行する方法のリンクです http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

これがあなたの質問に答えたならば、左側の右側をチェックしてください。

0
ineffable p