web-dev-qa-db-ja.com

ASP.NET MVC4ベータ版でJavascript / CSSミニファイを無効にする方法

ASP.NET MVC 4を試しているところですが、Javascript/CSSミニファイ機能を無効にする方法がわかりません。特に開発環境の場合、これはデバッグに大いに役立ちます。 web.configのスイッチになると思いますが、ASP.NET MVC 4は現時点ではまだベータ段階であるため、実際にはあまり情報がありません。誰かが適切なブログ投稿などを手伝ったり、指摘したりしていただければ幸いです。

javascriptcssasp.net-mvc-4minifyasp.net-optimization
16
Jeff

Global.asax.csで

#if DEBUG
        foreach (var bundle in BundleTable.Bundles)
        {
            bundle.Transform = new NoTransform();
        }
#endif
18
Socardo

独自のバンドルをGlobal.asaxに登録し、コンテンツを縮小したくない場合はNoTransformクラスを使用できます。

個人的には、スクリプトをまったく変換したくありません。 2つのスクリプトディレクトリを作成するだけです。 1つはデバッグスクリプトバージョンで、もう1つは最初にダウンロードされた縮小バージョンです。

MVC 4のすぐに使えるミニファイア（JsMinify）はOperaのjQuery 1.7.1を壊すので、私はそれを使いたくありません。 Global.asaxに次の行を入力しました：Application_Start()メソッド：

Bundle debugScripts = new Bundle("~/DebugScripts", 
    new NoTransform("text/javascript"));
debugScripts.AddDirectory("~/Scripts/Debug", "*.js");
BundleTable.Bundles.Add(debugScripts);

Bundle productionScripts = new Bundle("~/ProductionScripts", 
    new NoTransform("text/javascript"));
productionScripts.AddDirectory("~/Scripts/Minified", "*.js");
BundleTable.Bundles.Add(productionScripts);

これで、_layouts.cshtmlに2行のいずれかを追加するだけで済みます。

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/DebugScripts")" type="text/javascript"></script>
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/ProductionScripts")" type="text/javascript"></script>

もちろん、これを配置すると、もう少しファンキーになる可能性があります。バンドルを1つだけ生成し、ビルドされたタイプに応じて、含めるファイルを選択できます。

4
Wesley Bakker

もう1つのオプションは、スクリプトとリンクタグの作成に使用できるHTMLヘルパーを作成することです。これが私がJavascriptに実装したもので、CSSにも実行できます。

public static class BundleHelper
    {
        public static MvcHtmlString JsBundle(this HtmlHelper helper, string bundlePath)
        {
            var jsTag = new TagBuilder("script");
            jsTag.MergeAttribute("type", "text/javascript");

            return ReferenceBundle(helper, bundlePath, jsTag);
        }

        public static MvcHtmlString ReferenceBundle(this HtmlHelper helper, string bundlePath, TagBuilder baseTag)
        {
            var httpContext = helper.ViewContext.HttpContext;
            var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);

            Bundle bundle = BundleTable.Bundles.GetBundleFor(bundlePath);
            var htmlString = new StringBuilder();

            if (bundle != null)
            {
                var bundleContext = new BundleContext(helper.ViewContext.HttpContext, BundleTable.Bundles, urlHelper.Content(bundlePath));

                if (!httpContext.IsDebuggingEnabled)
                {
                    baseTag.MergeAttribute("href", System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(bundlePath));
                    return new MvcHtmlString(baseTag.ToString());
                }

                foreach (var file in bundle.EnumerateFiles(bundleContext))
                {
                    var basePath = httpContext.Server.MapPath("~/");
                    if (file.FullName.StartsWith(basePath))
                    {
                        var relPath = urlHelper.Content("~/" + file.FullName.Substring(basePath.Length));
                        baseTag.MergeAttribute("href", relPath, true);
                        htmlString.AppendLine(baseTag.ToString());
                    }
                }

            }

            return new MvcHtmlString(htmlString.ToString());
        }
    }

