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


185

私はdebug="true"両方のweb.config(s)にあり、バンドルを縮小したくありませんが、何もしないようにしていないようです。私が試しました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))

2
@ RickAnd-MSFTリクエストは、縮小を無効にしてバンドルを有効にする方法です。web.config debug = true / falseまたはEnableOptimizationsを使用すると、両方のスイッチがオンまたはオフになるだけです。Martin Devillersの回答により、ミニファイが無効になっているときにバンドルを有効にできる
guymid

2
また、私にとっては....バンドル内のファイル 'x.js'については、フォルダ内に 'x.min.js'ファイルがないことを確認してください。それ以外の場合は、縮小変換を削除しましたが、バンドルすると、たとえば、 'angular.js'がある場合はDELETE 'angular.min.js'を削除してから;-)
stooboo

回答:


137

web.configを使用していて、ページでバンドルを参照するために使用している場合はdebug="true"、バンドルと縮小の両方をオフにする必要があります。(デバッグのtrue / falseフラグに関係なく)バンドルと縮小の両方を常にオフにします。 Scripts/Styles.RenderBundleTable.EnableOptimizations = false

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


12
この答えから、縮小だけをオフしてバンドルをそのままにしておく方法はわかりません-これは可能ですか?
Adam Tuliper-MSFT 2012年

33
これを行うには、デフォルトで変換が設定されていないプレーンバンドルのScript / StyleBundlesを変更するのが最も簡単です。これにより、縮小はオフになりますが、バンドルされます。バンドルを実行するには、EnableOptimizationsをtrueに設定する必要があることに注意してください。
Hao Kung

2
また、私にとっては....バンドル内のファイル 'x.js'については、フォルダ内に 'x.min.js'ファイルがないことを確認してください。それ以外の場合は、縮小変換を削除しましたが、バンドルすると、たとえば、 'angular.js'がある場合は、 'pre'圧縮ファイルを削除します。DELETE 'angular.min.js' ;-)
stooboo

1
@stoobooこれは私にとってそれを修正したものですが、何も削除する必要はありません。非minファイルを含めるだけです。
OneHoopyFrood 2014年

2
EnableOptimizations = false-このコードはどこに属していますか?
アレックス

157

条件付きコンパイルディレクティブはあなたの友です:

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

16
実際、私は彼がそれを釘付けにしたと思います-単純化をオフにするために、HaoによるBundleを使用してください。そうでなければ、バンドルして縮小するScriptBundleを使用してください
Adam Tuliper-MSFT 2012年

1
これは、RequireJS独自のバンドル/ミニファイシステムを使用せずにRequireJSを介してロードする場合など、バンドル参照URIでバンドルを参照する場合に最適なソリューションです。
Norman H

1
私はAdamのようなものを見て、ScriptBundleを拡張バンドルとして理解しているので、基本的な参照(特定の事後操作ではない)を追加したいので、Bundleは特定のバンドルの縮小を無効にする良い方法のようです。
Charles HETIER、2013

6
@ RickAnd-MSFTバンドル+デバッグモードでは縮小なし、リリースモードではバンドル+縮小できるようにするこのコードの目的を誤解していると思います。web.config debug = true / falseまたはEnableOptimizationsを使用すると、両方のスイッチがオンまたはオフになるだけです。私はあなたのコメントを読んでこのマーティンの解決策を却下しましたが、それは実際には縮小せずにバンドルする非常に良い方法であることを発見しました
guymid

-1この「ソリューション」は、せいぜい一時的なギャップです。実際には、それが機能しても、非常に保守不可能なコードにつながります。しかし、それはそれについて最悪のことではありません。「バンドル」を使用すると、mime-typeが「text / javascript」ではなく「text / html」に設定されたサーバーによってアセットが引き渡されます。このアプローチをcssファイルのバンドルに適用すると、デバッグモードのときに火で遊んでいます。しないでください。しないでください。本番ビルドで機能するより健全なアプローチについては、私の回答を参照してください。
XDS

89

バンドリングとミニファイを無効にするには、これを.aspxファイルに配置するだけです(これによりdebug=trueweb.config内でも最適化が無効になります)。

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c#.net

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

これを配置EnableOptimizations = trueするとdebug=trueweb.config内であってもバンドルされて縮小されます


2
これが問題を修正した唯一のものです。私が持っていたdebug="true"し、右のScript.Renderそれはまだ働いていませんでした。また、これは.min.jsファイルを処理しないため、依存関係コードの縮小されていないコピーを含めるようにしてください。
OneHoopyFrood 2014年

2
@TCC:vb.net構文には大文字を使用するべきだと考えるのは間違っていFalseますか?
jeremysawesome 2015年

@jeremysawesomeああ、そうだね、それは正しい、良い点だと思う:-)私はVBプログラマーではないことが多いので、気付かなかった...
TCC

1
最初の行は「... debug = falseの場合でも」である必要がありますか?
UnionP 2015

