在捆绑包中订购脚本和 css，我应该使用 IEnumerable<BundleFile> 还是 IEnumerable<FileInfo>

Question

我正在开发一个 asp.net mvc-5 Web 应用程序。我有以下脚本和 css 文件包如下：-

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.min.js",
                     "~/Scripts/tm-scripts.js",
                     "~/Scripts/activeMenuItem.js",
                     "~/Scripts/respond.js"
                      ));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                     // "~/Content/style.css", 
                      "~/Content/touchTouch.css",
                      "~/fonts/font-awesome.css"));

现在我定义脚本和 css 的方式将导致脚本按字母顺序排列，而我希望脚本根据添加的方式进行排序。现在从我自己的阅读和搜索中我发现我可以使用IBundleOrderer. ro 定义订单。但正如这个问题所示link 似乎有两种方法可以使用IEnumerable<BundleFile> 或IEnumerable<FileInfo> 来实现这个，所以我需要遵循哪种方法？

第一种方法：-

class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

或者第二种方法：-

class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

Answer 1

首先，这不是直接回答您的问题，也不适合 cmets：

“通过通配符添加脚本默认按字母顺序加载它们，这通常不是您想要的。CSS 和 JavaScript 文件经常需要以特定（非字母）顺序添加。您可以缓解这种情况添加自定义 IBundleOrderer 实现会带来风险，但显式添加每个文件不太容易出错。"

参考号：ASP.Net Bundling and Minification

在实践中： 这是使我免于“已知库”的错误排序的“隐藏排序”。

 bundles.Add(new ScriptBundle("~/bundles/sitescripts").Include(

             //add my own scripts explicitly
             "~/Scripts/bscript.js",
             "~/Scripts/zscript.js",
             "~/Scripts/ascript.js",

             //purposely calling wrong order
             "~/Scripts/jquery.validate.js",
             "~/Scripts/jquery-{version}.js"
  ));

在 DEBUG 模式下，ASP.Net 将我从 "known libraries" by ordering them properly 的错误中解救出来。 HTML 源代码：

<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/bscript.js"></script>
<script src="/Scripts/zscript.js"></script>
<script src="/Scripts/ascript.js"></script>

• 为jquery 和jquery.validate 呈现正确的顺序
• 我对“我的脚本”的排序保持不变，没有按任何字母顺序（但 jquery 在我的脚本之前排序 - 更多内容见下文）

在 Production/Live 中（奇怪的是，行为与 DEBUG 不同，但实际上是我想要/期望的），“我的订单”（显式）被保留完全 并且已知库的默认排序正在发挥作用。

捆绑/缩小脚本的屏幕截图，Chrome 开发工具“美化”以提高可读性：

• 我的脚本的顺序被保留为明确添加在Bundle
• 包括“已知库”——它们是在我的脚本之后在Bundle 中明确添加的（但是这种行为与 DEBUG 不同）。
• 但是 ASP.net 仍然使我免于 已知库 的错误排序（jquery lib 在 validate 之前）

至于“为什么”DEBUG 和 PRODUCTION 行为不同（在 Debug 中，已知库在我的脚本之前排序），我不知道并且会推迟....

---

更新：

回到link/answer of Hao Kung，它提到了ResetAll()。所以有效地使用它：

• 删除任何默认排序
• 将完全遵循您的明确命令（它不会使您免于任何错误）
• DEBUG 和 PRODUCTION 中的一致行为

所以：

 public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.ResetAll(); //does what it says in DEBUG and Production

        bundles.Add(new ScriptBundle("~/bundles/sitescripts").Include(
                    "~/Scripts/bscript.js",
                    "~/Scripts/zscript.js",
                     "~/Scripts/ascript.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery-{version}.js"
                    ));

调试 HTML 源代码（完全保留，不保存排序错误）：

<script src="/Scripts/bscript.js"></script>
<script src="/Scripts/zscript.js"></script>
<script src="/Scripts/ascript.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>

生产屏幕截图（已美化并已在validate 中显示错误）：

第...