Build-Prozess mit Grunt

Schon zu Beginn eines SAP UI5 Projekts sollte man sich Gedanken über einen einheitlichen Build-Prozess machen. Dies stellt sicher, dass die projektbeteiligten Entwickler die gleichen Standards hinsichtlich Code Style, Tests und Deployment-Prozess einhalten.

In anderen Webtechnologien wie beispielweise angular.js oder React ist Grunt bereits etabliert und Quasi-Standard. Mit Grunt lässt sich der gesamte Build-Prozess einer SAP UI5 Anwendung automatisieren und vereinheitlichen. Ein weiterer Vorteil ergibt sich daraus, dass man durch Grunt nicht an eine bestimmte IDE gebunden ist, sondern auch auf Alternativen ausweichen kann. Sollte der Einsatz der SAP Web IDE nicht in Frage kommen, kann das Team problemlos auf eine andere IDE wie beispielweise IntelliJ WebStorm ausweichen.

Was ist Grunt?

Grunt ist ein JavaScript Task Runner, mit dem sich wiederkehrende Aufgaben automatisieren lassen. In einem SAP UI5 Projekt umfasst dies häufig:

• • • Lint (Code Style) Checks
    • Minification von Javascript- und CSS-Dateien
    • Unit Testing
    • Zusammenbauen der SAP UI5 Anwendung
    • Deployment der SAP UI5 Anwendung

Um diese wiederkehrenden Aufgaben mit Grunt abzubilden, werden Grunt Plugins benutzt die in einer Datei Gruntfile.js konfiguriert werden.

Grunt Plugins von SAP

SAP hostet ein eigenes npm Repository, in dem einige Grunt Plugins für die SAP UI5 Entwicklung zur Verfügung stellt werden.

Um diese Grunt Plugins nutzen zu können, muss zunächst das npm Repository von SAP angebunden werden. Dies kann man mit folgendem Kommandozeilenaufruf tun:

npm config set @sap:registry https://npm.sap.com

Mithilfe dieses Kommandos wird dem Node Package Manager bekannt gegeben, wo er Abhängigkeiten, die mit dem @sap/-Präfix beginnen, finden kann.

Für die SAP UI5 Entwicklung hat SAP eine Sammlung von Best-Practice-Ansätzen erstellt und unter dem Namen
@sap/grunt-sapui5-bestpractice-build veröffentlicht.
Diese Bibliothek bringt Grunt Tasks für folgende Aufgaben mit:

• Lint (Code Style) Checks, die angelehnt sind an die SAP Fiori Entwicklungsrichtlinien
• Optimierung und Zusammenbauen der SAP UI5 Anwendung

Best-Practice-Bibliothek installieren

Sollte das Projekt noch keine package.json besitzen, muss diese zunächst angelegt werden. Eine einfache package.json-Datei kann wie folgt aussehen:

{
  "name": "grunt-example",
  "version": "0.0.1",
  "description": "Grunt example application",
  "private": true,
  "devDependencies": {
    "@sap/grunt-sapui5-bestpractice-build": "1.3.62"
  }
}

Nach einem Aufruf von npm install wird dann die Best-Practice-Bibliothek geladen und installiert.

Verfügt das Projekt bereits über eine package.json-Datei, genügt folgender Aufruf auf der Kommandozeile:

npm install --save-dev @sap/grunt-sapui5-bestpractice-build

Grunt konfigurieren

Im Anschluss muss die Konfiguration des Grunt Build-Prozesses vorgenommen werden. Dazu wird eine Datei Gruntfile.js mit folgendem Inhalt erzeugt:

module.exports = function(grunt) {
  'use strict';

  grunt.loadNpmTasks('@sap/grunt-sapui5-bestpractice-build');

  grunt.registerTask('default', [
    'lint',
    'clean',
    'build'
  ]);
};

Zunächst werden die Grunt Tasks der Best-Practice-Bibliothek geladen. Im Anschluss wird der Grunt Default Task festgelegt, der zunächst die Lint Checks ausführt, danach das Zielverzeichnis leert und zum Schluss die SAP UI5 Anwendung im Zielverzeichnis zusammenbaut.

Folgende Aufgaben erledigen die Grunt Tasks im Detail:

lint
Führt Lint Checks für JavaScript-, XML- und JSON-Dateien durch, die im webapp/ Ordner liegen. Das Ergebnis der Überprüfung wird in die Datei dist/di.code-validation.core_issues.json geschrieben.
Wie man diese Prüfergebnisse sinnvoll weiterverarbeiten kann, wird in einem kommenden Blog-Beitrag beschrieben.

clean
Dieser Task leert den dist/ Ordner.

build
Mit diesem Task wird die SAP UI5 Anwendung im dist/ Ordner zusammengebaut. Folgende Schritte werden dazu ausgeführt:

• • • Minification der CSS-Dateien
    • Minification der JavaScript-Dateien
    • Kopieren der Originaldateien mit -dbg-Suffix
    • Erstellen der Dateien Component-preload.js und Component-preload-dbg.js
    • Minification der Preload-Dateien
    • Erstellen der Datei CachebusterInfo.json
    • Erstellen der Datei change-bundle.js. Diese Datei beinhaltet eine Auflistung der Änderungen, die an einer bestehenden SAP Fiori Anwendung gemacht wurden.

Nachdem die Konfiguration abgeschlossen ist, lässt sich der Build-Prozess mit folgendem Kommando starten:

grunt

Das Ergebnis des Builds befindet sich im dist/ Ordner.

Ausblick

Mit den Grunt Plugins der Bibliothek @sap/grunt-sapui5-bestpractice-build hat SAP die grundlegenden Anforderungen an einen Build-Prozess abgedeckt.

Für einen vollwertigen Build-Prozess sollte dieser aber noch um weitere Tasks ergänzt werden. Folgende Erweiterungen empfehlen wir:

• • • Auswerten der Lint Checks
    • Starten eines lokalen Servers für die SAP UI5 Anwendung
    • Durchführen von Unit- oder Integrationstests
    • Deployment der SAP UI5 Anwendung als BSP-Applikation in SAP

Diese werden in künftigen Beiträgen in diesem Blog beleuchtet.