ASP。NET捆绑如何禁用缩小

小开

条件编译指令是你的朋友:

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

小开

最佳答案

如果你在. config中有debug="true"，并且正在使用Scripts/Styles.Render来引用页面中的捆绑包，那么应该同时关闭捆绑和缩小。BundleTable.EnableOptimizations = false将总是同时关闭捆绑和缩小(不管调试true/false标志)。

你可能没有使用Scripts/Styles.Render helper ?如果你通过BundleTable.Bundles.ResolveBundleUrl()直接呈现对bundle的引用，你总是会得到缩小/捆绑的内容。

小开

要禁用捆绑和缩小，只需将此放入. aspx文件 (这将禁用优化，即使debug=true在. config中)

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c# . net

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

如果你放入EnableOptimizations = true，即使debug=true在. config中，它也会捆绑和缩小

小开

还有一些简单的方法可以手动控制缩小(和其他功能)。它是新的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也是如此)。

小开

你可以通过清除你的转换来关闭你的包的缩小。

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

我个人认为，当想要将所有脚本捆绑在一个文件中，但在调试阶段需要可读性时，这很有用。

小开

结合几个答案，这适用于我在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

小开

如果你正在使用LESS/SASS CSS转换，有一个选项useNativeMinification可以设置为false来禁用缩小(在web.config中)。就我的目的而言，我只是在需要时在这里更改，但你可以使用web。配置转换以在发布版本中始终启用它，或者在代码中找到修改它的方法。

<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

更新:我创建了一个网页。配置转换，在部署/发布构建期间为我将其设置为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>

小开

我尝试了很多这些建议，但似乎没有一个奏效。我浪费了好几个小时才发现这是我的错误:

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

它总是让我最小化和捆绑javascript，无论我尝试什么。相反，我应该用这个:

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

多出来的'~'起了作用。我甚至只在一个实例中删除了它，看看是否真的是它。这是……希望我能帮至少一个人省下浪费在这上面的时间。

小开

只是为了补充已经给出的答案，如果你还想不要缩小/混淆/连接一些文件，同时仍然允许完全捆绑和缩小其他文件，最好的选择是使用一个自定义渲染器，它将读取特定包的内容并渲染页面中的文件，而不是渲染包的虚拟路径。我个人需要这个，因为IE 9是$*%@ing床当我的CSS文件被绑定即使缩小功能被关闭。

非常感谢这篇文章，它给了我一个代码的起点，我用来创建一个CSS渲染器，它将渲染CSS文件，但仍然允许系统渲染我的javascript文件捆绑/缩小/混淆。

创建静态助手类:

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


}

然后在razor布局文件中:

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

而不是标准:

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

我确信为javascript文件创建一个可选的渲染器将需要很少的更新到这个帮助器。

小开

我综合了其他人在这个问题上给出的一些答案，提出了另一种解决方案。

目标:始终绑定文件，在<compilation debug="true" ... />事件中禁用JS和CSS缩小，并始终对CSS包应用自定义转换。

我的解决方案:

1)在. config: <compilation debug="true" ... /> < / p >

2)在全球。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()));
...
}

小开

如果您将以下属性设置为false，那么它将同时禁用捆绑和缩小。

在Global.asax.cs文件中，添加如下所示的行

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

小开

这在将来可能会对某些人有用，因为新框架在通过VS设置时，会获得默认的web.config， web.Debug.config和web.Release.config。在web.release.config中，你会发现这一行:

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

这似乎覆盖了我所做的任何内联更改。我把这一行注释掉了，我们很高兴(在“发布”构建中看到非最小化的代码)

小开

以下是如何在每个bundle的基础上禁用缩小:

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

附注:用于您的包的路径不能与您发布的构建中的任何实际路径一致，否则将无法工作。还要确保避免使用.js， .css和/或'。'和'_'在bundle名称中的任何位置。保持名称尽可能简单和直接，就像上面的例子一样。

助手类如下所示。请注意，为了使这些类不受未来影响，我们手术式地删除了js/css缩小实例，而不是使用.clear()，我们还插入了一个mime-type-setter转换，如果没有这个转换，生产构建一定会遇到麻烦，特别是在正确移交css-bundle时(firefox和chrome拒绝mime-type设置为"text/html"的css bundle;这是默认的):

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

< p > WebGrease 1.6.0 + Microsoft.AspNet.Web.Optimization 1.1.3 + < / p >

还有你的网。配置应该像这样丰富:

<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包在字体等方面工作。但那是另一回事了。

小开

在项目中搜索EnableOptimizations关键字

所以如果你发现

BundleTable.EnableOptimizations = true;

把它false。

禁用缩小，并且它还完全禁用捆绑