I am trying to minifying javascript files using mvc4 bundle feature

Question

I want to bundle all my JavaScript files so it should hit to server only once. But with this I am facing a problem.

bundles.Add(new ScriptBundle("~/LayoutJs").Include(
                "~/Scripts/Libraries/jquery-1.8.2.min.js",
                "~/Scripts/Libraries/kendo/2013.1.319/kendo.all.min.js",
                "~/Scripts/Libraries/jquery.blockUI.js",
                "~/Scripts/Libraries/knockout/knockout-2.1.0.js",
                "~/Scripts/Libraries/knockout/knockout.mapping-latest.js",
                "~/Scripts/Libraries/jquery.unobtrusive-ajax.min.js",
                "~/Scripts/Libraries/tabStrip.js",
                "~/Scripts/Libraries/underscore-min.js",
                "~/Scripts/Libraries/knockout/knockout-kendo.min.js",
                "~/Scripts/Common.js"
                ));

I am getting error that jquery is not defined but i included jquery at the top of the bundle.

How can I resolve this issue?

Answer 1

I believe this is because you are trying to bundle min files. These files will get ignored by the MVC4 bundler.

The work around for this is to rename your files taking the .min out. Or create your own ignore patterns (see link).

https://stackoverflow.com/a/12005272/1593273

You could also upgrade to the 1.1-alpha1 release, where this has been fixed.

ASP.NET Web Optimization

Answer 2

Please first make sure that you have added scripts as like below

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery-1.7.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));

And make sure the above bundle is defined with in BundleConfig class as shown below:

public class BundleConfig
{
 public static void RegisterBundles(BundleCollection bundles)
 {


bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery-1.7.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));
 }
} 

"*" wildcard character is used to combines the files that are in the same directory and have same prefix or suffix with its name. Suppose you want to add all the scripts files that exist with in "~/Script" directory and have "jquery" as prefix then you can create bundle like below:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery*.js"));

All bundles are registered with in Application_Start event of Global.asax file of you web application.

protected void Application_Start()
{
 BundleConfig.RegisterBundles(BundleTable.Bundles);
 // code
}