Hello,

browsing through the web I couldn’t find complete instructions how to generate optimized (minified) versions of the JavaScript and CSS files of an UI5 application. Here are the steps I came up with myself.

Since I didn’t want to force my team member to add Maven or Gradle support in their Eclipse IDEs, I created an Ant build file.

Prerequisites

1. Download YUI compressor jar
2. Download YUI compressor ant support, e.g. Simon Buckle’s Ant Task
3. Download HTML compressor (don’t know how long this link will stay valid, as Google is shutting down Google Code)

Build File

This is the XML file which I placed in the .externalToolBuilders directory of my Eclipse project.

<project name="MyCoolUI5App" default="compress" basedir="..">
    <property file="${basedir}/.externalToolBuilders/build.properties"/>
  
    <taskdef resource="yuicompressor.tasks" classpath="${basedir}/.externalToolBuilders/lib/yuicompressor-taskdef-1.0.jar;${basedir}/.externalToolBuilders/lib/yuicompressor-2.4.8.jar"/>
  
    <target name="copy" description="Copies /WebContent to /Deploy">
        <delete dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}"/>
        <copy todir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">
            <fileset dir="${basedir}/WebContent"/>
            <compositemapper>
                <globmapper from="*.controller.js" to="*-dbg.controller.js"/>
                <globmapper from="*.view.js" to="*-dbg.view.js"/>
                <globmapper from="*.js" to="*-dbg.js"/>
                <identitymapper /><!-- This one takes care of all other files -->
            </compositemapper>
        </copy>
    </target>
  
    <target name="compressJsCss" depends="copy" description="Minifies JavaScript and CSS files">
        <yuicompressor verbose="false" todir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">
            <fileset dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}"/>
            <mapper>
                <globmapper from="*-dbg.controller.js" to="*.controller.js"/>
                <globmapper from="*-dbg.view.js" to="*.view.js"/>
                <globmapper from="*-dbg.js" to="*.js"/>
                <globmapper from="*.css" to="*.css"/>
            </mapper>
        </yuicompressor>
    </target>
  
    <target name="compressXml" depends="copy" description="Minifies XML views and fragments">
        <echo>Unfortunately, this task takes a minute to complete. Time to get a coffee...</echo>
        <apply executable="java" parallel="false" force="true" dest="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">
            <fileset dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}" includes="**/*.xml"/>
            <arg value="-jar"/>
            <arg path="${basedir}/.externalToolBuilders/lib/htmlcompressor-1.5.3.jar"/>
            <srcfile/>
            <arg value="-o"/>
            <identitymapper/>
            <targetfile/>
        </apply>
    </target>
  
    <target name="compress" depends="compressJsCss,compressXml" description="Minifies web resources"/>
</project>

It actually references a build.properties file in the same directory

# Folder with development web resources
sap-ui-xx-resourceroot\=SOURCE=WebContent
# Folder with optimized web resources
sap-ui-xx-resourceroot\=DEPLOYMENT=Deploy

Note: The directory name Deploy is the SAP default directory for optimized web resources. Refer to SAP note 1957115 for detailed information. Apparently, you may provide alternative names in a file called .UI5RepositoryAppSetup.

Build

1. The build now copies the files from folder WebContent to folder Deploy, adding a -dbg suffix to the non-minified JavaScript files.
2. The YUI compressor then compresses JavaScript and CSS files, renaming the now optimized (minifed) JS files to their original name (without -dbg extension).
3. The HTML compressor additionally removes white space from XML views and fragments.

Publish

In our project, we use the SAP ABAP Team Provider Eclipse Plugin to deploy the application to a NetWeaver server. Afterwards, you have now various options to access your application:

1. No request parameters: Productive version, that is, your app with the generated optimized web resources
2. url_to_app?sap-ui-debug=true: Load human readable (unminified) versions of the UI5 libs and your app
3. url_to_app?sap-ui-xx-resourceroot=SOURCE: Load human readable (unminified) versions of your app