Skip to Content
Author's profile photo Nigel James

Deploying UI5: Getting our Grunt on.

So far we have covered the fact that we need a build script for our wondrous JavaScript / ECMAScript / SAPUI5 / OpenUI5 code.

Now we are going to get into the nuts and bolts of building that script.


Step 1. Install – Grunt our task horse.

But you need to do step zero

Step 0. Install nodejs.

These steps are as simple as 3.14 so head over to and click on the big green button.


You will get offered the software appropriate for your operating system. (clever huh)

Once you have node you should be able type on the command line / terminal / powershell :

node -v

and get something sensible.

Now we can do step 1. Install grunt

npm install -g grunt-cli

You may have to sudo that

Now you are laughing…

Creating the build project

Lets start with a directory with a really short path. Node dependencies have a reputation of creating really long paths so start short and you will have room to grow. I am going with /var/www/build but you might like c:\build or even ~/build or something to get you going

mkdir build

cd build

Once I have my build directory I am going to check out my project or projects from source control under this directory. The reason I didn’t put it anywhere else is that npm dependencies often create long path names under the node_modules directory and it easier. It does mean and an additional step but there can be a grunt task for that.

In one of your ui5 projects you have checked out you will need a project.json and a Gruntfile.js

You can copy project.json from the grunt getting started page or use npm init to create one or a bit or both.

A simple package.json

  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  "grunt": "~0.4.5",
  "grunt-contrib-uglify": "~0.5.0"

Now do an npm install to install all the dependencies in the project.json

OK … now that that is done a Gruntfile.js

Again you can grab a template from the grunt getting started page.

module.exports = function(grunt) {
  // Project configuration.
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
  options: {
  banner: '/*! <%= %> <%="yyyy-mm-dd") %> */\n'
  build: {
src:  './**/*.js',dest: 'build/WebContent/' ,
  // Load the plugin that provides the "uglify" task.
  // Default task(s).
  grunt.registerTask('default', ['uglify']);

Note that you will need to create a build directory for the content to go in. Once we get the hang of this we can use grunt to create directories and clean them up.

With that in place you now should be able to grunt to your hearts content.

Run the command grunt command on the command line and you will get something like this:

Running "uglify" (uglify) task
File build/WebContent/Component.js created: 3.53 kB → 2.13 kB
File build/WebContent/MyRouter.js created: 2.41 kB → 1.15 kB
File build/WebContent/model/Config.js created: 518 B → 343 B

The basic task process

When you type the command grunt on the command line it runs the default task in the Gruntfile. In our case this is the uglify task. When we ran grunt it failed because there was no source to minify.

I will leave it to you to play around with that if you like. When you are ready we will move on.

The basic workflow for building up our gruntfile is:

  1. Search for the module on npm that solves the task you want to acheive. ( There is a grunt task for that. )
  2. Install it with npm install <module> –save-dev This also adds the line to the package.json
  3. Insert the config in the gruntfile
  4. Load the task in the gruntfile with grunt.loadNpmTasks(
  5. Register the task in the gruntfile wiith  grunt.registerTask   
  6. Run grunt

A twist in the tale

This is all fantastic and I hope you are getting the hang of it but before we cover too much more ground I want to introduce a grunt task that will help a lot.

Most of our projects, if not all, have the same requirements. Minify, create dbg etc so it would be a little redundant if we had to create a gruntfile in each of our projects. We could copy and paste or clone but what if there is a new task we want to add to the work flow do we need to go and edit every grunt file in every project? That sound like a maintenance nightmare.

Enter grunt-source with great fanfare.

Grunt-source solves this very issue.

With it we can define our gruntfile once in another folder as we have done in this blog. I chose _build so it would sort to the top of all projects. In all our other projects include a grunt-source.json or a gruntsource element in our package.json with custom parameters for that project and we are done. I chose to add a gruntSource element in in my project.json file:

    "version": "0.0.23",
    "gruntSource": {
        "source": "../_build",
        "nsPrefix": "myui5/namespace",
        "appname": "My AppName",
        "zipfile": "",
        "ui5app" : "Z_MY_APP_NAME_IN_SE80"

The key element in the gruntSource section is the source directive that tells grunt where to find the task and config to run. All the other elements are parts of the fun we discover in my next blog in this series when we string a whole bunch of tasks together.

<– Previous blog: Mapping the scenarios  Next blog : Putting all the tasks together –>

Assigned Tags

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

      Looking forward seeing next blog. Excellent!

      Author's profile photo Nigel James
      Nigel James
      Blog Post Author

      It's up Andy ,


      Author's profile photo Pooja H
      Pooja H

      hi ,
      I am unable to run qunit via grunt inspite of having all the necessary node modules.

      Gruntfile :

      module.exports = function (grunt) {
      ‘use strict’;
      qunit: {
      all: [‘/webapp/test/unit/unitTests.qunit.html’]
      grunt.registerTask(‘default’, [‘qunit’]);

      Command : grunt qunit
      Results :

      Running “qunit:all” (qunit) task
      >> 0 tests completed with 0 failed, 0 skipped, and 0 todo.
      >> 0 assertions (in 0ms), passed: 0, failed: 0

      I have two test cases and it runs over SAP WEB IDE but not here.

      Please help.

      Author's profile photo Ashok Yesala
      Ashok Yesala


      Could you please tell me how to exclude some of the folders and files during build which we don't want to deploy to ABAP repository.