Kikaha Wro4j Integration

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>
...  

2. 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>
...

3. 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

4. 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

5. Add <kikaha project>/webapp/WEB-INF/web.xml configurations.

<filter>
   <filter-name>WebResourceOptimizer</filter-name>
   <filter-class>ro.isdc.wro.http.WroFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>WebResourceOptimizer</filter-name>
<url-pattern>/wro/*</url-pattern>
</filter-mapping>

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.

<groups xmlns="http://www.isdc.ro/wro">
    <group name="all">
        <css>/assets/css/*.css</css>
        <js>/assets/js/*.js</js>
    </group>
</groups>

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

<kikaha project>/compiled/assets/css
<kikaha project>/compiled/assets/js

9. Use the compiled minified css and js files in the html template.

...
    <!-- Wro4j css (compiled)-->
    <link rel="stylesheet" href="/compiled/css/all.css">

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