Lately I observe that the Node.js ecosystem provides much more (and better!) tools for building web applications. For example there are tools to generate CSS like Less.js, SASS, Stylus, minimizers like Clean CSS, Uglify JS, linting tools like JSHint and JSLint and many more. All these are available in the JVM world via Rhino but it is kind of slow… Maybe it will get better with Nashorn with Java 8 but it will take some time. And someone, like Wro4j, will have to create adapters for all these useful tools.
To accomplish that the most easier way I’ve found is by using frontend-maven-plugin
- a Maven plugin that downloads Node.js for you and integrates with Gulp and Grunt.
Note: there is a Gradle plugin in the works by the same author!
Note: it will download Node.js and all needed Gulp plugins the first time and save them at ./node/ and ./node_modules/ folders. Make sure to ignore them in your SCM tool!
The usage in Wicket components is as you probably do it now:
In src/main/resources/com/mycompany/res folder there is demo.less resource but Gulp’s stylesInPackages task generates demo.css and puts it in the classpath, so everything Just Works™.
- execute *gulp watch* on the command line, in the same folder where gulpfile.js is located
- install the plugin for your preferred browser
- start the application via Start.java (starts embedded Jetty server and LiveReload-JVM server)
- open http://localhost:8080 in the browser
- open demo.less in your IDE and modify the background color to any valid color. Save the change.
- the browser will reload automatically !
I have played with all this on Linux. I’m pretty sure it will work flawlessly on Mac too. People say that Node.js support for Windows has become pretty good these days so it should work there too.
I hope you find all this useful!
In my daily job we switched from Node.js+less.js based build to Less4j because it is much faster and we have a lot of Less resources!