1 <%@page contentType="text/html;charset=UTF-8"%>
2 <%@page pageEncoding="UTF-8"%>
3 <%@page session="false" %>
4 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
5 <%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
6 <s:url var="base" value="/" />
7 <t:insertDefinition name="BASEPAGE">
8 <t:putAttribute name="title" value="" type="string"/>
9 <t:putAttribute name="breadcrumb">
10 <li class="b"><a class="b" href="${base}index.html">Home</a></li>
11 <li class="b"><strong class="b">Blog</strong></li>
13 <t:putAttribute name="navigation" type="string">
14 <h1 class="nav">Navigation</h1>
15 <h2 class="nav menu">Section-Menu</h2>
16 <ul id="menu" class="cf">
17 <li class="m blog"><strong class="m">Blog</strong></li>
18 <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
21 <t:putAttribute name="maincontent" type="string">
22 <article id="post-140" class="post-140 post type-post status-publish format-standard hentry category-jetty category-less category-maven category-wro4j">
23 <div class="entry-header">
24 <h1 class="entry-title">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</h1>
25 <div class="entry-meta">
26 Posted on <a href="http://juplo.de/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/" title="12:58" rel="bookmark"><time class="entry-date" datetime="2013-12-06T12:58:17+00:00" pubdate>December 6, 2013</time></a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://juplo.de/author/kai/" title="View all posts by Kai Moritz" rel="author">Kai Moritz</a></span></span>
27 </div><!-- .entry-meta -->
28 </div><!-- .entry-header -->
29 <div class="entry-content">
30 <p>Ever searched for a simple configuration, that lets you use your <a href="http://wiki.eclipse.org/Jetty/Feature/Jetty_Maven_Plugin" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://wiki.eclipse.org']);" title="See the documentation for mor information">jetty-maven-plugin</a> as you are used to, while working with <a href="http://www.lesscss.org/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.lesscss.org']);" title="See LESS CSS documentation for mor informations">LESS</a> to simplify your stylesheets?</p>
31 <p>You cannot do both, use the <a href="http://www.lesscss.org/#usage" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.lesscss.org']);" title="More about the client-side usage of LESS">Client-side mode</a> of LESS to ease development and use the <a href="https://github.com/marceloverdijk/lesscss-maven-plugin" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://github.com']);" title="Homepage of the official LESS CSS maven plugin">lesscss-maven-plugin</a> to automatically compile the LESS-sources into CSS for production. That does not work, because your stylesheets must be linked in different ways if you are switching between the client-side mode – which is best for development – and the pre-compiled mode – which is best for production. For the client-side mode you need something like:</p>
32 <pre class="prettyprint linenums">
34 <link rel="stylesheet/less" type="text/css" href="styles.less" />
35 <script src="less.js" type="text/javascript"></script>
38 <p>While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:</p>
39 <pre class="prettyprint linenums">
41 <link rel="stylesheet" type="text/css" href="styles.css" />
44 <p>While looking for a solution to this dilemma, I stumbled accross <a href="https://code.google.com/p/wro4j/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="See the documentation of ths wounderfull tool">wro4j</a>. Originally intended, to speed up page-delivery by combining and minimizing multiple resources into one through the use of a servlet-filter, this tool also comes with a maven-plugin, that let you do the same offline, while compiling your webapp.</p>
45 <p>The idea is, to use the <a href="http://code.google.com/p/wro4j/wiki/MavenPlugin" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="See the documentation of hte wro4j-maven-plugin">wro4j-maven-plugin</a> to compile and combine your LESS-sources into CSS for production and to use the <a href="http://code.google.com/p/wro4j/wiki/Installation" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="See how to configure the filter">wro4j filter</a>, to dynamically deliver the compiled CSS while developing. This way, you do not have to alter your HTML-code, when switching between development and production, because you always link to the CSS-files.</p>
46 <p>So, lets get dirty!</p>
47 <h2>Step 1: Configure wro4j</h2>
48 <p>First, we configure <strong>wro4j</strong>, like as we want to use it to speed up our page. The details are explained and linked on wro4j’s <a href="http://code.google.com/p/wro4j/wiki/GettingStarted" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="Visit the Getting-Started-Page">Getting-Started-Page</a>. In short, we just need two files: <strong>wro.xml</strong> and <strong>wro.properties</strong>.</p>
50 <p>wro.xml tells wro4j, which resources should be combined and how the result should be named. I am using the following configuration to generate all LESS-Sources beneath <code>base/</code> into one CSS-file called <code>base.css</code>:</p>
51 <pre class="prettyprint linenums">
53 <groups xmlns="http://www.isdc.ro/wro">
54 <group name="base">
55 <css>/less/base/*.less</css>
59 <p>wro4j looks for <code>/less/base/*.less</code> inside the root of the web-context, which is equal to <code>src/main/webapp</code> in a normal maven-project. There are <a href="http://code.google.com/p/wro4j/wiki/ResourceTypes" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="See the resource locator documentation of wro4j for more details">other ways to specifie the resources</a>, which enable you to store them elswhere. But this approach works best for our goal, because the path is understandable for both: the wro4j servlet-filter, we are configuring now for our development-environment, and the wro4j-maven-plugin, that we will configure later for build-time compilation.</p>
60 <h3>wro.properties</h3>
61 <p>wro.properties in short tells wro4j, how or if it should convert the combined sources and how it should behave. I am using the following configuration to tell wro4j, that it should convert <code>*.less</code>-sources into CSS and do that on <em>every request</em>:</p>
62 <pre class="prettyprint linenums">
63 <code class="properties">
68 <p>You can do a lot more here. There are countless <a href="http://code.google.com/p/wro4j/wiki/ConfigurationOptions" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', 'http://code.google.com']);" title="See all configuration options">configuration options</a> to fine-tune the behaviour of wro4j. The <code>disableCache=true</code> is crucial, because we would not see the changes take effect when developing with <strong>jetty-maven-plugin</strong> later on. You can also do much more with your resources here, for example <a href="https://code.google.com/p/wro4j/wiki/AvailableProcessors" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', 'http://code.google.com']);" title="See all available processors">minimizing</a>. But for our goal, we are now only intrested in the compilation of our LESS-sources.</p>
69 <h2>Step 2: Configure the wro4j servlet-filter</h2>
70 <p>Configuring the filter in the <strong>web.xml</strong> is easy. It is explained in wro4j’s <a href="https://code.google.com/p/wro4j/wiki/Installation" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', 'http://code.google.com']);" title="See the installation instructions for the wro4j servlet-filter">installation-insctuctions</a>. But the trick is, that we do not want to configure that filter for the production-version of our webapp, because we want to compile the resources offline, when the webapp is build. To acchieve this, we can use the <code><overrideDescriptor></code>-Parameter of the <a href="http://wiki.eclipse.org/Jetty/Feature/Jetty_Maven_Plugin#Configuring_Your_WebApp" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', 'http://wiki.eclipse.org']);" title="Read more about the configuration of the jetty-maven-plugin">jetty-maven-plugin</a>.</p>
71 <h2><overrideDescriptor></h2>
72 <p>This parameter lets you specify additional configuration options for the web.xml of your webapp. I am using the following configuration for my jetty-maven-plugin:</p>
73 <pre class="prettyprint linenums">
76 <groupId>org.eclipse.jetty</groupId>
77 <artifactId>jetty-maven-plugin</artifactId>
80 <overrideDescriptor>${project.basedir}/src/test/resources/jetty-web.xml</overrideDescriptor>
82 </configuration>
85 <groupId>ro.isdc.wro4j</groupId>
86 <artifactId>wro4j-core</artifactId>
87 <version>${wro4j.version}</version>
90 <groupId>ro.isdc.wro4j</groupId>
91 <artifactId>wro4j-extensions</artifactId>
92 <version>${wro4j.version}</version>
95 <groupId>javax.servlet</groupId>
96 <artifactId>servlet-api</artifactId>
99 <groupId>org.apache.commons</groupId>
100 <artifactId>commons-lang3</artifactId>
103 <groupId>commons-io</groupId>
104 <artifactId>commons-io</artifactId>
107 <groupId>commons-pool</groupId>
108 <artifactId>commons-pool</artifactId>
111 <groupId>org.springframework</groupId>
112 <artifactId>spring-web</artifactId>
115 <groupId>com.google.code.gson</groupId>
116 <artifactId>gson</artifactId>
119 <groupId>com.google.javascript</groupId>
120 <artifactId>closure-compiler</artifactId>
123 <groupId>com.github.lltyk</groupId>
124 <artifactId>dojo-shrinksafe</artifactId>
127 <groupId>org.jruby</groupId>
128 <artifactId>jruby-core</artifactId>
131 <groupId>org.jruby</groupId>
132 <artifactId>jruby-stdlib</artifactId>
135 <groupId>org.jruby</groupId>
136 <artifactId>jruby-stdlib</artifactId>
139 <groupId>me.n4u.sass</groupId>
140 <artifactId>sass-gems</artifactId>
143 <groupId>nz.co.edmi</groupId>
144 <artifactId>bourbon-gem-jar</artifactId>
147 <groupId>org.codehaus.gmaven.runtime</groupId>
148 <artifactId>gmaven-runtime-1.7</artifactId>
151 <groupId>org.webjars</groupId>
152 <artifactId>jshint</artifactId>
155 <groupId>org.webjars</groupId>
156 <artifactId>less</artifactId>
159 <groupId>org.webjars</groupId>
160 <artifactId>emberjs</artifactId>
163 <groupId>org.webjars</groupId>
164 <artifactId>handlebars</artifactId>
167 <groupId>org.webjars</groupId>
168 <artifactId>coffee-script</artifactId>
171 <groupId>org.webjars</groupId>
172 <artifactId>jslint</artifactId>
175 <groupId>org.webjars</groupId>
176 <artifactId>json2</artifactId>
179 <groupId>org.webjars</groupId>
180 <artifactId>jquery</artifactId>
184 </dependencies>
188 <p>The dependencies to <strong>wro4j-core</strong> and <strong>wro4j-extensions</strong> are needed by jetty, to be able to enable the filter defined below. Unfortunatly, one of the transitive dependencies of <code>wro4j-extensions</code> triggers an uggly error when running the jetty-maven-plugin. Therefore, all unneeded dependencies of <code>wro4j-extensions</code> are excluded, as a workaround for this error/bug.</p>
189 <h2>jetty-web.xml</h2>
190 <p>And my jetty-web.xml looks like this:</p>
191 <pre class="prettyprint linenums">
193 <?xml version="1.0" encoding="UTF-8"?>
194 <web-app xmlns="http://java.sun.com/xml/ns/javaee"
195 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
196 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
199 <filter-name>wro</filter-name>
200 <filter-class>ro.isdc.wro.http.WroFilter</filter-class>
202 <filter-mapping>
203 <filter-name>wro</filter-name>
204 <url-pattern>*.css</url-pattern>
205 </filter-mapping>
209 <p>The filter processes any URI’s that end with <code>.css</code>. This way, the wro4j servlet-filter makes <code>base.css</code> available under any path, because for exampl <code>/base.css</code>, <code>/css/base.css</code> and <code>/foo/bar/base.css</code> all end with <code>.css</code>.</p>
210 <p>This is all, that is needed to develop with dynamically reloadable compiled LESS-resources. Just fire up your browser and browse to <code>/what/you/like/base.css</code>. (But do not forget to put some LESS-files in <code>src/main/webapp/less/base/</code> first!)</p>
211 <h2>Step 3: Install wro4j-maven-plugin</h2>
212 <p>All that is left over to configure now, is the build-process. If you would build and deploy your webapp now, the CSS-file <code>base.css</code> would not be generated and the link to your stylesheet, that already works in our jetty-maven-plugin environment would point to a 404. Hence, we need to set up the <strong>wro4j-maven-plugin</strong>. I am using this configuration:</p>
213 <pre class="prettyprint linenums">
216 <groupId>ro.isdc.wro4j</groupId>
217 <artifactId>wro4j-maven-plugin</artifactId>
218 <version>${wro4j.version}</version>
219 <configuration>
220 <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
221 <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
222 </configuration>
225 <phase>package</phase>
227 <goal>run</goal>
234 <p>I connected the <code>run</code>-goal with the <code>package</code>-phase, because the statically compiled CSS-file is needed only in the final war. The <code>ConfigurableWroManagerFactory</code> tells wro4j, that it should look up further configuration options in our <code>wro.properties</code>-file, where we tell wro4j, that it should compile our LESS-resources. The <code><cssDestinationFolder></code>-tag tells wro4j, where it should put the generated CSS-file. You can adjust that to suite your needs.</p>
235 <p>That’s it: now the same CSS-file, which is created on the fly by the wro4j servlet-filter when using <code>mvn jetty:run</code> and, thus, enables dynamic reloading of our LESS-resources, is generated during the build-process by the wro4j-maven-plugin.</p>
236 <h2>Cleanup and further considerations</h2>
237 <h3>lesscss-maven-plugin</h3>
238 <p>If you already compile your LESS-resources with the lesscss-maven-plugin, you can stick with it and skip step 3. But I strongly recommend giving wro4j-maven-plugin a try, because it is a much more powerfull tool, that can speed up your final webapp even more.</p>
239 <h3>Clean up your mess </h3>
240 <p>With a configuration like the above one, your LESS-resources and wro4j-configuration-files will be packed into your production-war. That might be confusing later, because neither wro4j nor LESS is used in the final war. You can add the following to your <code>pom.xml</code> to exclude these files from your war for the sake of clarity:</p>
241 <pre class="prettyprint linenums">
244 <artifactId>maven-war-plugin</artifactId>
245 <configuration>
246 <warSourceExcludes>
249 </warSourceExcludes>
250 </configuration>
254 <h3>What’s next?</h3>
255 <p>We only scrached the surface, of what can be done with wro4j. Based on this configuration, you can easily enable additional features to fine-tune your final build for maximum speed. You really should take a look at the <a href="https://code.google.com/p/wro4j/wiki/AvailableProcessors" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', 'http://code.google.com']);" title="Available Processors">list of available Processors</a>!</p>
256 </div><!-- .entry-content -->
257 <footer class="entry-meta">
258 This entry was posted in <a href="http://juplo.de/category/jetty/" title="View all posts in Jetty" rel="category tag">Jetty</a>, <a href="http://juplo.de/category/less/" title="View all posts in less" rel="category tag">less</a>, <a href="http://juplo.de/category/maven/" title="View all posts in Maven" rel="category tag">Maven</a>, <a href="http://juplo.de/category/wro4j/" title="View all posts in wro4j" rel="category tag">wro4j</a>. Bookmark the <a href="http://juplo.de/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/" title="Permalink to Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources" rel="bookmark">permalink</a>.
259 </footer><!-- .entry-meta -->
260 </article><!-- #post-140 -->
261 <!-- You can start editing here. -->
262 <!-- If comments are open, but there are no comments. -->
264 <h3>Leave a Reply</h3>
265 <div id="cancel-comment-reply">
266 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/#respond" style="display:none;">Click here to cancel reply.</a></small>
268 <form action="http://juplo.de/wp-comments-post.php" method="post" id="commentform">
269 <p>Logged in as <a href="http://juplo.de/wp-admin/profile.php">Kai Moritz</a>. <a href="http://juplo.de/wp-login.php?action=logout&redirect_to=http%3A%2F%2Fjuplo.de%2Fcombining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources%2F&_wpnonce=09e5cb501d" title="Log out of this account">Log out »</a></p>
270 <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></small></p>-->
271 <p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
272 <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
273 <input type='hidden' name='comment_post_ID' value='140' id='comment_post_ID' />
274 <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
276 <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="2096655c89" /><script>(function() {
277 if (window === window.parent) {
278 document.getElementById('_wp_unfiltered_html_comment_disabled').name = '_wp_unfiltered_html_comment';
281 <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f31e001227" /></p>
284 <t:putAttribute name="marginalcontent" type="string">
285 <div id="secondary" class="widget-area" role="complementary">
286 <aside id="archives" class="widget">
287 <h1 class="widget-title">Archives</h1>
289 <li><a href='http://juplo.de/2013/10/' title='October 2013'>October 2013</a></li>
290 <li><a href='http://juplo.de/2013/08/' title='August 2013'>August 2013</a></li>
291 <li><a href='http://juplo.de/2013/01/' title='January 2013'>January 2013</a></li>
292 <li><a href='http://juplo.de/2012/11/' title='November 2012'>November 2012</a></li>
295 <aside id="categories" class="widget">
296 <h1 class="widget-title">Most Used Categories</h1>
298 <li class="cat-item cat-item-4"><a href="http://juplo.de/category/java/" title="View all posts filed under Java">Java</a> (6)</li>
299 <li class="cat-item cat-item-6"><a href="http://juplo.de/category/hibernate/" title="View all posts filed under Hibernate">Hibernate</a> (5)</li>
300 <li class="cat-item cat-item-8"><a href="http://juplo.de/category/maven/" title="View all posts filed under Maven">Maven</a> (5)</li>
301 <li class="cat-item cat-item-9"><a href="http://juplo.de/category/jpa/" title="View all posts filed under JPA">JPA</a> (1)</li>
302 <li class="cat-item cat-item-10"><a href="http://juplo.de/category/appengine/" title="View all posts filed under appengine">appengine</a> (1)</li>
303 <li class="cat-item cat-item-11"><a href="http://juplo.de/category/oauth2/" title="View all posts filed under oauth2">oauth2</a> (1)</li>
306 <aside id="search" class="widget widget_search">
307 <h1 class="widget-title">Search</h1>
308 <form role="search" method="get" id="searchform" class="searchform" action="http://juplo.de/">
310 <label class="screen-reader-text" for="s">Search for:</label>
311 <input type="text" value="" name="s" id="s" />
312 <input type="submit" id="searchsubmit" value="Search" />
316 </div><!-- #secondary .widget-area -->
317 <div id="tertiary" class="widget-area" role="supplementary">
318 </div><!-- #tertiary .widget-area -->
320 </t:insertDefinition>