2
vb.Net .tostringのように、ケース、偽= falseを気にしない()= .toString()
マヌエル・

67

変換をクリアするだけで、バンドルの縮小化をオフにすることができます。

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

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


-1 Here be dragons:JsMinifier / CssMinifierを取り去ると、mime-typeを「text / css」または「text / javascript」に設定する内部メカニズムも取り去られます。これはデバッグ/リリースモードでは問題を引き起こしませんが、パブリッシュされたビルド(別名ライブデプロイメント)のコンテキストでcss-bundleに大混乱を引き起こします:ChromeとFirefoxは、MIMEタイプが「text / css」の代わりに「text / html」。js-bundlesを使用すると、どういうわけかうまくいきますが、せいぜいjs-bundleを "text / html"(<-真剣に?)正しいアプローチについては私の答えを参照してください。
XDS

27

私はこれらの提案をたくさん試しましたが、機能しているように見えました。私はこれが私の間違いであることを知るためだけにかなりの数時間を無駄にしました:

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

何を試しても、JavaScriptは常に縮小され、バンドルされています。代わりに、私はこれを使用するべきでした:

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

余分な「〜」はそれを行いました。それが本当にそれであるかどうかを確認するために、私はそれを1つのインスタンスで再び削除しました。無駄だった時間を少なくとも1人節約できるといいのですが。


24

いくつかの答えを組み合わせると、これは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

21

手動で縮小(およびその他の機能)を制御する簡単な方法もあります。これは、次のように使用する新しい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を使用)。


13

この質問で他の人からのいくつかの回答を組み合わせて、別の代替案を考え出しました。

目標:常にファイルをバンドルし、その場合にJSおよびCSSの縮小を無効に<compilation debug="true" ... />し、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()));
     ...
}

7

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

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

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

この機能をオフにすると、ファイルがcssに変換される理由がわかりません。最適化を有効にすると、より少ないファイルをバンドルしても機能しなくなります。
FrenkyB 2016年

5

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

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縮小インスタンスを外科的に削除し、特にビルド時に問題が発生するようにバインドされていないmime-type-setter変換を挿入することに注意してくださいcss-bundlesを適切に引き渡すようになります(Firefoxとchrome reject cssバンドルで、mime-typeがデフォルトの "text / html"に設定されています):

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

すでに与えられた答えを補足するために、他のファイルの完全なバンドリングとミニファイを許可しながら、SOMEファイルを縮小/難読化/連結したくない場合は、特定のバンドルのコンテンツを読み取るカスタムレンダラーを使用するのが最善の方法です。 (s)バンドルの仮想パスをレンダリングするのではなく、ページ内のファイルをレンダリングします。私が個人的にこれを必要としたのは、縮小がオフになっていて、CSSファイルがバンドルされいたときにIE 9がベッドを$ *%@ ingしていたためです。

この記事に感謝します。CSS用のファイルをレンダリングしますが、システムがjavascriptファイルをバンドル/縮小/難読化してレンダリングできるようにするCSSレンダラーを作成するために使用したコードの出発点を教えてくれました。

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

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


1
うまくいきます。ファイルが更新されたときにURLを変更したい場合は、CssTemplate次のよう"<link href=\"{0}?f={1}\" rel=\"stylesheet\" type=\"text/css\" />"に変更して、sb.AppendFormat行を次のように変更できますsb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath), System.IO.File.GetLastWriteTimeUtc(HttpContext.Current.Server.MapPath(file.IncludedVirtualPath)).Ticks);
franzo

確かに、私たちは仕事でそのようなことをしました。実行中のアセンブリのmaj / min / build / revをプルするGlobal.asaxクラスに配置したJSVersionというパブリック静的文字列がありました。次に、次のように参照しました:<script type = "text / javascript" src = "Scripts / jsfile_name.js <%= Global.JSVersion%>"> </ script>
James Eby

3

EnableOptimizationsプロジェクトでキーワードを検索する

だから見つけたら

BundleTable.EnableOptimizations = true;

それを回しますfalse


2
これは縮小を無効にしますが、バンドルも完全に無効にします。これは、少なくとも注意する必要があると思います。
John Pavek

1

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

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

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

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

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


更新:展開/リリースビルド中にweb.configトランスフォーメーションを作成してtrueに設定しました

  <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
ファイル名はコンパイルごとに変わるわけではありません。これはファイルの内容に基づいているため、ファイルが変更されるたびに変更されます。
ジムラーデン2014

1

これは、VSを通じてセットアップは、デフォルトを取得するときに、新しい枠組みとして、将来的に誰かに便利になることがありweb.configweb.Debug.configそしてweb.Release.config。にweb.release.configこの行があります:

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

これは、私が行ったすべてのインライン変更をオーバーライドするように見えました。私はこの行をコメントアウトしました、そして私たちはグレイビーでした(「リリース」ビルドで縮小されていないコードを見るという点で)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.