Do not minify certain files in ASP .NET MVC 4 BundleConfig

Question

I don't want to minify all the files I use in my ASP .NET MVC 4 solution. So for example I have this in my BundleConfig.cs:

bundles.Add(new StyleBundle("~/CSS/bootstrap").Include(
    "~/Content/Bootstrap/body.css",
    "~/Content/Bootstrap/bootstrap-responsive.css",
    "~/Content/Bootstrap/bootstrap-mvc-validation.css",
    "~/Content/Bootstrap/bootstrap-theme.css",
    "~/Content/Bootstrap/bootstrap.css"
    ));

...

And to minify it, of course I use:

BundleTable.EnableOptimizations = true;

So it works great.

But now, how could I minify all my files except one bundle? I have a problem with a bundle that removes some CSS classes and would like to not minify this one.

Any help would be greatly appreciated.

Answer 1

Use Transforms.Clear() to skip minification but keep the files bundled

//declare bundle
var bundle = new ScriptBundle("~/javascripts/ckEditor")
                .Include("~/Scripts/ckeditor/ckeditor.js")
                .Include("~/Scripts/ckeditor/config.js");

//skip transformation. Result is that files are only bundled, but not minified.
bundle.Transforms.Clear();

bundles.Add(bundle);

You also have to eliminate the .min.js files from the directory to prevent the substitution

Answer 2

I had a similar issue. the solution is to disable and enable minification in the view. for instance

@{
    BundleTable.EnableOptimizations = false;
 }

@Styles.Render("~/layout")
@RenderSection("CSS", false)

@{
    BundleTable.EnableOptimizations = true;
}

Answer 3

I don't know where the problem comes from but I tried to:

• Just bundle, not minify. It doesn't work.

  bundles.Add(new Bundle("~/CSS/bootstrap").Include(
      "~/Content/Bootstrap/body.css",
      "~/Content/Bootstrap/bootstrap-responsive.css",
      "~/Content/Bootstrap/bootstrap-mvc-validation.css",
      "~/Content/Bootstrap/bootstrap-theme.css",
      "~/Content/Bootstrap/bootstrap.css"
      ));
  

• Override UI errors. It works but it's just a temporary patch.

Finally, I decided to use standard CSS calls (and put some comments to explain why in the code):

<link rel="stylesheet" href="/Content/Bootstrap/body.css">
<link rel="stylesheet" href="/Content/Bootstrap/bootstrap-responsive.css">
<link rel="stylesheet" href="/Content/Bootstrap/bootstrap-mvc-validation.css">
<link rel="stylesheet" href="/Content/Bootstrap/bootstrap-theme.css">
<link rel="stylesheet" href="/Content/Bootstrap/bootstrap.css">

If you have a better idea, please let us know! :)