Compile ZK Themes using less.
npm install zkless-engine@import into a LESS valid pathRequires node >=10.16
npm install zkless-engine -g
zklessc [params]
npm install zkless-engine --save-dev
npx zklessc [params]
| 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) |
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
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);
}
`
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`
...
...
...
Then execute directly via:
mvn process-recources
or build the project normally
mvn clean package
Call the same command from an Exec-task
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.
``
You have to add the socked.io client script provided by the server.
Besides, that there are 3 options for different behaviour.
`zklessLiveReloadStyles.js` -> reload only stylesheets after compilation
`zklessLiveReloadStylesResize.js` -> reload stylesheets and call zUtl.fireSized (useful when changing paddings/margins)
`zklessLiveReloadPage.js` -> reload the whole page
After fixing security issues, run test:
npm testPublish New version to npm repository
npm publish`