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.

 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

5 Responses to “Introducing the New ZK-Less Compiling Engine in Node.js Environment”

  1. TerryTornado says:

    The new ZKLessServlet calls the same old method ‘compile(…)’ and not the new one ‘compileLess(…)’ who calls the node less module.
    The compileLess() method needs ‘prepared’ zk..less files where the tag lib functions are outcommented and written back after compiling.
    Next the underlaying lesscss-engine looses the relative path of the imports (Can only be hacked if using ‘classpath:web/…/_myFile.less’ in the @import directive.
    At time i’m not able to compile the zk less files using the ZKLessServlet.
    I’m wondering why the naming conventions are ‘fixed’ and NO word in the documentation:
    sb.insert(end, “\[email protected] \”classpath:web/” + theme + /zul/less/_zkvariables.less\”;\n”);
    I give it up after two days in the hope that the next version needs not such hacks and runs well.

  2. TerryTornado says:

    The new ZKLessServlet calls the same old method ‘compile(…)’ and not the new one ‘compileLess(…)’ who calls the node less module.
    The compileLess() method needs ‘prepared’ zk..less files where the tag lib functions are outcommented and written back after compiling.
    Next the underlaying lesscss-engine looses the relative path of the imports (Can only be hacked if using ‘classpath:web/…/_myFile.less’ in the @import directive.
    At time i’m not able to compile the zk less files using the ZKLessServlet.
    I’m wondering why the naming conventions are ‘fixed’ and NO word about that in the documentation:
    sb.insert(end, “\[email protected] \”classpath:web/” + theme + /zul/less/_zkvariables.less\”;\n”);
    I give it up after two days in the hope that the next version needs not such hacks and runs well.

  3. Niket Shah says:

    Hi,

    I have trouble implementing this. I don`t find class called ZKLessServlet. Is there any way to download this working example?

    Any help would be appreciated.

  4. Intoxicadocodr says:

    Hi, I get this error when trying compile in develpment phase:
    nov 17, 2015 8:57:37 AM org.zkoss.less.ZKLessServlet compileLess
    Grave: Cannot run program “lessc” (in directory “/”): error=2, No such file or directory

  5. Intoxicadocodr says:

    I solved this!!!
    OSX Capitan brings CSR to protect certain paths disable this.
    (
    http://osxdaily.com/2015/10/05/disable-rootless-system-integrity-protection-mac-os-x/)

    now execute this commands:
    sudo ln -s /usr/local/bin/lessc /usr/bin/lessc
    sudo ln -s /usr/local/bin/node /usr/bin/node

Leave a Reply