Compile LESS"
From Documentation
Line 93: | Line 93: | ||
= Compile LESS to DSP during Development phase = | = Compile LESS to DSP during Development phase = | ||
− | It is not friendly to debug LESS during development by running Ant. Therefore, we provide a servlet named ZKLessServlet that can be used in web project to develop LESS by simply | + | It is not friendly to debug LESS during development by running Ant. Therefore, we provide a servlet named '''ZKLessServlet''' that can be used in web project to develop LESS by simply refreshing the browser page. |
− | '''Note:''' | + | '''Note:''' This is only recommended in development environment. |
− | Steps to use ZKLessServlet within Maven Project: | + | Steps to use '''ZKLessServlet''' within a Maven Project: |
* Add maven dependency if you are using maven. | * Add maven dependency if you are using maven. | ||
Line 149: | Line 149: | ||
* Project structure and use LESS directly in zul page. | * Project structure and use LESS directly in zul page. | ||
− | : | + | : Project structure should look like the following: |
<source lang="java" high="6, 8"> | <source lang="java" high="6, 8"> | ||
Line 172: | Line 172: | ||
</source> | </source> | ||
− | * Now you can modify LESS and see the result by refreshing browser page. | + | * Now you can modify LESS and see the result by refreshing your browser page. |
− | |||
=Version History= | =Version History= |
Revision as of 07:52, 22 November 2013
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.
Compile LESS by Ant
- 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).
- commons-logging.jar
- js.jar
- lesscss-engine.jar
- yuicompressor.jar
- zkjszips.jar
- zkless.jar (extension from lesscss-engine)
- zul.jar (extract zk-bin-7.0.X.zip file from sourceforge)
- 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">
<java classname="CpLess" fork="true">
<arg value="${basedir}/src/main/webapp/less"/><!-- input folder that contains less file -->
<arg value="${basedir}/src/main/webapp/less"/><!-- output folder -->
<classpath>
<pathelement location="${basedir}/lib/commons-logging.jar"/>
<pathelement location="${basedir}/lib/js.jar"/>
<pathelement location="${basedir}/lib/lesscss-engine.jar"/>
<pathelement location="${basedir}/lib/yuicompressor.jar"/>
<pathelement location="${basedir}/lib/zkjszips.jar"/>
<pathelement location="${basedir}/lib/zkless.jar"/>
<pathelement location="${basedir}/lib/zul.jar"/><!-- only needed if using _zkmixins.less -->
</classpath>
</java>
</target>
</project>
- Execute ant command in command line tool.
Compile LESS by Maven
- 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.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<!-- Add zkless-engine-maven-plugin -->
<plugin>
<groupId>org.zkoss.maven</groupId>
<artifactId>zkless-engine-maven-plugin</artifactId>
<version>0.8.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. 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.2</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
Version | Date | Content |
---|---|---|