Compile LESS"

From Documentation
Line 8: Line 8:
  
 
If you prefer to use DSP page, here we introduce how to compile LESS to DSP files by Ant and Maven.
 
If you prefer to use DSP page, here we introduce how to compile LESS to DSP files by Ant and Maven.
 +
 +
Noted Node.js is now required since ZK 7.0.3. Please follow the instruction provided by the [http://nodejs.org/ official-website] to install Node.js
  
 
== Compile LESS by Ant ==
 
== Compile LESS by Ant ==
 
+
* Have Node.js installed in your environment.
 
* Follow the online [http://ant.apache.org/manual/install.html document] to install Apache Ant.
 
* Follow the online [http://ant.apache.org/manual/install.html document] to install Apache Ant.
* Download the following necessary jars in your '''''project/lib''''' folder from [http://github.com/zkoss/zk/tree/v7.0.0-Preview/dist/lib/ext zk repository] (right click -> save as).
+
* Download the following necessary jars in your '''''project/lib''''' folder from [https://github.com/zkoss/zk/tree/7.0-Stable/dist/lib/ext zk repository] (right click -> save as).
** commons-logging.jar
 
** js.jar
 
** lesscss-engine.jar
 
 
** yuicompressor.jar
 
** yuicompressor.jar
 
** zkjszips.jar
 
** zkjszips.jar
** zkless.jar (extension from [http://www.asual.com/lesscss/ lesscss-engine])
+
** commons-io.jar
 +
** CssCompressor.jar
 
** zul.jar (extract zk-bin-7.0.X.zip file from [http://sourceforge.net/projects/zk1/files/ZK/ sourceforge])
 
** zul.jar (extract zk-bin-7.0.X.zip file from [http://sourceforge.net/projects/zk1/files/ZK/ sourceforge])
 +
* Execute the following command under your project folder to install ZK-Less' node package.
 +
<source lang=bash>
 +
cd projectroot
 +
npm install zkless-engine
 +
</source>
 
* Write an ant script '''''build.xml''''' file like the following sample under project folder, and change the input folder and output folder as needed.
 
* Write an ant script '''''build.xml''''' file like the following sample under project folder, and change the input folder and output folder as needed.
 
<source lang="xml">
 
<source lang="xml">
 
<?xml version="1.0"?>
 
<?xml version="1.0"?>
 
<project name="less.compile" default="lessc" basedir=".">
 
<project name="less.compile" default="lessc" basedir=".">
    <target name="lessc">
+
<target name="lessc">
        <java classname="CpLess" fork="true">
+
<exec executable="node">
            <arg value="${basedir}/src/main/webapp/less"/><!-- input folder that contains less file -->
+
<arg value="${basedir}/node_modules/zkless-engine/lib/CpLess.js" /> <!-- location of the engine's core file -->
             <arg value="${basedir}/src/main/webapp/less"/><!-- output folder -->
+
<arg value="${basedir}/src/main/webapp"/>   <!-- input folder that contains less files-->
             <classpath>
+
             <arg value="${basedir}/src/main/webapp"/>   <!-- output folder -->
                <pathelement location="${basedir}/lib/commons-logging.jar"/>
+
             <arg value="${basedir}/lib/zul.jar"/>    <!-- path of zul.jar -->
                 <pathelement location="${basedir}/lib/js.jar"/>
+
</exec>
                <pathelement location="${basedir}/lib/lesscss-engine.jar"/>
+
                 <!-- compress the result using zk's Css Compressor -->
                <pathelement location="${basedir}/lib/yuicompressor.jar"/>
+
<java classname="CompressCss" fork="true">
                <pathelement location="${basedir}/lib/zkjszips.jar"/>
+
<arg value="${basedir}/src/main/webapp"/>    <!-- input folder (same as above) -->
                <pathelement location="${basedir}/lib/zkless.jar"/>
+
<arg value="${basedir}/src/main/webapp"/>    <!-- output folder (same as above) -->
                <pathelement location="${basedir}/lib/zul.jar"/><!-- only needed if using _zkmixins.less -->
+
<classpath>
            </classpath>
+
    <!-- required jars -->
        </java>
+
    <pathelement location="${basedir}/lib/zkjszips.jar"/>
    </target>
+
    <pathelement location="${basedir}/lib/yuicompressor.jar"/>
 +
    <pathelement location="${basedir}/lib/commons-io.jar"/>
 +
    <pathelement location="${basedir}/lib/CssCompressor.jar"/>
 +
</classpath>
 +
</java>
 +
</target>
 
</project>
 
</project>
 
</source>
 
</source>
* Execute '''<tt>ant</tt>''' command in command line tool.
+
* Execute '''<tt>ant</tt>''' command in command line tool, i.e:
 +
<source lang=bash>
 +
cd projectroot
 +
ant lessc
 +
</source>
  
 
== Compile LESS by Maven ==
 
== Compile LESS by Maven ==
 
+
* Have Node.js installed in your environment.
 +
* Execute the following command to install the native less engine by Less.js
 +
<source lang=bash>
 +
npm install -g less
 +
</source>
 
* Modify pom.xml in maven project
 
* Modify pom.xml in maven project
 
<source lang="xml">
 
<source lang="xml">
Line 60: Line 78:
 
<groupId>org.zkoss.zk</groupId>
 
<groupId>org.zkoss.zk</groupId>
 
<artifactId>zul</artifactId>
 
<artifactId>zul</artifactId>
<version>7.0.0</version>
+
<version>7.0.3</version>
 
</dependency>
 
</dependency>
 
</dependencies>
 
</dependencies>
Line 69: Line 87:
 
<groupId>org.zkoss.maven</groupId>
 
<groupId>org.zkoss.maven</groupId>
 
<artifactId>zkless-engine-maven-plugin</artifactId>
 
<artifactId>zkless-engine-maven-plugin</artifactId>
<version>0.8.3</version>
+
<version>0.9.2</version>
 
<executions>
 
<executions>
 
<execution>
 
<execution>

Revision as of 04:17, 29 August 2014


Compile LESS to CSS

If your LESS files don't use any DSP functions, you can simply compile it by following instruction on the LESS official website. Or, if you prefer to compile LESS from java, you can use lesscss-engine developed by Asual DZZD.

Compile LESS to DSP

If you prefer to use DSP page, here we introduce how to compile LESS to DSP files by Ant and Maven.

Noted Node.js is now required since ZK 7.0.3. Please follow the instruction provided by the official-website to install Node.js

Compile LESS by Ant

  • Have Node.js installed in your environment.
  • Follow the online document to install Apache Ant.
  • Download the following necessary jars in your project/lib folder from zk repository (right click -> save as).
    • yuicompressor.jar
    • zkjszips.jar
    • commons-io.jar
    • CssCompressor.jar
    • zul.jar (extract zk-bin-7.0.X.zip file from sourceforge)
  • Execute the following command under your project folder to install ZK-Less' node package.
cd projectroot
npm install zkless-engine
  • Write an ant script build.xml file like the following sample under project folder, and change the input folder and output folder as needed.
<?xml version="1.0"?>
<project name="less.compile" default="lessc" basedir=".">
	<target name="lessc">
		<exec executable="node">
			<arg value="${basedir}/node_modules/zkless-engine/lib/CpLess.js" /> 	<!-- location of the engine's core file -->
			<arg value="${basedir}/src/main/webapp"/> 	  <!-- input folder that contains less files-->
            <arg value="${basedir}/src/main/webapp"/>	  <!-- output folder -->
            <arg value="${basedir}/lib/zul.jar"/>    <!-- path of zul.jar -->
		</exec>
                <!-- compress the result using zk's Css Compressor -->
		<java classname="CompressCss" fork="true">
			<arg value="${basedir}/src/main/webapp"/>    <!-- input folder (same as above) -->
			<arg value="${basedir}/src/main/webapp"/>    <!-- output folder (same as above) -->
			<classpath>
			    <!-- required jars -->
			    <pathelement location="${basedir}/lib/zkjszips.jar"/>
			    <pathelement location="${basedir}/lib/yuicompressor.jar"/>
			    <pathelement location="${basedir}/lib/commons-io.jar"/>
			    <pathelement location="${basedir}/lib/CssCompressor.jar"/>
			</classpath>
		</java>
	</target>
</project>
  • Execute ant command in command line tool, i.e:
cd projectroot
ant lessc

Compile LESS by Maven

  • Have Node.js installed in your environment.
  • Execute the following command to install the native less engine by Less.js
npm install -g less
  • Modify pom.xml in maven project
<!-- Add Plugin Repository -->
<pluginRepositories>
	<pluginRepository>
		<id>zkmaven</id>
		<name>ZK Maven Plugin Repository</name>
		<url>http://mavensync.zkoss.org/maven2/</url>
	</pluginRepository>
</pluginRepositories>
<dependencies>
	<!-- only needed if using _zkmixins.less provided by ZK -->
	<dependency>
		<groupId>org.zkoss.zk</groupId>
		<artifactId>zul</artifactId>
		<version>7.0.3</version>
	</dependency>
</dependencies>
<build>
	<plugins>
		<!-- Add zkless-engine-maven-plugin -->
		<plugin>
			<groupId>org.zkoss.maven</groupId>
			<artifactId>zkless-engine-maven-plugin</artifactId>
			<version>0.9.2</version>
			<executions>
				<execution>
					<id>compile-less</id>
					<goals>
						<goal>lessc</goal>
					</goals>
					<configuration>
						<!-- LESS source folder -->
						<sourceDirectory>${project.basedir}/src/main/resources</sourceDirectory>
						<!-- *.CSS.DSP output folder -->
						<outputDirectory>${project.basedir}/src/main/resources</outputDirectory>
					</configuration>
				</execution>
			</executions>
		</plugin>
	</plugins>
</build>
  • Execute mvn install command to trigger LESS compilation.

Compile LESS to DSP during Development phase

It is not friendly to debug LESS during development by running Ant or Maven each time you modify LESS files. Therefore, we provide a servlet named ZKLessServlet that can be used in web project to develop LESS by simply refreshing the browser page.

Note: This is only recommended in development environment.

Steps to use ZKLessServlet within a Maven Project:

  • Add maven dependency if you are using maven.
<repositories>
    <repository>
        <id>ZK CE</id>
        <name>ZK CE Repository</name>
        <url>http://mavensync.zkoss.org/maven2</url>
    </repository>
    <!-- omitted other repository -->
</repositories>
<dependencies>
    <dependency>
        <groupId>org.zkoss.maven</groupId>
        <artifactId>zkless-servlet</artifactId>
        <version>0.8.3</version>
    </dependency>
    <!-- omitted other dependency -->
</dependencies>
  • Add servlet settings in web.xml
<web-app>
    <!-- omitted other servlets -->
    <servlet>
        <servlet-name>zkLess</servlet-name>
        <servlet-class>org.zkoss.less.ZKLessServlet</servlet-class>
        <init-param>
            <param-name>org.zkoss.less.LessResource</param-name>
            <param-value>/less</param-value><!-- specify to the folder that contains *.less -->
        </init-param>
        <init-param>
            <param-name>org.zkoss.less.OutputFormat</param-name>
            <param-value>.css.dsp</param-value><!-- specify output file suffix, default .css.dsp -->
        </init-param>
        <init-param>
            <param-name>org.zkoss.less.CompressOutput</param-name>
            <param-value>true</param-value><!-- compress output, default true -->
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>zkLess</servlet-name>
        <url-pattern>/less/*</url-pattern><!-- specify to folder that contains *.less -->
    </servlet-mapping>
</web-app>
  • Project structure and use LESS directly in zul page.
Project structure should look like the following:
zkMavenWebProject - src/main/webapp
    WEB-INF
        web.xml
        zk.xml
    less
        test.less
    pages
        test.zul
Use test.less inside test.zul as follows
<!-- test.zul -->
<?link rel="stylesheet" href="../less/test.less"?>
<zk>
    <button label="test" />
</zk>
  • Now you can modify LESS and see the result by refreshing your browser page.

Version History

Last Update : 2014/08/29


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.