Ordering the scripts & css inside the bundle, should i use IEnumerable OR IEnumerable

Question

I am working on an asp.net mvc-5 web application. and i have the following bundle for scripts & css files as follow:-

  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"));

now the way i am defining the scripts & css will result in alphabetic ordering of the scripts, while i want the scripts to be ordered according to the way they are added. now from my own reading and search i found that i can use IBundleOrderer. ro define the order. but as shown on this question link seems there are 2 ways to implement this either using IEnumerable<BundleFile> OR IEnumerable<FileInfo> so which approach i need to follow?

First approach:-

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

OR second approach:-

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

Actually the link you provided describes when "ordering" is applied (if/when you use wildcards). There is also another ordering that [occurs for "known libraries" this post describes](http://stackoverflow.com/a/19461440/304683), so before you do anything, see if it applies to you. Hth... — EdSF, Sep 10 '15 at 00:06
@EdSF sorry I did not get your point,, now if I do not implement an IBundleOrderer then I can not 100% guarantee the order of the scripts even if I am not using wildcards and even if I use .Include and I include the scripts one by one inside the bundle. as the default bundle might give some scripts a highest priority. so to avoid this behaviour I have to implement my own IBundleOrderer ,, so my question was should I use IEnumerable OR IEnumerable ? — John John, Sep 10 '15 at 01:36

score 0 · Answer 1 · edited May 23 '17 at 11:58

First this isn't directly answering your question and won't fit in comments:

"Adding scripts by wildcard defaults to loading them in alphabetical order, which is typically not what you want. CSS and JavaScript files frequently need to be added in a specific (non-alphabetic) order. You can mitigate this risk by adding a custom IBundleOrderer implementation, but explicitly adding each file is less error prone."

REF: ASP.Net Bundling and Minification

In Practice: This is the "hidden ordering" that is saving me from this wrong ordering of "known libraries".

 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"
  ));

In DEBUG Mode, ASP.Net saves me from my error for "known libraries" by ordering them properly. HTML source:

<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>

the correct order is rendered for jquery and jquery.validate
my ordering for "my scripts" is untouched, not in any alphabetical order (but jquery is ordered before my scripts - more on this below)

In Production/Live (and oddly enough the behavior is different from DEBUG but is actually what I wanted/expect), "my order" (explicit) is preserved completely and the default ordering of known libraries is in play.

Screenshot of the bundled/minified script, that Chrome dev tools "prettyfied" for readability:

the order of my scripts are preserved as explicitly added in the Bundle
including "known libraries" - they are after my scripts as explicitly added in the Bundle (this behavior is different from DEBUG however).
but ASP.net still saves me from my wrong ordering of known libraries (jquery lib before validate)

As to "why" DEBUG and PRODUCTION differ in behavior (in Debug, known libraries are ordered before my scripts), I don't know and will defer....

Update:

Going back to the link/answer of Hao Kung, it mentions ResetAll(). So using it effectively:

removes any default ordering
will follow your explicit order fully (it will not save you from any error)
consistent behavior in DEBUG and PRODUCTION

So:

 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"
                    ));

Debug HTML source (fully preserved, no saving for ordering errors):

<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>

Production screen shot (prettyfied and already shows the error in validate):

Hth...

Ordering the scripts & css inside the bundle, should i use IEnumerable OR IEnumerable

1 Answers1

Update: