WIP: less.js ausgebaut

[website] / dist / thymeleaf / blog / article.html

diff --git a/dist/thymeleaf/blog/article.html b/dist/thymeleaf/blog/article.html
index ff309e3..2873911 100644 (file)
--- a/dist/thymeleaf/blog/article.html
+++ b/dist/thymeleaf/blog/article.html
@@ -9,9 +9,9 @@
     <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/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"/>
+    <link rel="stylesheet" type="text/css" href="../../less/base.css"/>
+    <link rel="stylesheet" type="text/css" href="../../less/screen.css" media="screen"/>
+    <link rel="stylesheet" type="text/css" href="../../less/print.css" media="print"/>
     <script src="../../js/less-1.7.0.min.js"></script>
     <!--*/-->
   </head>
@@ -25,18 +25,18 @@
           </div><!-- .entry-meta -->
         </div><!-- .entry-header -->
         <div class="entry-content">
-          <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>
-          <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>
+          <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.csscss.org/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.csscss.org']);" title="See LESS CSS documentation for mor informations">LESS</a> to simplify your stylesheets?</p>
+          <p>You cannot do both, use the <a href="http://www.csscss.org/#usage" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.csscss.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>
           <pre class="prettyprint linenums">
   <code class="html">
-  &lt;link rel="stylesheet/less" type="text/css" href="styles.less" /&gt;
+  &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
   &lt;script src="../less.js" type="text/javascript"&gt;&lt;/script&gt;
   </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">
-  &lt;link rel="stylesheet/less" type="text/css" href="styles.css" /&gt;
+  &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
   </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>
@@ -50,13 +50,13 @@
   <code class="xml">
   &lt;groups xmlns="http://www.isdc.ro/wro"&gt;
     &lt;group name="base"&gt;
-      &lt;css&gt;/less/base/*.less&lt;/css&gt;
+      &lt;css&gt;/less/base/*.css&lt;/css&gt;
     &lt;/group&gt;
   </code>
           </pre>
-          <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>
+          <p>wro4j looks for <code>/less/base/*.css</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>
           <h3>wro.properties</h3>
-          <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>
+          <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>*.css</code>-sources into CSS and do that on <em>every request</em>:</p>
           <pre class="prettyprint linenums">
   <code class="properties">
   preProcessors=less4j