<title>juplo - blog - Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<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>
<pre class="prettyprint linenums">
<code class="html">
- <link rel="stylesheet" type="text/css" href="styles.less" />
+ <link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
</code>
</pre>
<p>While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:</p>
<pre class="prettyprint linenums">
<code class="html">
- <link rel="stylesheet" type="text/css" href="styles.css" />
+ <link rel="stylesheet/less" type="text/css" href="styles.css" />
</code>
</pre>
<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>
projects / website / blobdiff