Skip single file from Minifying?

Question

I'm trying to use ASP.Nets BundleTable to optomize some javascript files, but have run into a problem where a specific addon (jQuery-Timepicker) fails to work when the code has been minified. See here.

Bundle code is currently similar to:

// Add our commonBundle
var commonBundle= new Bundle("~/CommonJS" + culture.ToString());

// JQuery and related entries.
commonBundle.Include("~/Scripts/jquery-1.7.2.js");
commonBundle.Include("~/Scripts/jquery-ui-1.8.22.js");
commonBundle.Include("~/Scripts/jquery.cookie.js");
commonBundle.Include("~/Scripts/jquery-ui/jquery-ui-timepicker-addon.js"); // This is the one that does not work when bundled

// JS Transformer
commonBundle.Transforms.Add(new JsMinify());

BundleTable.Bundles.Add(commonBundle);

If I remove the jquery-ui-timepicker-addon.js file, then include it separate in my webpage, then it works properly. (Otherwise I get the Uncaught TypeError: undefined is not a function error).

I'm wondering if I can somehow setup my bundling code to skip minifying this one file (but still have it included in the bundle)? I've been looking around but have not come up with any solutions for doing so.

Answer 1

So the issue is that all the files are bundled together, and then the entire bundle is minimized. As a result you aren't going to easily be able to skip minification of just one file. Probably the best way to do this would be to create a new Transform that appended the contents of this file you want unminified. Then you would append this Transform to your registered ScriptBundle:

commonBundle.Transforms.Add(new AppendFileTransform(""~/Scripts/jquery-ui/jquery-ui-timepicker-addon.js""));

AppendFileTransform would simply append the contents of the file to the bundled response. You would no longer include the timepicker in the bundle explicitly, but instead this transform would be including it, and this would effectively give you the behavior you are looking since the JsMinify transform would run first and minify the bundle, and then you would add the file you want at the end unminified.

Answer 2

This can be solved better from the other direction - instead of trying to not minify a single file, add transforms for individual items instead.

First - create a class that implements IItemTransform and uses the same code to minify the given input:

public class JsItemMinify : System.Web.Optimization.IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        var min = new Microsoft.Ajax.Utilities.Minifier();
        var result = min.MinifyJavaScript(input);
        if (min.ErrorList.Count > 0)
            return "/*minification failed*/" + input;

        return result;
    }
}

Second - add this item transform to the individual files and remove the bundle transform:

var commonBundle= new Bundle("~/CommonJS");
// the first two includes will be minified
commonBundle.Include("~/Scripts/jquery-1.7.2.js", new JsItemMinify());
commonBundle.Include("~/Scripts/jquery-ui-1.8.22.js", new JsItemMinify());

// this one will not
commonBundle.Include("~/Scripts/jquery.cookie.js");

// Remove the default JsMinify bundle transform
commonBundle.Transforms.Clear();

BundleTable.Bundles.Add(commonBundle);

Answer 3

You cannot setup Bundle to skip minifying certain files and to minify rest of the files.

You could implement your own Bundle or Transform by overriding Bundle.ApplyTransform or JsMinify.Process methods, but you would need to take care not to break change-tracking of files, key generation, cache invalidation, etc... (or doing some ugly hack). It's not worth the effort.

I would keep separate js file, as you already mentioned.