web-dev-qa-db-ja.com

ASP.NETバンドルで縮小を無効にする方法

私はweb.config（s）の両方にdebug="true"があります、そして私のバンドルを縮小したくない、それを無効にするようなことは何もありません。私はenableoptimisations=falseを試しました、これが私のコードです：

//Javascript
bundles.Add(new ScriptBundle("~/bundles/MainJS")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate*")
            .Include("~/Scripts/regular/lib/bootstrap.js")
            .IncludeDirectory("~/Scripts/regular/modules", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/pages", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/misc", "*.js", true));

//CSS
bundles.Add(new StyleBundle("~/bundles/MainCSS")
            .Include("~/Content/css/regular/lib/bootstrap.css*")
            .IncludeDirectory("~/Content/css/regular/modules", "*.css", true)
            .IncludeDirectory("~/Content/css/regular/pages", "*.css", true))
asp.netasp.net-mvcasp.net-mvc-4bundleasp.net-optimization
177
Baconbeastnz

debug="true"がweb.configにあり、Scripts/Styles.Renderを使用してページ内のバンドルを参照している場合は、バンドルと縮小の両方を無効にする必要があります。 BundleTable.EnableOptimizations = falseは、バンドリングと縮小の両方を常にオフにします（debug true/falseフラグに関係なく）。

おそらくScripts/Styles.Renderヘルパーを使っていませんか？ BundleTable.Bundles.ResolveBundleUrl()を介してバンドルへの参照を直接レンダリングしている場合は、常に縮小/バンドルされたコンテンツを取得します。

135
Hao Kung

条件付きコンパイル指令はあなたの友達です。

#if DEBUG
            var jsBundle = new Bundle("~/Scripts/js");
#else
            var jsBundle = new ScriptBundle("~/Scripts/js");
#endif
148
Martin Devillers

バンドルと縮小化を無効にするには、これを。aspxファイルに配置します（これはweb.configのdebug=trueでも最適化を無効にします）

vb.net：

System.Web.Optimization.BundleTable.EnableOptimizations = false

c＃.net

System.Web.Optimization.BundleTable.EnableOptimizations = false;

EnableOptimizations = trueを指定すると、web.configにdebug=trueが含まれていても、これはバンドルおよび縮小されます。

83
manuel

トランスフォームをクリアするだけで、バンドルの縮小をオフにできます。

var scriptBundle = new ScriptBundle("~/bundles/scriptBundle");
...
scriptBundle.Transforms.Clear();

私は個人的には、すべてのスクリプトを1つのファイルにまとめたいときに便利だと思いましたが、デバッグ段階では読みやすさが必要でした。

63
muglio

私はこれらの提案をたくさん試みましたが、注目に値するように働きました。私はこれが私の間違いであることを知るためだけにかなりの数時間を無駄にしました：

@Scripts.Render("/bundles/foundation")

私が何を試しても、それは常に私がJavaScriptを縮小してまとめたものです。代わりに、私はこれを使うべきだった：

@Scripts.Render("~/bundles/foundation")

余分な '〜'はそれをしました。それが本当にそれであるかどうか見るためにたった一つのインスタンスでそれを再び削除しさえしました。それは……うまくいけば、私がこれで無駄にした時間を少なくとも一人節約することができます。

25
Nick

いくつかの答えをまとめると、これは私にとってASP.NET MVC 4でうまくいきます。

        bundles.Add(new ScriptBundle("~/Scripts/Common/js")
            .Include("~/Scripts/jquery-1.8.3.js")
            .Include("~/Scripts/zizhujy.com.js")
            .Include("~/Scripts/Globalize.js")
            .Include("~/Scripts/common.js")
            .Include("~/Scripts/requireLite/requireLite.js"));

        bundles.Add(new StyleBundle("~/Content/appLayoutStyles")
            .Include("~/Content/AppLayout.css"));

        bundles.Add(new StyleBundle("~/Content/css/App/FunGrapherStyles")
            .Include("~/Content/css/Apps/FunGrapher.css")
            .Include("~/Content/css/tables.css"));

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

手動で縮小（およびその他の機能）を制御する簡単な方法もあります。これはnew CssMinify（）トランスフォーマを使った、こんな感じです：

// this is in case when BundleTable.EnableOptimizations = false;
var myBundle = new StyleBundle("~/Content/themes/base/css")
    .Include("~/Content/themes/base/jquery.ui.core.css" /* , ... and so on */);
myBundle.Transforms.Add(new CssMinify());
bundles.Add(myBundle);

// or you can remove that transformer in opposite situation
myBundle.Transforms.Clear();

