issue with bundling and minification in ASP.net MVC

Question

I have bundled the required libraries as following.

bundles.Add(new ScriptBundle("~/bundles/libraries").Include(
                        "~/Content/js/jquery.1.10.2.js",
                        "~/Content/js/jquery.ui.1.10.3.js",
                        "~/Content/js/angular.js",
                        "~/Content/js/ng-grid-2.0.11.min.js",
                        "~/Content/js/ng-dialog.0.1.6.js",
                        "~/Content/js/underscore.1.5.0.js",
                        "~/Content/js/jquery.easyWizard.js",
                        "~/Content/js/bootstrap.js"));

and referred it as @Scripts.Render("~/bundles/libraries") in the _Layout but I am getting the following error:

Uncaught ReferenceError: jQuery is not defined

and Angular is not getting loaded.

The following code works:

<script src="~/Content/js/jquery.1.10.2.js"></script>
<script src="~/Content/js/jquery.ui.1.10.3.js"></script>
<script src="~/Content/js/angular.js"></script>
<script src="~/Scripts/Angular/ng-grid-2.0.11.min.js"></script>
<script src="~/Content/js/ng-dialog.0.1.6.js"></script>
<script src="~/Content/js/underscore.1.5.0.js"></script>
<script src="~/Content/js/botstrap.js.js"></script>
<script src="~/Content/js/jquery.easyWizard.js"></script>

Where did I went wrong?

Answer 1

I believe when you add multiple files in a bundle, the ordering may not be in the order you specified it. To ensure an exact order, you would have to create your own bundle orderer.

The easier way is to separate out your bundles so you can specify them in the exact order in your cshtml files. Also, some tips. Use {version} in your file name wherever you can, makes life easier when you get a new version of the file and use Bundle instead of ScriptBundle if there is already a minified version in the directory. It will use that instead of running the minifier for it again.

So do something like this:

bundles.Add(new Bundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js");

bundles.Add(new Bundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));
// etc...

Then in your _Layout.cshtml file, specify ~/bundles/jquery first, then the others in the order of the dependencies.