zkless-engine

Compile ZK Themes using the lesscss compiler.

Features

* convert ZK @import into a LESS valid path

Install / Run

Requires node >=10.16

$3

npm install zkless-engine -g
zklessc [params]

$3

npm install zkless-engine --save-dev
npx zklessc [params]

$3

| 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 |
| -e/--extension| output file extension | .css.dsp (optional) |
| -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

$3

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
`

$3

See less include paths

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
`less
@import "/zul/less/_header.less"; /absolute import based on source directory (-s)/
/omitted zk styles/
/your imports/
@import "_mybutton.less"; /relative import/
`

_mybutton.less
`less
@import "/amazingtool/shapes.less"; /will be found below "-i ../3rdparty"/
@import "/corporatecolors.less"; /will be found below "-i ../styleguide"/
/my styles/

.z-button {
color: @corporateGreen; / using a variable from corporatecolors.less /
.amazing-shape-rounded(10px);
}
`

$3

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:

`xml
...




${project.basedir}/src/archive

web/**




${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

$3

Call the same command from an Exec-task

$3

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.

`