mvc4 bundle, how it is working?

Question

in mvc4 they use bundles to call all the scripts and css files once. as far as i know, the ordering of js and cs files is important when you call them. if i use bundles, how am i going to know if the css and js files are in the correct order inside the bundle? and can i customize the ordering?

i am having a problem with my datepicker now, it seems its css file/theme is not loading properly so i want to check how bundles order the css/js files... thanks :)

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

Answer 1

A late answer to that question, but ASP.NET MVC orders files by alphabetically. Also you can use IBundleOrderer interface to manually order your script files.

For example, use custom IBundleOrderer implementation like that :

Bundle myBundle = new Bundle("~/bundles/SiteScripts", new JsMinify());
myBundle.IncludeDirectory("~/Scripts/SiteScripts", "*.js");
myBundle.Orderer = new MyBundleOrderer();
bundles.Add(myBundle);

MyBundleOrderer takes high priority scripts from web.config file :

public class MyBundleOrderer : IBundleOrderer
{
    public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        if (ConfigurationManager.AppSettings["HighPriorityScripts"] != null)
        {
            string[] highPriorityScripts = ConfigurationManager.AppSettings["HighPriorityScripts"].Split(',');
            List<FileInfo> listFiles = new List<FileInfo>(files);
            List<FileInfo> orderedFiles = new List<FileInfo>();

            // Add high priority files in order : 
            foreach (string highPriorityFile in highPriorityScripts)
            {
                FileInfo nextFileInfo = listFiles.Find(delegate(FileInfo arg) 
                                {
                                    return arg.Name == highPriorityFile;
                                }
                              );
                if (nextFileInfo != null)
                {
                    orderedFiles.Add(nextFileInfo);
                }
            }

            // Add remaining files to bundle : 
            foreach (FileInfo lowPriorityFile in listFiles)
            {
                if (!orderedFiles.Contains(lowPriorityFile))
                {
                    orderedFiles.Add(lowPriorityFile);
                }
            }

            return orderedFiles;
        }
        return files;
    }
}

Answer 2

You can control the order of the "css" and "js" files by creating your own bundles as shown on this thread.

One important thing is you have to replace

BundleTable.Bundles.RegisterTemplateBundles();

with

BundleTable.Bundles.EnableDefaultBundles();

in Global.asax.cs