あなたが縮小されるためだけにいくつかのバンドルの特別な部分を持ちたいとき、それは便利です。たとえば、標準的な（jQuery）スタイルを使用していて、それが足を踏み入れている（過度のブラウザ要求を受け取っている）場合は、自分のスタイルシートをそのままにしておくことをお勧めします。 （同じ - JavaScriptで）。

20
Agat

私はこの質問で他の人から与えられたいくつかの答えを組み合わせて別の解決策を考え出しました。

Goal：ファイルを常にバンドルし、<compilation debug="true" ... />が発生した場合にJSおよびCSSの縮小を無効にし、常にCSSバンドルにカスタム変換を適用する。

私の解決策：

1）web.config：<compilation debug="true" ... />に

2）Global.asax Application_Start（）メソッドの場合：

 protected void Application_Start() {
     ...
     BundleTable.EnableOptimizations = true; // Force bundling to occur

     // If the compilation node in web.config indicates debugging mode is enabled
     // then clear all transforms. I.e. disable Js and CSS minification.
     if (HttpContext.Current.IsDebuggingEnabled) {
         BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
     }

      // Add a custom CSS bundle transformer. In my case the transformer replaces a
      // token in the CSS file with an AppConfig value representing the website URL
      // in the current environment. E.g. www.mydevwebsite in Dev and
      // www.myprodwebsite.com in Production.
      BundleTable.Bundles.ToList()
          .FindAll(x => x.GetType() == typeof(StyleBundle))
          .ForEach(b => b.Transforms.Add(new MyStyleBundleTransformer()));
     ...
}
12
Vince Horst

次のプロパティをfalseに設定すると、バンドルと縮小の両方が無効になります。

Global.asax.csファイルに、以下のように行を追加します。

protected void Application_Start()
{
    System.Web.Optimization.BundleTable.EnableOptimizations = false;
}
6
marvelTracker

バンドルごとに縮小を無効にする方法は次のとおりです。

bundles.Add(new StyleBundleRaw("~/Content/foobarcss").Include("/some/path/foobar.css"));
bundles.Add(new ScriptBundleRaw("~/Bundles/foobarjs").Include("/some/path/foobar.js"));

サイドノート：あなたのバンドルに使用されているパスはあなたの公開されているビルドの実際のパスと一致してはいけません。 .js、.css、および/または '。'の使用も避けてください。バンドルの名前の任意の場所に '_'があります。上記の例のように、名前はできるだけ単純でわかりやすい名前にしてください。

ヘルパークラスは以下の通りです。これらのクラスを将来性のないものにするために、.clear（）を使用する代わりにjs/css最小化インスタンスを外科的に削除します。 CSSバンドルを正しく渡すことになります（FirefoxとChromeは、mime-typeがデフォルトの "text/html"に設定されたCSSバンドルを拒否します）。

internal sealed class StyleBundleRaw : StyleBundle
{
        private static readonly BundleMimeType CssContentMimeType = new BundleMimeType("text/css");

        public StyleBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
        {
        }

        public StyleBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
        {
                 Transforms.Add(CssContentMimeType); //0 vital
                 Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //0
        }
        //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/css" right into cssminify    upon unwiring the minifier we
        //  need to somehow reenable the cssbundle to specify its mimetype otherwise it will advertise itself as html and wont load
}

internal sealed class ScriptBundleRaw : ScriptBundle
{
        private static readonly BundleMimeType JsContentMimeType = new BundleMimeType("text/javascript");

        public ScriptBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
        {
        }

        public ScriptBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
        {
                 Transforms.Add(JsContentMimeType); //0 vital
                 Transforms.Remove(Transforms.FirstOrDefault(x => x is JsMinify)); //0
        }
        //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/javascript" right into jsminify   upon unwiring the minifier we need
        //  to somehow reenable the jsbundle to specify its mimetype otherwise it will advertise itself as html causing it to be become unloadable by the browsers in published production builds
}

internal sealed class BundleMimeType : IBundleTransform
{
        private readonly string _mimeType;

        public BundleMimeType(string mimeType) { _mimeType = mimeType; }

        public void Process(BundleContext context, BundleResponse response)
        {
                 if (context == null)
                          throw new ArgumentNullException(nameof(context));
                 if (response == null)
                          throw new ArgumentNullException(nameof(response));

         response.ContentType = _mimeType;
        }
}

これをすべてうまくいくようにするには（nuget経由で）インストールする必要があります。

WebGrease 1.6.0+ Microsoft.AspNet.Web.Optimization 1.1.3+

そしてあなたのweb.configは以下のように充実しているはずです。

<runtime>
       [...]
       <dependentAssembly>
        <assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
       </dependentAssembly>
       <dependentAssembly>
              <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
       </dependentAssembly>
        [...]
</runtime>

