ASP.NET Bundles zum Deaktivieren der Minifizierung

Ich habe debug="true"in beiden web.config (s) , und ich möchte nur nicht, dass meine Bundles minimiert werden, aber nichts, was ich tue, scheint es zu deaktivieren. Ich habe versucht enableoptimisations=false, hier ist mein Code:

//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))

Wenn Sie debug="true"in web.configScripts/Styles.Render auf die Bundles auf Ihren Seiten verweisen und diese verwenden , sollte dies sowohl die Bündelung als auch die Minimierung deaktivieren. BundleTable.EnableOptimizations = falseschaltet immer sowohl die Bündelung als auch die Minimierung aus (unabhängig vom Debug-Flag true / false).

Verwenden Sie die Scripts/Styles.RenderHelfer vielleicht nicht ? Wenn Sie über direkt Verweise auf das Bundle rendern, erhalten BundleTable.Bundles.ResolveBundleUrl()Sie immer den minimierten / gebündelten Inhalt.

Anweisungen zur bedingten Kompilierung sind dein Freund:

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

Um die Bündelung und Minimierung zu deaktivieren, geben Sie einfach Ihre ASPX- Datei ein (dies deaktiviert die Optimierung, selbst wenn Sie sich debug=truein web.config befinden ).

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c # .net

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

Wenn Sie dies setzen, EnableOptimizations = truewird dies auch debug=truein web.config gebündelt und minimiert

Sie können die Minimierung in Ihren Bundles einfach deaktivieren, indem Sie Ihre Transformationen löschen.

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

Ich persönlich fand dies nützlich, wenn ich alle meine Skripte in einer einzigen Datei bündeln wollte, aber während der Debugging-Phasen Lesbarkeit benötigte.

Ich habe viele dieser Vorschläge ausprobiert, aber es schien zu funktionieren. Ich habe einige Stunden verschwendet, nur um herauszufinden, dass dies mein Fehler war:

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

Es hat mich immer minimiert und Javascript gebündelt, egal was ich versucht habe. Stattdessen hätte ich Folgendes verwenden sollen:

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

Das zusätzliche '~' hat es geschafft. Ich habe es sogar in nur einem Fall wieder entfernt, um zu sehen, ob es wirklich so war. Es war ... hoffentlich kann ich mindestens eine Person die Stunden sparen, die ich damit verschwendet habe.

Kombinieren Sie mehrere Antworten, dies funktioniert für mich in 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

Es gibt auch eine einfache Möglichkeit, die Minimierung (und andere Funktionen) manuell zu steuern. Es ist ein neuer CssMinify () - Transformator , der Folgendes verwendet:

// 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();

Dies ist praktisch, wenn Sie möchten, dass einige Bundles als Spezialteil nur minimiert werden. Angenommen, Sie verwenden einige Standardstile (jQuery), die Ihnen in die Quere kommen (und viele übermäßige Browseranforderungen an sie richten), aber Sie möchten Ihr eigenes Stylesheet nicht minimieren. (Das gleiche - mit Javascript).

Ich habe einige Antworten anderer in dieser Frage kombiniert, um eine andere alternative Lösung zu finden.

Ziel: Die Dateien immer zu bündeln, die JS- und CSS-Minimierung für den Fall zu deaktivieren <compilation debug="true" ... />und immer eine benutzerdefinierte Transformation auf das CSS-Bundle anzuwenden.

Meine Lösung :

1) In web.config : <compilation debug="true" ... />

2) In der Global.asax Application_Start () -Methode:

 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()));
     ...
}

Wenn Sie die folgende Eigenschaft auf false setzen, werden sowohl die Bündelung als auch die Minimierung deaktiviert.

In Global.asax.cs Datei, fügen Sie die Zeile wie unten erwähnt

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

So deaktivieren Sie die Minifizierung auf Bundle-Basis:

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

Nebenbemerkung: Die für Ihre Bundles verwendeten Pfade dürfen nicht mit einem tatsächlichen Pfad in Ihren veröffentlichten Builds übereinstimmen, da sonst nichts funktioniert. Vermeiden Sie außerdem die Verwendung von .js, .css und / oder '.' und '_' irgendwo im Namen des Bundles. Halten Sie den Namen so einfach und unkompliziert wie möglich, wie im obigen Beispiel.

