juplo.de Git - website/blob - src/main/webapp/WEB-INF/views/blog/article.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3   <head>
   4     <meta charset="UTF-8" />
   5     <meta name="viewport" content="width=device-width" />
   6     <title>Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources | juplo</title>
   7     <link rel="profile" href="http://gmpg.org/xfn/11" />
   8     <link rel="pingback" href="http://juplo.de/xmlrpc.php" />
   9
  10     <link rel="alternate" type="application/rss+xml" title="juplo &raquo; Feed" href="http://juplo.de/feed/" />
  11 <link rel="alternate" type="application/rss+xml" title="juplo &raquo; Comments Feed" href="http://juplo.de/comments/feed/" />
  12
  13             <script type="text/javascript">//<![CDATA[
  14             // Google Analytics for WordPress by Yoast v4.3.3 | http://yoast.com/wordpress/google-analytics/
  15             var _gaq = _gaq || [];
  16             _gaq.push(['_setAccount', 'UA-571104-3']);
  17                                             _gaq.push(['_trackPageview']);
  18             (function () {
  19                 var ga = document.createElement('script');
  20                 ga.type = 'text/javascript';
  21                 ga.async = true;
  22                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  23
  24                 var s = document.getElementsByTagName('script')[0];
  25                 s.parentNode.insertBefore(ga, s);
  26             })();
  27             //]]></script>
  28                         <link rel="alternate" type="application/rss+xml" title="juplo &raquo; Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources Comments Feed" href="http://juplo.de/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/feed/" />
  29 <link rel='stylesheet' id='admin-bar-css'  href='http://juplo.de/wp-includes/css/admin-bar.min.css?ver=3.6.1' type='text/css' media='all' />
  30 <link rel='stylesheet' id='style-css'  href='http://juplo.de/wp-content/themes/juplo-theme/style.css?ver=3.6.1' type='text/css' media='all' />
  31 <script type='text/javascript' src='http://juplo.de/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
  32 <script type='text/javascript' src='http://juplo.de/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
  33 <script type='text/javascript' src='http://juplo.de/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
  34 <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://juplo.de/xmlrpc.php?rsd" />
  35 <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://juplo.de/wp-includes/wlwmanifest.xml" />
  36 <link rel='prev' title='hibernate4-maven-plugin 1.0.3 released!' href='http://juplo.de/hibernate4-maven-plugin-1-0-3-released/' />
  37 <meta name="generator" content="WordPress 3.6.1" />
  38 <link rel='canonical' href='http://juplo.de/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/' />
  39 <link rel='shortlink' href='http://juplo.de/?p=140' />
  40         <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
  41 <style type="text/css" media="print">#wpadminbar { display:none; }</style>
  42 <style type="text/css" media="screen">
  43         html { margin-top: 28px !important; }
  44         * html body { margin-top: 28px !important; }
  45 </style>
  46
  47     <link rel="stylesheet" type="text/css" href="/css/base.css" />
  48     <style type="text/css">
  49       @import '/css/screen.css' screen and (min-width: 960px);
  50       @import '/css/phone.css' screen and (max-width: 599px);
  51       @import '/css/tiny.css' screen and (max-width: 399px);
  52     </style>
  53     <script src="/js/base.js"></script>
  54     <!--[if IE 8]>
  55       <script src="/js/ie8.js"></script>
  56     <![endif]-->
  57     <!--[if IE 7]>
  58       <script src="/js/ie7.js"></script>
  59     <![endif]-->
  60     <!--[if lt IE 7]>
  61       <script src="/js/ie6.js"></script>
  62     <![endif]-->
  63
  64   </head>
  65   <body class="single single-post postid-140 single-format-standard logged-in admin-bar no-customize-support" onload="prettyPrint()">
  66     <div id="page">
  67       <header id="header">
  68         <a href="http://juplo.de/" title="juplo" rel="home" id="logo">juplo</a>
  69         <span id="slogan">Java bits from nerds for nerds</span>
  70         <hr class="h"/>
  71       </header>
  72     <div class="fc cols_2">
  73       <div class="content cf">
  74         <div id="content" class="main">
  75
  76 <article id="post-140" class="post-140 post type-post status-publish format-standard hentry category-jetty category-less category-maven category-wro4j">
  77     <div class="entry-header">
  78         <h1 class="entry-title">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</h1>
  79
  80         <div class="entry-meta">
  81             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>        </div><!-- .entry-meta -->
  82     </div><!-- .entry-header -->
  83
  84     <div class="entry-content">
  85         <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>
  86 <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 &#8211; which is best for development &#8211; and the pre-compiled mode &#8211; which is best for production. For the client-side mode you need something like:</p>
  87 <pre class="prettyprint linenums">\r
  88 <code class="html">\r
  89 &lt;link rel="stylesheet/less" type="text/css" href="styles.less" /&gt;\r
  90 &lt;script src="less.js" type="text/javascript"&gt;&lt;/script&gt;\r
  91 </code>\r
  92 </pre>
  93 <p>While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:</p>
  94 <pre class="prettyprint linenums">\r
  95 <code class="html">\r
  96 &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;\r
  97 </code>\r
  98 </pre>
  99 <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>
 100 <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>
 101 <p>So, lets get dirty!</p>
 102 <h2>Step 1: Configure wro4j</h2>
 103 <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&#8217;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>
 104 <h3>wro.xml</h3>
 105 <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>
 106 <pre class="prettyprint linenums">\r
 107 <code class="xml">\r
 108 &lt;groups xmlns="http://www.isdc.ro/wro"&gt;\r
 109   &lt;group name="base"&gt;\r
 110     &lt;css&gt;/less/base/*.less&lt;/css&gt;\r
 111   &lt;/group&gt;\r
 112 </code>\r
 113 </pre>
 114 <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>
 115 <h3>wro.properties</h3>
 116 <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>
 117 <pre class="prettyprint linenums">\r
 118 <code class="properties">\r
 119 preProcessors=less4j\r
 120 disableCache=true\r
 121 </code>\r
 122 </pre>
 123 <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>
 124 <h2>Step 2: Configure the wro4j servlet-filter</h2>
 125 <p>Configuring the filter in the <strong>web.xml</strong> is easy. It is explained in wro4j&#8217;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>&lt;overrideDescriptor&gt;</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>
 126 <h2>&lt;overrideDescriptor&gt;</h2>
 127 <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>
 128 <pre class="prettyprint linenums">\r
 129 <code class="xml">\r
 130 &lt;plugin&gt;\r
 131   &lt;groupId&gt;org.eclipse.jetty&lt;/groupId&gt;\r
 132   &lt;artifactId&gt;jetty-maven-plugin&lt;/artifactId&gt;\r
 133   &lt;configuration&gt;\r
 134     &lt;webApp&gt;\r
 135       &lt;overrideDescriptor&gt;${project.basedir}/src/test/resources/jetty-web.xml&lt;/overrideDescriptor&gt;\r
 136     &lt;/webApp&gt;\r
 137   &lt;/configuration&gt;\r
 138   &lt;dependencies&gt;\r
 139     &lt;dependency&gt;\r
 140       &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;\r
 141       &lt;artifactId&gt;wro4j-core&lt;/artifactId&gt;\r
 142       &lt;version&gt;${wro4j.version}&lt;/version&gt;\r
 143     &lt;/dependency&gt;\r
 144     &lt;dependency&gt;\r
 145       &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;\r
 146       &lt;artifactId&gt;wro4j-extensions&lt;/artifactId&gt;\r
 147       &lt;version&gt;${wro4j.version}&lt;/version&gt;\r
 148       &lt;exclusions&gt;\r
 149         &lt;exclusion&gt;\r
 150             &lt;groupId&gt;javax.servlet&lt;/groupId&gt;\r
 151             &lt;artifactId&gt;servlet-api&lt;/artifactId&gt;\r
 152         &lt;/exclusion&gt;\r
 153         &lt;exclusion&gt;\r
 154             &lt;groupId&gt;org.apache.commons&lt;/groupId&gt;\r
 155             &lt;artifactId&gt;commons-lang3&lt;/artifactId&gt;\r
 156         &lt;/exclusion&gt;\r
 157         &lt;exclusion&gt;\r
 158             &lt;groupId&gt;commons-io&lt;/groupId&gt;\r
 159             &lt;artifactId&gt;commons-io&lt;/artifactId&gt;\r
 160         &lt;/exclusion&gt;\r
 161         &lt;exclusion&gt;\r
 162             &lt;groupId&gt;commons-pool&lt;/groupId&gt;\r
 163             &lt;artifactId&gt;commons-pool&lt;/artifactId&gt;\r
 164         &lt;/exclusion&gt;\r
 165         &lt;exclusion&gt;\r
 166             &lt;groupId&gt;org.springframework&lt;/groupId&gt;\r
 167             &lt;artifactId&gt;spring-web&lt;/artifactId&gt;\r
 168         &lt;/exclusion&gt;\r
 169         &lt;exclusion&gt;\r
 170             &lt;groupId&gt;com.google.code.gson&lt;/groupId&gt;\r
 171             &lt;artifactId&gt;gson&lt;/artifactId&gt;\r
 172         &lt;/exclusion&gt;\r
 173         &lt;exclusion&gt;\r
 174             &lt;groupId&gt;com.google.javascript&lt;/groupId&gt;\r
 175             &lt;artifactId&gt;closure-compiler&lt;/artifactId&gt;\r
 176         &lt;/exclusion&gt;\r
 177         &lt;exclusion&gt;\r
 178             &lt;groupId&gt;com.github.lltyk&lt;/groupId&gt;\r
 179             &lt;artifactId&gt;dojo-shrinksafe&lt;/artifactId&gt;\r
 180         &lt;/exclusion&gt;\r
 181         &lt;exclusion&gt;\r
 182             &lt;groupId&gt;org.jruby&lt;/groupId&gt;\r
 183             &lt;artifactId&gt;jruby-core&lt;/artifactId&gt;\r
 184         &lt;/exclusion&gt;\r
 185         &lt;exclusion&gt;\r
 186           &lt;groupId&gt;org.jruby&lt;/groupId&gt;\r
 187           &lt;artifactId&gt;jruby-stdlib&lt;/artifactId&gt;\r
 188         &lt;/exclusion&gt;\r
 189         &lt;exclusion&gt;\r
 190             &lt;groupId&gt;org.jruby&lt;/groupId&gt;\r
 191             &lt;artifactId&gt;jruby-stdlib&lt;/artifactId&gt;\r
 192         &lt;/exclusion&gt;\r
 193         &lt;exclusion&gt;\r
 194             &lt;groupId&gt;me.n4u.sass&lt;/groupId&gt;\r
 195             &lt;artifactId&gt;sass-gems&lt;/artifactId&gt;\r
 196         &lt;/exclusion&gt;\r
 197         &lt;exclusion&gt;\r
 198             &lt;groupId&gt;nz.co.edmi&lt;/groupId&gt;\r
 199             &lt;artifactId&gt;bourbon-gem-jar&lt;/artifactId&gt;\r
 200         &lt;/exclusion&gt;\r
 201         &lt;exclusion&gt;\r
 202             &lt;groupId&gt;org.codehaus.gmaven.runtime&lt;/groupId&gt;\r
 203             &lt;artifactId&gt;gmaven-runtime-1.7&lt;/artifactId&gt;\r
 204         &lt;/exclusion&gt;\r
 205         &lt;exclusion&gt;\r
 206             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 207             &lt;artifactId&gt;jshint&lt;/artifactId&gt;\r
 208         &lt;/exclusion&gt;\r
 209         &lt;exclusion&gt;\r
 210             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 211             &lt;artifactId&gt;less&lt;/artifactId&gt;\r
 212         &lt;/exclusion&gt;\r
 213         &lt;exclusion&gt;\r
 214             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 215             &lt;artifactId&gt;emberjs&lt;/artifactId&gt;\r
 216         &lt;/exclusion&gt;\r
 217         &lt;exclusion&gt;\r
 218             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 219             &lt;artifactId&gt;handlebars&lt;/artifactId&gt;\r
 220         &lt;/exclusion&gt;\r
 221         &lt;exclusion&gt;\r
 222             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 223             &lt;artifactId&gt;coffee-script&lt;/artifactId&gt;\r
 224         &lt;/exclusion&gt;\r
 225         &lt;exclusion&gt;\r
 226             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 227             &lt;artifactId&gt;jslint&lt;/artifactId&gt;\r
 228         &lt;/exclusion&gt;\r
 229         &lt;exclusion&gt;\r
 230             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 231             &lt;artifactId&gt;json2&lt;/artifactId&gt;\r
 232         &lt;/exclusion&gt;\r
 233         &lt;exclusion&gt;\r
 234             &lt;groupId&gt;org.webjars&lt;/groupId&gt;\r
 235             &lt;artifactId&gt;jquery&lt;/artifactId&gt;\r
 236         &lt;/exclusion&gt;\r
 237       &lt;/exclusions&gt;\r
 238     &lt;/dependency&gt;\r
 239   &lt;/dependencies&gt;\r
 240 &lt;/plugin&gt;</code>\r
 241 </pre>
 242 <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>
 243 <h2>jetty-web.xml</h2>
 244 <p>And my jetty-web.xml looks like this:</p>
 245 <pre class="prettyprint linenums">\r
 246 <code class="xml">\r
 247 &lt;?xml version="1.0" encoding="UTF-8"?&gt;\r
 248 &lt;web-app xmlns="http://java.sun.com/xml/ns/javaee"\r
 249   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\r
 250   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"\r
 251   version="2.5"&gt;\r
 252   &lt;filter&gt;\r
 253     &lt;filter-name&gt;wro&lt;/filter-name&gt;\r
 254     &lt;filter-class&gt;ro.isdc.wro.http.WroFilter&lt;/filter-class&gt;\r
 255   &lt;/filter&gt;\r
 256   &lt;filter-mapping&gt;\r
 257     &lt;filter-name&gt;wro&lt;/filter-name&gt;\r
 258     &lt;url-pattern&gt;*.css&lt;/url-pattern&gt;\r
 259   &lt;/filter-mapping&gt;\r
 260 &lt;/web-app&gt;\r
 261 </code>\r
 262 </pre>
 263 <p>The filter processes any URI&#8217;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>
 264 <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>
 265 <h2>Step 3: Install wro4j-maven-plugin</h2>
 266 <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>
 267 <pre class="prettyprint linenums">\r
 268 <code class="xml">\r
 269 &lt;plugin&gt;\r
 270   &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;\r
 271   &lt;artifactId&gt;wro4j-maven-plugin&lt;/artifactId&gt;\r
 272   &lt;version&gt;${wro4j.version}&lt;/version&gt;\r
 273   &lt;configuration&gt;\r
 274     &lt;wroManagerFactory&gt;ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory&lt;/wroManagerFactory&gt;\r
 275     &lt;cssDestinationFolder&gt;${project.build.directory}/${project.build.finalName}/css/&lt;/cssDestinationFolder&gt;\r
 276   &lt;/configuration&gt;\r
 277   &lt;executions&gt;\r
 278     &lt;execution&gt;\r
 279       &lt;phase&gt;package&lt;/phase&gt;\r
 280       &lt;goals&gt;\r
 281         &lt;goal&gt;run&lt;/goal&gt;\r
 282       &lt;/goals&gt;\r
 283     &lt;/execution&gt;\r
 284   &lt;/executions&gt;\r
 285 &lt;/plugin&gt;\r
 286 </code>\r
 287 </pre>
 288 <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>&lt;cssDestinationFolder&gt;</code>-tag tells wro4j, where it should put the generated CSS-file. You can adjust that to suite your needs.</p>
 289 <p>That&#8217;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>
 290 <h2>Cleanup and further considerations</h2>
 291 <h3>lesscss-maven-plugin</h3>
 292 <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>
 293 <h3>Clean up your mess </h3>
 294 <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>
 295 <pre class="prettyprint linenums">\r
 296 <code class="xml">\r
 297 &lt;plugin&gt;\r
 298   &lt;artifactId&gt;maven-war-plugin&lt;/artifactId&gt;\r
 299   &lt;configuration&gt;\r
 300     &lt;warSourceExcludes&gt;\r
 301       WEB-INF/wro.*,\r
 302       less/**\r
 303     &lt;/warSourceExcludes&gt;\r
 304   &lt;/configuration&gt;\r
 305 &lt;/plugin&gt;\r
 306 </code>\r
 307 </pre>
 308 <h3>What&#8217;s next?</h3>
 309 <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>
 310             </div><!-- .entry-content -->
 311
 312     <footer class="entry-meta">
 313         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>.
 314     </footer><!-- .entry-meta -->
 315 </article><!-- #post-140 -->
 316
 317 <!-- You can start editing here. -->
 318
 319
 320                         <!-- If comments are open, but there are no comments. -->
 321
 322
 323
 324 <div id="respond">
 325
 326 <h3>Leave a Reply</h3>
 327
 328 <div id="cancel-comment-reply">
 329         <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>
 330 </div>
 331
 332
 333 <form action="http://juplo.de/wp-comments-post.php" method="post" id="commentform">
 334
 335
 336 <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&amp;redirect_to=http%3A%2F%2Fjuplo.de%2Fcombining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources%2F&amp;_wpnonce=09e5cb501d" title="Log out of this account">Log out &raquo;</a></p>
 337
 338
 339 <!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->
 340
 341 <p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
 342
 343 <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
 344 <input type='hidden' name='comment_post_ID' value='140' id='comment_post_ID' />
 345 <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
 346 </p>
 347 <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="2096655c89" /><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
 348 <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f31e001227" /></p>
 349 </form>
 350
 351 </div>
 352
 353         </div>
 354               <div class="marginal">
 355         <nav id="nav">
 356           <hr />
 357           <a id="navigation"></a>
 358         </nav>
 359         <div id="secondary" class="widget-area" role="complementary">
 360                                 <aside id="archives" class="widget">
 361               <h1 class="widget-title">Archives</h1>
 362               <ul>
 363                         <li><a href='http://juplo.de/2013/12/' title='December 2013'>December 2013</a></li>
 364         <li><a href='http://juplo.de/2013/10/' title='October 2013'>October 2013</a></li>
 365         <li><a href='http://juplo.de/2013/08/' title='August 2013'>August 2013</a></li>
 366         <li><a href='http://juplo.de/2013/01/' title='January 2013'>January 2013</a></li>
 367         <li><a href='http://juplo.de/2012/11/' title='November 2012'>November 2012</a></li>
 368               </ul>
 369             </aside>
 370             <aside id="categories" class="widget">
 371               <h1 class="widget-title">Most Used Categories</h1>
 372               <ul>
 373                         <li class="cat-item cat-item-4"><a href="http://juplo.de/category/java/" title="View all posts filed under Java">Java</a> (7)
 374 </li>
 375         <li class="cat-item cat-item-8"><a href="http://juplo.de/category/maven/" title="View all posts filed under Maven">Maven</a> (7)
 376 </li>
 377         <li class="cat-item cat-item-6"><a href="http://juplo.de/category/hibernate/" title="View all posts filed under Hibernate">Hibernate</a> (6)
 378 </li>
 379         <li class="cat-item cat-item-9"><a href="http://juplo.de/category/jpa/" title="View all posts filed under JPA">JPA</a> (1)
 380 </li>
 381         <li class="cat-item cat-item-10"><a href="http://juplo.de/category/appengine/" title="View all posts filed under appengine">appengine</a> (1)
 382 </li>
 383         <li class="cat-item cat-item-11"><a href="http://juplo.de/category/oauth2/" title="View all posts filed under oauth2">oauth2</a> (1)
 384 </li>
 385         <li class="cat-item cat-item-12"><a href="http://juplo.de/category/jetty/" title="View all posts filed under Jetty">Jetty</a> (1)
 386 </li>
 387         <li class="cat-item cat-item-13"><a href="http://juplo.de/category/wro4j/" title="View all posts filed under wro4j">wro4j</a> (1)
 388 </li>
 389         <li class="cat-item cat-item-14"><a href="http://juplo.de/category/less/" title="View all posts filed under less">less</a> (1)
 390 </li>
 391               </ul>
 392             </aside>
 393             <aside id="search" class="widget widget_search">
 394               <h1 class="widget-title">Search</h1>
 395               <form role="search" method="get" id="searchform" class="searchform" action="http://juplo.de/">
 396                                 <div>
 397                                         <label class="screen-reader-text" for="s">Search for:</label>
 398                                         <input type="text" value="" name="s" id="s" />
 399                                         <input type="submit" id="searchsubmit" value="Search" />
 400                                 </div>
 401                         </form>            </aside>
 402                   </div><!-- #secondary .widget-area -->
 403         <div id="tertiary" class="widget-area" role="supplementary">
 404                   </div><!-- #tertiary .widget-area -->
 405
 406       </div>
 407
 408       </div>
 409     </div>
 410           <footer id="footer">
 411         <hr />
 412         <ul id="footerlinks">
 413           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
 414         </ul>
 415       </footer>
 416     </div>
 417   </body>
 418 </html>
 419