Deploying UI5: Getting our Grunt on.

[Nigel_James]

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.

Installation

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 https://nodejs.org/ 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.

  grunt.initConfig({

  pkg: grunt.file.readJSON('package.json'),

  uglify: {

  options: {

  banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

  },

  build: {

src:  './**/*.js',dest: 'build/WebContent/' ,

  }

  }

  });

  // Load the plugin that provides the "uglify" task.

  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 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": "myzipfilename.zip",

        "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 -->