zkless-engine
Compile ZK Themes using the lesscss compiler.
Install / Run
Requires node >=10.16
Use globally
npm install zkless-engine -g
zklessc [params]
Use locally (add to package.json)
npm install zkless-engine --save-dev
npx zklessc [params]
Available parameters
param | description | default/value |
---|---|---|
-s/--source |
source folder to compile/watch | src/main/resources/web |
-o/--output |
output folder for .css.dsp files | target/classes/web |
-c/--compress |
minify output files | false (optional) |
-i/--imports |
specify multiple folders for @import resolution | - (optional/multiple) |
--less-opts |
json string with custom less options | {} |
-w/--watch |
watch files after successful compile | false (optional) |
--live-reload-port |
port for live reloading server | 50000 (optional) |
Examples
Basic
Compile a custom zktheme cloned from zk theme template project:
(1) long params, (2) shortcut params and watch, (3) and compress
zklessc --source src/archive/web --output target/classes/web/mytheme
zklessc -s src/archive/web -o target/classes/web/mytheme -w
zklessc -s src/archive/web -o target/classes/web/mytheme -cw
Include external folders into build
Assume the folder structure:
root
- mytheme
- src/archive/web/js/zul/wgt/button/less
- button.less
- _mybutton.less
- 3rdparty
- amazingtool
- shapes.less
- styleguide
- corporatecolors.less
By executing the command ...
zklessc -s src/archive/web -o target/classes/web/mytheme -i ../3rdparty -i ../styleguide
... less will find @imports based on those folders as well
button.less
"/zul/less/_header.less"; /*absolute import based on source directory (-s)*//*omitted zk styles*//*your imports*/ "_mybutton.less"; /*relative import*/
_mybutton.less
"/amazingtool/shapes.less"; /*will be found below "-i ../3rdparty"*/ "/corporatecolors.less"; /*will be found below "-i ../styleguide"*//*my styles*/ .z-button color: @corporateGreen; /* using a variable from corporatecolors.less */ .amazing-shape-rounded10px;
Maven integration
Since zklessc is a plain command line tool it can be integrated into a maven build using the standard exec-maven-plugin.
e.g. run zklessc
during the process-resources phase:
... <!-- handle class web resources separately below --> ${project.basedir}/src/archive web/** <!-- copy non-less into theme folder (here artifactId == theme name), less files will be handled by plugin below --> ${project.basedir}/src/archive/web **/*.less ${project.build.outputDirectory}/web/${project.artifactId} ... org.codehaus.mojo exec-maven-plugin 1.6.0 compile-less process-resources exec zklessc --source ${project.basedir}/src/archive/web --output ${project.build.outputDirectory}/web/${project.artifactId} --compress ...
Then execute directly via:
mvn process-recources
or build the project normally
mvn clean package
Gradle usage
Call the same command from an Exec-task
Live Reloading (during development)
When --watch
is enabled an http server is automatically started on port 50000 (or --live-reload-port
).
By adding the following scripts to your zk application (zul page or globally) the page will be notified about zkless compile results.
<script src="http://localhost:50000/socket.io/socket.io.js"/>
<script src="http://localhost:50000/zklessLiveReloadStyles.js"/>
<!--<script src="http://localhost:50000/zklessLiveReloadStylesResize.js"/>-->
<!--<script src="http://localhost:50000/zklessLiveReloadPage.js"/>-->
You have to add the socked.io client script provided by the server. Besided that there are 3 options for different behaviour.
zklessLiveReloadStyles.js
-> reload only stylesheets after compliation
zklessLiveReloadStylesResize.js
-> reload stylesheets and call zUtl.fireSized (useful when changing paddings/margins)
zklessLiveReloadPage.js
-> reload the whole page