Introduction
We introduced a new ZK-Less Engine built on Node.js in the release of ZK 7.0.3.
The new Engine will have a much faster compiling speed. You will need to install Node.js
in your environment in order to use it. If you have not tried ZK-Less features yet, please
take a quick look at How ZK Works With LESS. If you are not familiar with Less in general,
please refer to the official site.
Installation Requirements
ZK version: 7.0+
Node.js version: 0.10.30 +
Node.js is required for the new Less Engine. For details on how to install Node, please refer
to the official site of Node.js.
How to use
Depending on your developing preferences, we provide two different approaches to use our less
engine.
The Ant approach:
First, please download the following jars from zk’s repository and copy them into your
${Project_Root}/lib directory.
Required Jars:
- yuicompressor.jar
- zkjszips.jar
- commons-io.jar
- CssCompressor.jar
- zul.jar (extract zk-bin-7.0.X.zip file from Download ZK)
Next, install our ZK-Less Engine’s node package by npm (Node Package Manager) in a project folder like the following:
npm install zkless-engine
Write an Ant script build.xml like the following:
<?xml version="1.0"?>
<project name="less.compile" default="lessc" basedir=".">
<target name="lessc">
<exec executable="node">
<!-- location of the engine's core file -->
<arg value="${basedir}/node_modules/zkless-engine/lib/CpLess.js"/>
<!-- input folder that contains less files-->
<arg value="${basedir}/src/main/webapp"/>
<!-- output folder -->
<arg value="${basedir}/src/main/webapp"/>
<!-- path of zul.jar -->
<arg value="${basedir}/lib/zul.jar"/>
</exec>
<!-- compress the result using zk's Css Compressor -->
<java classname="CompressCss" fork="true">
<!-- input folder (same as above) -->
<arg value="${basedir}/src/main/webapp"/>
<!-- output folder (same as above) -->
<arg value="${basedir}/src/main/webapp"/>
<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 the Ant command to compile your Less files:
ant lessc
The Maven approach:
We have built a maven plugin for our Less Engine. To use this plugin, install the native Less Engine first:
npm install -g less
Note that the less package has to be installed as a global package (with the -g ).
Next, include a plugin declaration in your pom file:
<!-- 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.4</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>
Last, execute mvn install command to compile your Less files.
Compile Less files during your development
We also have a Servlet called ZKLessServlet for development use.
To use it, first, add maven dependency in your pom file.
<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.9.4.2</version>
</dependency>
<!-- omitted other dependency -->
</dependencies>
Second, include servlet settings and mappings in web.xml like the following:
<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>
<!-- specify to the folder that contains *.less -->
<param-value>/less</param-value>
</init-param>
<init-param>
<param-name>org.zkoss.less.OutputFormat</param-name>
<!-- specify output file suffix, default .css.dsp -->
<param-value>.css.dsp</param-value>
</init-param>
<init-param>
<param-name>org.zkoss.less.CompressOutput</param-name>
<!-- compress output, default true -->
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>zkLess</servlet-name>
<!-- specify to folder that contains *.less -->
<url-pattern>/less/*</url-pattern>
</servlet-mapping>
</web-app>
Third, put your Less files under webapp/less folder
Hope you will like our new Less Engine, A more detailed instruction on how to use the new Engine
is provided in Compile LESS.
