Bundle.config对调试,发布和缩小感到困惑

Question

我读了这篇文章http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification,我觉得它中缺少很多内容.

我正在开发一个使用未经编辑的javascript文件的项目.然而,当我决定将我的项目发布到另一台服务器时,这就成了一个问题,其中bundle.config劫持了我的javascript文件,做了一些我从未知道我需要测试我的开发的东西,现在我的开发机器抛出各种各样的javascript错误.所以现在,我在这里,阅读bundle.config对min文件的作用.

阅读完文章后,我做了以下假设:

如果我将项目设置为调试模式,我的项目将获得所有不包含任何"min.js"文件的javascript文件.

如果我将项目设置为发布模式,我的项目将尝试获取所有min.js文件,如果没有min.js文件,则非min文件将转换为缩小版本.

基于这两个假设,事实证明我错了.切换到Release模式对min文件没有任何作用,它的作用方式与我的Debug模式相同.

其次,进入web.config并将以下内容设置为false(以前为true):

<compilation debug="false" /> 

获取所有未缩小的文件并缩小它们,忽略我拥有的任何最小文件!我没有看到任何关于File.min.js的内容,我看到的就像是:"文件？v = dw-fikdksdm ..."这很好,因为这被认为是"捆绑"并且缩小了,但为什么我不能只看到我的分钟装？如果缩小和捆绑会引发javascript错误会怎样？那时我该怎么办？我可以阻止某些javascript文件不被包含在一个包中和/或缩小吗？

另外我注意到在尝试加载javascript资源时会发生一些403错误.

有人可以解释这里发生了什么以及为什么这违背了我原来的假设？

Answer 1

好的,这里有一些我发现的事情:

在调试模式下,您检查web.config:

 <system.web>
     <compilation debug="true">

那么所有的javascripts都将保存在bundle虚拟目录中(它们不会合并为一个文件,也不会缩小).

切换到释放模式时,切换到:

 <system.web>
     <compilation debug="false">

这样,捆绑包中的所有javascript文件都会缩小并编译成单个文件,这样可以减少到网络的往返次数.请注意,为每个捆绑包创建一个文件.

如果您想要启用优化而不管您是否处于调试模式,请设置BundleTable.EnableOptimizations = true,这会强制缩小和捆绑.如果您将其保留在代码之外,那么BundleConfig将查看web.config.

RegisterBundles(BundleCollection bundles) method in BundleConfig.cs, you put in:

    BundleTable.EnableOptimizations = true;
    bundles.UseCdn = true;
    var cssTransformer = new CssTransformer();
    var jsTransformer = new JsTransformer();
    var nullOrderer = new NullOrderer();

这就是你添加javascript文件的方式:

    var jqueryBundle = new CustomScriptBundle("~/bundles/jquery");
    jqueryBundle.IncludeDirectory("~/Scripts/JQuery", "*.js");
    jqueryBundle.Transforms.Add(jsTransformer);
    jqueryBundle.Orderer = nullOrderer;
    bundles.Add(jqueryBundle);

情侣笔记:

• Bundle.config确实忽略所有min文件.我添加了File.min.js和File.js,它忽略了File.min.js,它缩小了File.js并将其与捆绑包中包含的其他文件捆绑在一起.我检查过,因为当我自己缩小其中一个文件时,所有变量名称(不是结构化代码)与我在网站上下载的内容相比,与我在项目中包含的min文件完全不同.因此,这会验证项目中不需要min文件.
• Bundle.config忽略缩小任何名为这样的文件.."File.debug.js",这将永远不会缩小,事实上,它永远不会包含在您的项目中.我发现我的一个javascript文件从未进入网站后发现了这一点.

• 如果您使用"Content/css"作为您的包将出现的虚拟目录,则会发生403错误,这需要更改为"bundles/css",403将会像这样(使用razor)消失:

  @ Styles.Render( "〜/束/的CSS")

意思是如果你的代码中有这个(注意〜/ bundle/css的位置,这将是你的css文件将去的地方):

BundleTable.EnableOptimizations = true;

bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
#region CSS Styles
var cssBundle = new CustomStyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/Content/CSS", "*.css")
         .IncludeDirectory("~/Content/CSS/Override", "*.css");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(cssBundle);
#endregion

• 如果您的css具有相对路径,则也可能会更改,因此请查找404错误
• 并非所有缩小的文件都会按照您希望的方式运行..因此您必须最终执行半捆绑版本(或者您根本不需要缩小任何js,只需捆绑它们)

但是,如果您想继续执行缩小的javascript并且您不知道哪些文件引发了错误,则以下步骤将有所帮助:

1. 捆绑一切
2. 打开浏览器,找到捆绑的缩小js的所有来源
3. 将捆绑的js复制到另一个文件中
4. 开始使用标签而不是bundleconfig.cs手动插入javascript,并继续逐个添加它们直到一个失败..如果失败..那么你必须使用该项目的非缩小版本
5. 重复步骤3-4

我希望在撰写本文时有更好的bundle.config文档,但我发现整个体验非常令人失望.