k

Kikaha

blog source code

Wro4j Integration

Note this guide uses the former Kikaha v2.0.4 and the wro4j's version v1.8.0.

Improving web page performance with Wro4j in Kikaha.

  1. Add maven dependency in pom.xml.
...
  <dependency>
      <groupId>ro.isdc.wro4j</groupId>
      <artifactId>wro4j-core</artifactId>
      <version>1.8.0</version>
  </dependency>
...  
    
  1. Add plugin configuration in pom.xml.
...
    <plugin>
        <groupId>ro.isdc.wro4j</groupId>
        <artifactId>wro4j-maven-plugin</artifactId>
        <version>1.8.0</version>
        <executions>
            <execution>
                <phase>compile</phase>
                <goals>
                    <goal>run</goal>
                </goals>
            </execution>
        </executions>
        <configuration>
            <extraConfigFile>${config.dir.web}/WEB-INF/wro.properties</extraConfigFile>
            <wroFile>${config.dir.web}/WEB-INF/wro.xml</wroFile>
            <targetGroups>all</targetGroups>
            <minimize>true</minimize>
            <cssDestinationFolder>${config.dir.web}/compiled/css/</cssDestinationFolder>
            <jsDestinationFolder>${config.dir.web}/compiled/js/</jsDestinationFolder>
            <contextFolder>${config.dir.web}</contextFolder>

            <ignoreMissingResources>true</ignoreMissingResources>
        </configuration>
    </plugin>
...
  1. Create ${config.dir.web}/assets/css and ${config.dir.web}/assets/css directories. These directories contains all (and custom) css and js files (jquery.js, bootstrap.css, custom.css etc.)
<kikaha project>/webapp/assets/css
<kikaha project>/webapp/assets/js
  1. Create ${config.dir.web}/WEB-INF directory for the wro4j configuration files.
<kikaha project>/webapp/WEB-INF/web.xml
<kikaha project>/webapp/WEB-INF/wro.properties
<kikaha project>/webapp/WEB-INF/wro.xml
  1. Add <kikaha project>/webapp/WEB-INF/web.xml configurations. ``` WebResourceOptimizer ro.isdc.wro.http.WroFilter

WebResourceOptimizer /wro/*

6. Add `<kikaha project>/webapp/WEB-INF/wro.properties` configurations.

resourceWatcherUpdatePeriod=5 debug=false disableCache=false gzipResources=true cacheGzippedContent=false ignoreMissingResources=true jmxEnabled=true parallelPreprocessing=true managerFactoryClassName=ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory preProcessors=cssUrlRewriting, cssImport, lessCss.less, semicolonAppender, coffeeScript.coffee postProcessors=yuiCssMin,jsMin ignoreEmptyGroup=true ignoreFailingProcessor=true hashStrategy=MD5

7. Add `<kikaha project>/webapp/WEB-INF/wro.xml` configurations.

/assets/css/.css /assets/js/.js

8. Create *${config.dir.web}/compiled/css* and *${config.dir.web}/compiled/css* `directories`. These are output directories of css and js files.

/compiled/assets/css /compiled/assets/js

9. Use the `compiled` `minified` css and js files in the [html template](https://github.com/fizzed/rocker). 

<!-- Wro4j js (compiled) -->
<script src="/compiled/js/all.js"></script>


```