Die Hilfsklassen sind unten aufgeführt. Beachten Sie, dass wir, um diese Klassen zukunftssicher zu machen, die Minimierungsinstanzen js / css chirurgisch entfernen, anstatt .clear () zu verwenden, und auch eine Mime-Type-Setter-Transformation einfügen, ohne die Produktions-Builds vor allem dann in Schwierigkeiten geraten, wenn Es geht darum, CSS-Bundles ordnungsgemäß zu übergeben (Firefox- und Chrome lehnen CSS-Bundles ab, wobei der MIME-Typ auf "Text / HTML" gesetzt ist, was die Standardeinstellung ist):

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;
        }
}

Damit das Ganze funktioniert, müssen Sie es installieren (via Nuget):

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

Und Ihre web.config sollte folgendermaßen angereichert werden:

<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>

Beachten Sie, dass Sie möglicherweise zusätzliche Schritte unternehmen müssen, damit Ihre CSS-Bundles in Bezug auf Schriftarten usw. funktionieren. Aber das ist eine andere Geschichte.

Um die bereits gegebenen Antworten zu ergänzen, sollten Sie auch einige Dateien NICHT minimieren / verschleiern / verketten, während Sie dennoch die vollständige Bündelung und Minimierung für andere Dateien zulassen. Verwenden Sie am besten einen benutzerdefinierten Renderer, der den Inhalt eines bestimmten Bundles liest (s) und rendern Sie die Dateien auf der Seite, anstatt den virtuellen Pfad des Bundles zu rendern. Ich persönlich habe dies benötigt, weil IE 9 $ *% im Bett war, als meine CSS-Dateien gebündelt wurden, obwohl die Minimierung deaktiviert war .

Vielen Dank an diesen Artikel , der mir den Ausgangspunkt für den Code gab, mit dem ich einen CSS-Renderer erstellt habe, der die Dateien für das CSS rendert, dem System jedoch ermöglicht, meine Javascript-Dateien gebündelt / minimiert / verschleiert zu rendern.

Erstellt die statische Hilfsklasse:

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);
    }
  }

}

Dann in der Rasiermesser-Layout-Datei:

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

anstelle des Standards:

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

Ich bin sicher, dass das Erstellen eines optionalen Renderers für Javascript-Dateien auch für die Aktualisierung dieses Hilfsprogramms nur wenig erforderlich ist.

Suchen Sie EnableOptimizationsin Ihrem Projekt nach einem Schlüsselwort

Also, wenn Sie finden

BundleTable.EnableOptimizations = true;

dreh es um false.

Wenn Sie die LESS / SASS-CSS-Transformation verwenden, gibt es eine Option, useNativeMinificationdie auf false gesetzt werden kann, um die Minimierung zu deaktivieren (in web.config). Für meine Zwecke ändere ich es hier nur, wenn es nötig ist, aber Sie können web.config-Transformationen verwenden, um es beim Release-Build immer zu aktivieren oder vielleicht einen Weg zu finden, es im Code zu ändern.

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

Tipp: Der springende Punkt dabei ist, Ihr CSS anzuzeigen, was Sie in den Browser-Inspektionstools oder durch einfaches Öffnen der Datei tun können. Wenn die Bündelung aktiviert ist, ändert sich der Dateiname bei jeder Kompilierung, sodass ich Folgendes oben auf meine Seite setze, damit ich mein kompiliertes CSS bei jeder Änderung problemlos in einem neuen Browserfenster anzeigen kann.

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

Dies wird eine dynamische URL sein https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1

Update: Ich habe eine web.config-Umwandlung erstellt, um sie während der Bereitstellung / Release-Erstellung auf true zu setzen

  <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>

Dies kann in Zukunft als neuen Rahmen für jemanden nützlich werden, wenn Setup durch VS, eine Standard wird web.config, web.Debug.configund web.Release.config. In der web.release.configfinden Sie diese Zeile:

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

Dies schien alle von mir vorgenommenen Inline-Änderungen außer Kraft zu setzen. Ich habe diese Zeile kommentiert und wir waren Sauce (in Bezug auf das Sehen von nicht minimiertem Code in einem "Release" Build)