Kikaha Wro4j Integration

Kikaha Wro4j Integration.

Kikaha v2.0.4 wro4j 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>
...