<!-- setting mimetypes like we do right below is absolutely vital for published builds because for some reason the -->
<!-- iis servers in production environments somehow dont know how to handle otf eot and other font related files   -->
</system.webServer>
        [...]
        <staticContent>
      <!-- in case iis already has these mime types -->
      <remove fileExtension=".otf" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />

      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>

      <!-- also vital otherwise published builds wont work  https://stackoverflow.com/a/13597128/863651  -->
      <modules runAllManagedModulesForAllRequests="true">
         <remove name="BundleModule" />
         <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
      </modules>
      [...]
</system.webServer>

CSSバンドルをフォントなどの点で機能させるには、追加の手順を実行する必要があるかもしれませんが、これは別の話です。

4
XDS

すでに与えられた答えを補足するために、他のファイルの完全なバンドルと縮小を許可しながら、一部のファイルを縮小/難読化/連結しない最良のオプションは、バンドルの仮想パスをレンダリングするのではなく、特定のバンドルのコンテンツを読み取り、ページ内のファイルをレンダリングするカスタムレンダラーを使用することです。 CSSファイルがバンドルされているときにIE 9がベッドに$ *％@ ingしていたため、縮小がオフになっていても。

この記事 に感謝します。これは、CSSのファイルをレンダリングするが、システムがバンドルされたjavascriptファイルをレンダリングできるCSSレンダラーを作成するために使用したコードの出発点をくれました/ minified/obfuscated。

静的ヘルパークラスを作成しました。

using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;

namespace Helpers
{
  public static class OptionalCssBundler
  {
    const string CssTemplate = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";

    public static MvcHtmlString ResolveBundleUrl(string bundleUrl, bool bundle)
    {
      return bundle ? BundledFiles(BundleTable.Bundles.ResolveBundleUrl(bundleUrl)) : UnbundledFiles(bundleUrl);
    }

    private static MvcHtmlString BundledFiles(string bundleVirtualPath)
    {
      return new MvcHtmlString(string.Format(CssTemplate, bundleVirtualPath));
    }

    private static MvcHtmlString UnbundledFiles(string bundleUrl)
    {
      var bundle = BundleTable.Bundles.GetBundleFor(bundleUrl);

      StringBuilder sb = new StringBuilder();
      var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext);

      foreach (BundleFile file in bundle.EnumerateFiles(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, bundleUrl)))
      {
        sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath));
      }

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

    public static MvcHtmlString Render(string bundleUrl, bool bundle)
    {
      return ResolveBundleUrl(bundleUrl, bundle);
    }
  }

}

次に、カミソリレイアウトファイルで：

@OptionalCssBundler.Render("~/Content/css", false)

標準の代わりに：

@Styles.Render("~/Content/css")

Javascriptファイル用のオプションのレンダラーを作成しても、このヘルパーを更新する必要はほとんどありません。

4
James Eby

プロジェクト内でEnableOptimizationsキーワードを検索してください。

あなたが見つけたのであれば

BundleTable.EnableOptimizations = true;

falseにします。

2
BJ Patel

LESS/SASS CSS変換を使用している場合は、useNativeMinificationオプションを使用して、縮小を無効にするためにfalseに設定できます（web.config内）。私の目的のために、必要なときにここでそれを変更するだけですが、web.config変換を使用してリリースビルドで常に有効にするか、またはコードで変更する方法を見つけることができます。

<less useNativeMinification="false" ieCompat="true" strictMath="false"
      strictUnits="false" dumpLineNumbers="None">

Tip :ここで重要なのはCSSを表示することです。これはブラウザの検査ツールやファイルを開くだけで実行できます。バンドルが有効になっているときは、コンパイルごとにファイル名が変わるので、ページの上部に次のコードを追加すると、コンパイルしたCSSを変更するたびに新しいブラウザウィンドウで簡単に表示できます。

@if (Debugger.IsAttached) 
{
    <a href="@Styles.Url(ViewBag.CSS)" target="css">View CSS</a>
}

これはhttps://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1のような動的URLになります

更新：デプロイメント/リリースビルド中に私のためにtrueに設定するためにweb.configトランスフォーメーションを作成しました

  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <less xdt:Transform="Replace" useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
      <jsEngine name="MsieJsEngine" />
    </less>
  </bundleTransformer>
1
Simon_Weaver

新しいフレームワークは、VSを介してセットアップされると、デフォルトのweb.config、web.Debug.config、およびweb.Release.configを取得するため、これは将来的には誰かに役立つかもしれません。 web.release.configには、この行があります。

<compilation xdt:Transform="RemoveAttributes(debug)" />

これは私が行ったインラインの変更を上書きするように見えました。私はこの行をコメントアウトしましたが、私たちは（リリースビルドの中で縮小されていないコードを見るという意味で）私たちは肉厚でした。

1
Mutmatt