Skip to Content
Author's profile photo Former Member

Ant build file to generate optimized web resources of UI5 application


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.


  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/"/>
    <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"/>
                <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 -->
    <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}"/>
                <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"/>
    <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"/>
            <arg value="-o"/>
    <target name="compress" depends="compressJsCss,compressXml" description="Minifies web resources"/>

It actually references a file in the same directory

# Folder with development web resources
# Folder with optimized web resources

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.


  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.


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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Helmut Tammen
      Helmut Tammen

      Hi Björn,

      maybe you should consider using node.js and grunt for this. This way it's as simple as defining a grunt task in you gruntfile.json and running the task via command line or IDE.

      Here is an example grunt task:

              uglify: {

                  js: {

                      files: [{

                          expand: true,

                          src: 'src/**/*.js',

                          dest: '<%= gruntBuildFolderName %>',

                          cwd: '<%= gruntBuildFolderName %>/'




      Best regards


      Author's profile photo Kimmo Jokinen
      Kimmo Jokinen


      Thanks for the article Björn.

      And to continue on Helmut's reply, yet another option is to use grunt-openui5 tasks. This way you can generate Component-preload.js files for your projects which makes them "similar" to Fiori apps.

      Edit: See Matthias Osswald's post on Optimizing OpenUI5/SAPUI5 Apps for more info.

      Best regards,


      Author's profile photo Tobias Hofmann
      Tobias Hofmann

      Grunt can check your JS, XML, minify JS, HTML, XML, images, etc. Take a lookt at my (old) blog on grunt.

      But you are right, having these tools as an ant, maven version would be nice.