Bundles rendering order not same as in Include

Question

I have the following bundle configured with my ASP MVC application.

bundles.Add(new ScriptBundle("~/Scripts/Core").Include(
                "~/Content/th/assets/global/plugins/jquery.min.js", // Should be first
                "~/Content/th/assets/global/plugins/bootstrap/js/bootstrap.min.js",
                "~/Content/th/assets/global/plugins/js.cookie.min.js",
                "~/Content/th/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
                "~/Content/th/assets/global/plugins/jquery.blockui.min.js",
                "~/Content/th/assets/global/plugins/jquery-ui/jquery-ui.min.js", // Should be after jquery.min.js
                "~/Content/th/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
                "~/Content/th/assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js",
                "~/Content/th/assets/pages/scripts/components-bootstrap-select.js",
                "~/Content/th/assets/pages/scripts/portlet-draggable.min.js",
                "~/Content/th/assets/global/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js",
                "~/Content/th/assets/global/plugins/po/jquery.webui-popover.min.js",
                "~/Content/th/assets/pages/scripts/components-bootstrap-multiselect.min.js",
                "~/Content/th/assets/pages/scripts/components-date-time-pickers.js"

Why does it output jquery-ui.min.js first ? How can I prevent this behavior as it generates javascript errors?

Here are the outputted lines from @Scripts.Render("~/Scripts/Core")

<script src="/Content/th/assets/global/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/Content/th/assets/global/plugins/jquery.min.js"></script>
<script src="/Content/th/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/th/assets/global/plugins/js.cookie.min.js"></script>
<script src="/Content/th/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/Content/th/assets/global/plugins/jquery.blockui.min.js"></script>
<script src="/Content/th/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/Content/th/assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="/Content/th/assets/pages/scripts/components-bootstrap-select.js"></script>
<script src="/Content/th/assets/pages/scripts/portlet-draggable.min.js"></script>
<script src="/Content/th/assets/global/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script src="/Content/th/assets/global/plugins/po/jquery.webui-popover.min.js"></script>
<script src="/Content/th/assets/pages/scripts/components-bootstrap-multiselect.min.js"></script>
<script src="/Content/th/assets/pages/scripts/components-date-time-pickers.js"></script>

score 4 · Accepted Answer · answered May 24 '17 at 09:02

For MVC5 version, to maintain the order as you expected you can use the below one

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

internal static class BundleExtensions
{
    public static Bundle ForceOrdered(this Bundle sb)
    {
        sb.Orderer = new AsIsBundleOrderer();
        return sb;
    }
}

And while bundling you mention .ForceOrdered() method to appear them in order you specified.

bundles.Add(new ScriptBundle("~/Scripts/Core").Include(
                "~/Content/th/assets/global/plugins/jquery.min.js", // Should be first
                "~/Content/th/assets/global/plugins/bootstrap/js/bootstrap.min.js",
                "~/Content/th/assets/global/plugins/js.cookie.min.js",
                "~/Content/th/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
                "~/Content/th/assets/global/plugins/jquery.blockui.min.js",
                "~/Content/th/assets/global/plugins/jquery-ui/jquery-ui.min.js", // Should be after jquery.min.js
                "~/Content/th/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
                "~/Content/th/assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js",
                "~/Content/th/assets/pages/scripts/components-bootstrap-select.js",
                "~/Content/th/assets/pages/scripts/portlet-draggable.min.js",
                "~/Content/th/assets/global/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js",
                "~/Content/th/assets/global/plugins/po/jquery.webui-popover.min.js",
                "~/Content/th/assets/pages/scripts/components-bootstrap-multiselect.min.js",
                "~/Content/th/assets/pages/scripts/components-date-time-pickers.js")
.ForceOrdered());

Bundles rendering order not same as in Include

1 Answers1