This project has moved. For the latest updates, please go here.

Minification of .less files

Oct 8, 2014 at 5:05 PM
I have tried two methods of minification

Through the assetHandler with the useNativeMinification="true"

This seems to work for a .less file that only imports flat css files.

However when used on a more complex less file with imports and variables etc. the less runs fine but I get no minification.

The second method was to use the bundle method. I am using XSLT to render pages and I have written an XSLT function to pass a CSV string of filesnames create a bundle and write a file returning the filepath for rendering.

This works great for Javascript and MicrosoftAjaxMinfication works a treat. the file gets refreshed every time application is reset, or if you pass a cmd in the URL.

When I use the same method for .less files I get errors where the .less has several imports of less files and the variables are defined on the first import and used on subsequent ones. Such as overriding bootstrap colors. It tells me the variable is not defined.

Any ideas on why either of these methods is not working for me ?
Coordinator
Oct 8, 2014 at 5:16 PM
Implement a MicrosoftAjaxCssMinifier as a postprocessor. As an example, use the source code of BundleTransformer.Autoprefixer module.
Oct 8, 2014 at 6:07 PM
I seem to be getting unpredictable results, sometimes it minifies perfectly sometimes not can't seem to get a handle on why.

I am focusing on the assetHandler method not the bundle.

Here is my config for CSS

<core>
  <css defaultPostProcessors="UrlRewritingCssPostProcessor,MicrosoftAjaxCssMinifier" defaultMinifier="NullMinifier" usePreMinifiedFiles="true" combineFilesBeforeMinification="false"> 
  <minifiers>
    <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core, Version=1.9.22.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" />
    <add name="MicrosoftAjaxCssMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxCssMinifier, BundleTransformer.MicrosoftAjax, Version=1.9.13.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" />
</minifiers>
<translators>
    <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core, Version=1.9.22.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" enabled="false" />
    <add name="LessTranslator" type="BundleTransformer.Less.Translators.LessTranslator, BundleTransformer.Less, Version=1.9.20.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" />
</translators>
<postProcessors>
    <add name="UrlRewritingCssPostProcessor" type="BundleTransformer.Core.PostProcessors.UrlRewritingCssPostProcessor, BundleTransformer.Core, Version=1.9.22.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" useInDebugMode="false" />
    <add name="MicrosoftAjaxCssMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxCssMinifier, BundleTransformer.MicrosoftAjax, Version=1.9.13.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" />
</postProcessors>
<fileExtensions><add fileExtension=".css" assetTypeCode="Css" /><add fileExtension=".less" assetTypeCode="Less" /></fileExtensions>
</css>
  <js defaultPostProcessors="" defaultMinifier="MicrosoftAjaxJsMinifier" usePreMinifiedFiles="true" combineFilesBeforeMinification="false"> <minifiers><add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core, Version=1.9.22.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" /><add name="MicrosoftAjaxJsMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxJsMinifier, BundleTransformer.MicrosoftAjax, Version=1.9.13.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" /></minifiers><translators><add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core, Version=1.9.22.0, Culture=neutral, PublicKeyToken=973C344C93AAC60D" enabled="false" /></translators><fileExtensions><add fileExtension=".js" assetTypeCode="JavaScript" /></fileExtensions></js>
</core>
<less useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" javascriptEnabled="true">
  <jsEngine name="MsieJsEngine" />
</less>
Coordinator
Oct 8, 2014 at 6:26 PM
You need to write your own version of MicrosoftAjaxCssMinifier (for example, MicrosoftAjaxCssPostProcessor) that implements the IPostProcessor interface or inheriting PostProcessorBase class.

And register it in the Web.config file as follows:
<configuration>
  …    
  <bundleTransformer …>
    <core …>
      <css
defaultPostProcessors="UrlRewritingCssPostProcessor,MicrosoftAjaxCssPostProcessor" …>
        <postProcessors>
          <add name="UrlRewritingCssPostProcessor"
type="BundleTransformer.Core.PostProcessors.UrlRewritingCssPostProcessor, 
BundleTransformer.Core"
            useInDebugMode="false" />
          <add name="MicrosoftAjaxCssPostProcessor"
type="BundleTransformer.MicrosoftAjax.PostProcessors.MicrosoftAjaxCssPostProcessor, 
BundleTransformer.MicrosoftAjax"
            useInDebugMode="true" />
        </postProcessors>
      </css>
      …
    </core>
    …
  </bundleTransformer>
  …
</configuration>
Turns attention to the value of useInDebugMode attribute.
Coordinator
Oct 9, 2014 at 7:28 AM
In principle, all that I have described still requires explicit creation of bundles. But still I recommend you to read in the documentation about the CustomBundleResolver class and postprocessors.
Through the assetHandler with the useNativeMinification="true"

This seems to work for a .less file that only imports flat css files.
In my test project completely minified the Bootstrap v3.2.0. What types of @import directives you use?
When I use the same method for .less files I get errors where the .less has several imports of less files and the variables are defined on the first import and used on subsequent ones. Such as overriding bootstrap colors. It tells me the variable is not defined.
This is a hack that does not works for translated languages.