How to use bundle transformer to Minify CSS or JS

Question

I want to use bundle transformer to bundle and minify my css collection , but however i tried it doesn't work

heres my code, please give me some advise, thanks.

        var nullBuilder = new NullBuilder();
        var cssTransformer = new StyleTransformer(new CleanCssMinifier());
        var nullOrderer = new NullOrderer();

        BundleResolver.Current = new CustomBundleResolver();

        var commonStylesBundle = new Bundle("~/bundles/css/site");
        commonStylesBundle.IncludeDirectory("~/Content/sass", "*.css");

        commonStylesBundle.Builder = nullBuilder;
        commonStylesBundle.Transforms.Add(cssTransformer);
        commonStylesBundle.Orderer = nullOrderer;

        bundles.Add(commonStylesBundle);

it always output the html like this:

<link href="/Content/sass/card.css?bundleVirtualPath=%7e%2fbundles%2fcss%2fsite" rel="stylesheet"/>
<link href="/Content/sass/header.css?bundleVirtualPath=%7e%2fbundles%2fcss%2fsite" rel="stylesheet"/>
<link href="/Content/sass/login.css?bundleVirtualPath=%7e%2fbundles%2fcss%2fsite" rel="stylesheet"/>

Answer 1

you need to set debug mode as false in the config. Or alternatively do the following in code-

BundleTable.EnableOptimizations = true;