<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
+ layout:decorator="/templates/layout"
+ th:with="uri='/blog/article.html'"
>
<head>
<title>juplo - blog - Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</title>
<!--/*-->
- <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>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <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>
- <ol layout:fragment="breadcrumb">
- <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
- <li class="b"><strong class="b">Blog</strong></li>
- </ol>
- <nav layout:fragment="navigation">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- <li class="m blog"><strong class="m">Blog</strong></li>
- <li class="m projects"><a href="../projects.html" th:href="@{/projects.html}" class="m">Projects</a></li>
- <li class="m about"><a href="../about.html" th:href="@{/about.html}" class="m">About</a></li>
- </ul>
- </nav>
+ <body thymeproxy:variables="MERGE:/thymeleaf/blog.json">
<article class="main" layout:fragment="maincontent">
<article id="post-140" class="post-140 post type-post status-publish format-standard hentry category-jetty category-less category-maven category-wro4j">
<div class="entry-header">
<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" />
- <script src="less.js" type="text/javascript"></script>
+ <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