今、あなたがしなければならないのはあなたの見解でそれを呼ぶことだけです：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="~/Content/css" rel="stylesheet" type="text/css" />
    <link href="~/Content/themes/base/css" rel="stylesheet" type="text/css" />
    @Html.JsBundle("~/scripts/js")
    <meta name="viewport" content="width=device-width" />
</head>

また、web.configのデバッグ設定に応じて、スクリプトを個別の参照としてレンダリングするか、新しいバンドル/縮小機能を使用します。さらにいくつかの例を見たい場合は、ヘルパーを作成する際の参照として http://codecutout.com/resource-minify-bundling のコードの一部を使用しました。彼らのヘルパーは少し良く書かれていて、無効な引数が指定されたときに例外をスローするなどです。私はまだ私のクリーンアップに取り掛かっていません。

4
Russell Durham

Global.asaxでEnableDefaultBundles()を呼び出した後、これを行うことができます...

        if ( ... running in development environment ...)
        {
            var registeredBundles = BundleTable.Bundles.GetRegisteredBundles();
            foreach (var bundle in registeredBundles)
            {
                if (bundle.Transform is System.Web.Optimization.JsMinify)
                    bundle.Transform = new NoTransform();
            }
        }

きれいではありませんが（システムによって設定された状態を変更する）、他のすべての提案よりもコードがはるかに少なく、標準のバンドル動作を使用でき、ビューを変更する必要はありません。

3
Ian Mercer

ASP.NET MVCの新しいバージョンでは、追加するだけです

#if DEBUG
            foreach (var bundle in BundleTable.Bundles)
            {
                bundle.Transforms.Clear();
            }
#endif

直後の

BundleConfig.RegisterBundles(...);
3
Roman Pushkin

configからオフにすることができます：

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

2
Jon

JsMinifyとCssMinifyのインスタンスを置き換えるのではなく、代わりにインターフェイスを使用できます。 2番目のコンストラクターパラメーターがインターフェイスではなく型であったため、このオプションは以前のリリースでは使用できませんでした。

IBundleTransform jsTransform;
IBundleTransform cssTransform;

#if DEBUG
    jsTransform = new NoTransform("text/javascript");
    cssTransform = new NoTransform("text/css");
#else
    jsTransform = new JsMinify();
    cssTransform = new CssMinify();
#endif

Bundle jsBundle = new Bundle("~/JsB", jsTransform);
Bundle cssBundle = new Bundle("~/CssB", cssTransform);

縮小版と非縮小版が付属しているスクリプトの場合、おそらく注目に値します。 jQueryの場合、ヘルパーメソッドを使用して、オプションでDEBUGビルドの「.min」を削除してデバッグを容易にすることができます。

private string Min(string scriptNameIncludingMin)
{
#if DEBUG
    return scriptNameIncludingMin.Replace(".min", ""); // Remove .min from debug builds
#else
    return scriptNameIncludingMin;
#endif
}

// ...
jsBundle.AddFile(Min("~/Scripts/jquery-1.7.2.min.js"));
1
Eric J.

そのような機能が「箱から出して」利用できるようになれば、それは正しいと思います。

UserVoice.comにフィードバックを投稿しました： http://aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/2702000-improve-system-web-optimization-bundle

それにあなたの「声」を与えなさい。

1
resnyanskiy

System.Web.Optimizationの新しい拡張機能を試してください- Bundle Transformer 。 Bundle Transformerでは、デバッグを簡素化するための多くの機会が実装されました（ ドキュメント を参照）。

0
Andrey Taritsyn

別の代替手段（v1.1.0.0およびMVC5でテスト済み）：

public class BundleConfig
{
    public static void Register()
    {
        ScriptBundle jsBundle = new ScriptBundle("~/Scripts/myscript.min.js");
        jsBundle.Include("~/Scripts/myscript.js");
        DisableInDebugMode(jsBundle);

        BundleTable.Bundles.Add(jsBundle);
    }

    private static void DisableInDebugMode(ScriptBundle jsBundle)
    {
    #if DEBUG
        // Don't minify in debug mode
        jsBundle.Transforms.Clear();
    #endif
    }
}
0
Chris S