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

Question

I am working on an ASP.Net MVC 4 application and using Bundling and minifiction to render styles and script files.

I have a script file (File A) tha

Answer 1

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.