CODEWITHSUNDEEP
asp.net.net-4.0asp.net-mvc-4bundlebundling-and-minification
Amir Ismail
Amir Ismail

Reputation: 3883

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

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) that call function in another file (File B) , when I am using
@Scripts.Render() method it render link tag for File A before File B so it fire an error and the script not work correctly.

Is there any way to force @Script.Render() to render link tags in certain order without using separate bundle for each file????

EDIT

I am using IncludeDirectory method to include all script files in that folder

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

Upvotes: 15

Views: 17699

Answers (4)

MikeSmithDev
MikeSmithDev

Reputation: 15797

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.

Upvotes: 9

Ori Calvo
Ori Calvo

Reputation: 526

You should consider using Cassette http://getcassette.net/ It supports auto detection of script dependencies based on script references found inside each file.

If you prefer sticking to MS Web Optimization solution but like the idea of arranging scripts based on script references you should read my post blog at http://blogs.microsoft.co.il/oric/2013/12/27/building-single-page-application-bundle-orderer/

Upvotes: 0

Arne H. Bitubekk
Arne H. Bitubekk

Reputation: 3043

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

Upvotes: 1

webdeveloper
webdeveloper

Reputation: 17288

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

Upvotes: 6

Related Questions