Getting started with Wro4j filter and LessCSS

127 views
Skip to first unread message

Alex Black

unread,
Feb 28, 2012, 3:54:25 PM2/28/12
to wro4j
Hi, I'm trying to get runtime LESS css processing working in my maven
Scala (liftweb) project.

I'm looking at: http://code.google.com/p/wro4j/wiki/LessCssSupport

1. My css files are in src/main/resources/toserve/css
2. My web.xml file has the config from the page above, and:

<filter-mapping>
<filter-name>WebResourceOptimizer</filter-name>
<url-pattern>/wro/*</url-pattern>
</filter-mapping>

Can anyone give me an overview on how this should work? E.g.:
- does the url-pattern "/wro/*" mean the filter will listen for url
requests like <hostname>/wro/foo.less?
- where should I put my .less files, can i put them beside my css
files in src/main/resources/toserve/css?
- how I do I reference the compiled css files?

thx!

- Alex

Alex Objelean

unread,
Feb 28, 2012, 4:12:44 PM2/28/12
to wr...@googlegroups.com
lThe runtime approach works in a similar fashion as the build-time (maven plugin).

When you create a request with the following uri: /wro/groupName.css
wro4j will extract the name of the group and its type. For instance, in above example the extracted group name is called groupName, and the type of the resource is css.

The group name is important for lookup inside the wroModel (defined by default in wro.xml, but can be also defined programmatically or using a different DSL). Each group defines a collection of resources which will be merged and processed. 

As long as your model contains a group which refers the less resources located at whatever location, the outcome should be as expected.

For instance, your model can look like this (Groovy DSL):

groups {
   groupName {
       //classpath less resources
       css("classpath:toserve/css/**.less");   
       //webapp context relative resources
       css("/path/to/**.less");    
       //resources inside the WEB-INF folder
       css("/WEB-INF/protected/**.less");     
   }
}

When used, LessCssProcessor is invoked for all resource of type css. 
You must be aware that this can have bad impact on performance, since the Rhino is used to interpret js. 
One option to improve the processing time, is to apply the processor only on resources having a certain extension (ex: *.less). This can be achieved using a decorator (see ExtensionsAwareProcessorDecorator).

Let me know if you need more help.

Cheers,
Alex

Alex Black

unread,
Feb 28, 2012, 4:15:32 PM2/28/12
to wro4j
Thanks Alex, thats helpful.

You mentioned performance - does the filter cache output? I imagine
it would, then it would be just a one time hit per group I imagine?

- Alex

On Feb 28, 4:12 pm, Alex Objelean <alex.objel...@gmail.com> wrote:
> lThe runtime approach works in a similar fashion as the build-time (maven
> plugin).
>
> When you create a request with the following uri: /wro/groupName.css
> wro4j will extract the name of the group and its type. For instance, in
> above example the extracted group name is called *groupName*, and the type

Alex Objelean

unread,
Feb 28, 2012, 4:18:45 PM2/28/12
to wr...@googlegroups.com
That's correct. By default the in-memory caching is performed on per-group basis. 
You can disable or switch the cache implementation easily if you need.

Alex
Reply all
Reply to author
Forward
0 new messages