Tuesday, 19 November 2013

Using MVC 4 bundles & missing scripts

I have been working on page which is using MVC 4 and I thought that I will use build in feature that come out of box with System.Web.Optimization. Bundles make live easier as we can register our scripts in code and get nice minified file with all in one. There fore there is not so many trips from client to server to get one script one, next script etc.

From design we have to include many scripts such as:

<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/jquery.isotope.min.js"></script>
<script src="/Scripts/jquery.prettyPhoto.js"></script>
<script src="/Scripts/easing.js"></script>
<script src="/Scripts/jquery.lazyload.js"></script>
<script src="/Scripts/jquery.ui.totop.js"></script>
<script src="/Scripts/selectnav.js"></script>
<script src="/Scripts/ender.js"></script>
<script src="/Scripts/responsiveslides.min.js"></script>
<script src="/Scripts/custom.js"></script>

Next conversion is to razor:
    @Scripts.Render("~/Scripts/jquery.min.js")
    @Scripts.Render("~/Scripts/bootstrap.min.js")
    @Scripts.Render("~/Scripts/jquery.isotope.min.js")
    @Scripts.Render("~/Scripts/jquery.prettyPhoto.js")
    @Scripts.Render("~/Scripts/easing.js")
    @Scripts.Render("~/Scripts/jquery.lazyload.js")
    @Scripts.Render("~/Scripts/jquery.ui.totop.js")
    @Scripts.Render("~/Scripts/selectnav.js")
    @Scripts.Render("~/Scripts/ender.js")
    @Scripts.Render("~/Scripts/responsiveslides.min.js")
    @Scripts.Render("~/Scripts/custom.js")
Bundles are different:

        @Scripts.Render("~/bundles/site")

code in app_start / bundle config

 var scriptBundle = new ScriptBundle("~/bundles/site")
        "~/Scripts/jquery.min.js",
        "~/Scripts/bootstrap.min.js",
        "~/Scripts/jquery.isotope.min.js",
        "~/Scripts/jquery.prettyPhoto.js",
        "~/Scripts/easing.js",
        "~/Scripts/jquery.lazyload.js",
        "~/Scripts/jquery.ui.totop.js",
        "~/Scripts/selectnav.js",
        "~/Scripts/ender.js",
        "~/Scripts/responsiveslides.min.js",
        "~/Scripts/custom.js");
 bundles.Add(scriptBundle);
This will include all files in no specific order. Also will exclude all allready minified files.
And result will look like:
<script src="/Scripts/jquery.prettyPhoto.js"></script>
<script src="/Scripts/easing.js"></script>
<script src="/Scripts/jquery.lazyload.js"></script>
<script src="/Scripts/jquery.ui.totop.js"></script>
<script src="/Scripts/selectnav.js"></script>
<script src="/Scripts/ender.js"></script>
<script src="/Scripts/custom.js"></script>

I my case I do want to include minified files and order of scripts is important to me, as all depend on each other with specific order.

Final solution is:

bundles.IgnoreList.Clear();
Clears ignore list which contain definition for minified scripts.

bundles.FileSetOrderList.Clear();
Clears file set order list, will be displayed as they are registered.

 BundleTable.EnableOptimizations = true;
Force minification of the files registered.

        bundles.FileSetOrderList.Clear();
        bundles.IgnoreList.Clear();
            
            var scriptBundle = new ScriptBundle("~/bundles/site")
                   .Include("~/Scripts/jquery.min.js")
                   .Include("~/Scripts/bootstrap.min.js")
                   .Include("~/Scripts/jquery.isotope.min.js")
                   .Include("~/Scripts/jquery.prettyPhoto.js")
                   .Include("~/Scripts/easing.js")
                   .Include("~/Scripts/jquery.lazyload.js")
                   .Include("~/Scripts/jquery.ui.totop.js")
                   .Include("~/Scripts/selectnav.js")
                   .Include("~/Scripts/ender.js")
                   .Include("~/Scripts/responsiveslides.min.js")
                   .Include("~/Scripts/custom.js");
            bundles.Add(scriptBundle);
            BundleTable.EnableOptimizations = true;