OpenUI5 — automate all the things!

First rule of programmer: it’s crystal clear that we’re damn lazy. That’s why we try to automate everything possible.

Some background: lately when I develop SAPUI5 project I heavily test them locally thanks to a combination of BowerJS, GruntJS and grunt-openui5.

So you know how frustrating is to make a little fix, save, launch the build process, move files to the webserver and reload te page to test it.

You will never ever need to do it again. And trust me when i say never again!

The example: openui5-sample-app

openui5-sample-app is a sample sapui5 app created by Matthias Oßwald to explain how to use Grunt, Bower and grunt-openui5 in a real life scenario.

I’ve forked it in order to add a little magic. Whenever you will change a js/json/xml/html/properties file and you will save it, a build task will be called the output will be copied to the demo app (which is served by a local webserver) and the page your were testing will be automatically refreshed.

Do you want to see the final result? Here you go!

What do you need for let the magic happen?

First of all we need two grunt plugins:

• grunt-contrib-watch: Run predefined tasks whenever watched file patterns are added, changed or deleted
• connect-livereload: connect middleware for adding the livereload script to the response

Than we need to configure them.

Configure grunt-contrib-watch

Add this task configuration to the Gruntfile.js

"watch": {
    "options": {
      "livereload": true
    },
    "css": {
      "files": [
        "webapp/**/*.less",
        "webapp/**/*.css"
      ],
      "tasks": [
        "build"
      ]
    },
    "js": {
      "files": [
        "webapp/**/*.js",
        "webapp/**/*.xml",
        "webapp/**/*.json",
        "webapp/**/*.html",
        "webapp/**/*.properties"
      ],
      "tasks": [
        "build"
      ]
    }
}

When options.livereload is set to true a live reload server will be started with the watch task per target. Then after the indicated tasks have run, the live reload server will be triggered with the modified files.

The second part instead will tell to the watch task which files we want to monitor for a change and which tasks it should run on demand.

Configure grunt-contrib-connect

We now need to enable also livereload on the connect configuration. We just need to change a line of code as following

"connect": {
    "options": {
      "port": 8080,
      "hostname": "*",
      "livereload": true
    },
    "src": {},
    "dist": {}
}

livereload set to true will tell to the connect task inject a live reload script tag into your page using connect-livereload (this plugin will never be used/configure directly but as you can see is needed under the hood by grunt-contrib-connect).

The final step

Now we just need to register the watch task

grunt.loadNpmTasks("grunt-contrib-watch");

and edit the currently registered task “serve” like this:

// Server task
grunt.registerTask('serve', function(target) {
    grunt.task.run('openui5_connect:' + (target || 'src'));
    grunt.task.run('watch');
});

We had to remove the keepalive option. Keepalive keep the server alive indefinitely but if it’s enabled, any tasks specified after this will never run. In this case we had to do it otherwise the watch task wont be executed.

After running the openui5_connect task we tell Grunt to also exectute the watch one.

And that’s it. We’re ready to hit save and sit back on our chair to see the magic happen!