Force ASP.Net MVC Bundle to render the javascript files in a certain order Force ASP.Net MVC Bundle to render the javascript files in a certain order asp.net asp.net

Force ASP.Net MVC Bundle to render the javascript files in a certain order


Bundling by default will add the scripts alphabetically. It will move around known libraries and add them in the correct order (it will put jQuery in first, and then jQuery-ui, for example).

The easiest way is to order the scripts yourself. One way is to move off your custom scripts to a different folder, and then add all the scripts into their own bundle in the order you want:

public class BundleConfig{    public static void RegisterBundles(BundleCollection bundles)    {        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(                    "~/Scripts/js","*.js"));        bundles.Add(new ScriptBundle("~/bundles/myScripts").Include(            "~/Scripts/custom/scriptB.js",            "~/Scripts/custom/scriptA.js"));    }}

One other option is wildcards. This option still includes moving your custom scripts to their own folder, but only having one bundle (source):*

public class BundleConfig{    public static void RegisterBundles(BundleCollection bundles)    {               bundles.Add(new ScriptBundle("~/bundles/js").Include(            "~/Scripts/*.js",            "~/Scripts/custom/scriptB.js",            "~/Scripts/custom/scriptA.js"));    }}

Also concerning your comment "Is there any way to force @Script.Render() to render link tags in certain order without using separate bundle for each file" -- note that separate link tags is only happening in debug mode. Once you do deploy in release mode, there will only be one link tag and one file.


Write your own orderer as Darin Dimitrov answer in this question: How can I specify an explicit ScriptBundle include order?

public class MyBundleOrderer : IBundleOrderer{    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)    {        //any ordering logic here        return files;    }}


Have a look at BundleCollection.FileSetOrderList for ordering of bundeled files. I found this blog post about it: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx which explains it pretty good.

Example code for JQuery ordering:

BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("jquery");bundleFileSetOrdering1.Files.Add("jquery.js");bundleFileSetOrdering1.Files.Add("jquery-min.js");bundleFileSetOrdering1.Files.Add("jquery-*");bundleFileSetOrdering1.Files.Add("jquery-ui*");bundleFileSetOrdering1.Files.Add("jquery.ui*");bundleFileSetOrdering1.Files.Add("jquery.unobtrusive*");bundleFileSetOrdering1.Files.Add("jquery.validate*");bundles.FileSetOrderList.Add(bundleFileSetOrdering1);