HTML5-Tutorium: JavaScript: Hello World 04

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6 Musterlösung: index.html (SVN-Repository)

Anwendungsfälle (Use Cases)

Gegenüber dem dritten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung zu verbessern, so dass sie schneller ausgeliefert werden kann. Außerdem wird die Entwicklungsarbeit mit Hilfe von Automatisierungstools erleichtert.

Erstellen eines neuen Projektes

Erstellen Sie ein neues Projekt „HelloWorld04“ und legen Sie dieses in Ihrem Repository ab. Kopieren Sie anschließend alle Dateien aus dem dritten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und committen Sie abermals.

Erstellen einer Ordnerstruktur

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen. Üblicherweise legt man CSS-Dateien in einen Ordner namens „css“ und JavaScript-Dateien in einen Ordner namens „js“. Sollten es viele CSS- und/oder JavaScript-Datein werden, legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an:

• web (Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.)
• src (Dieser Ordner enthält die unkomprimierten CSS- und JavaScript-Dateien.)
• doc (Dieser Ordner enthält die Projektdokumentation.)
• conf (Dieser Ordner enthält Projektkonfigurationsdateien mit Aus

Legen Sie innerhalb der Ordner „web“ und „src“ jeweils zwei weitere Ordner an: „css“ sowie „js“ .

Öffnen Sie im Editorbereich die Datei „index.html“ und verschieben sie in denr Ordner „src“. Verschieben sie anschließend die Dateien „main.css“ und „main.js“ in die passenden Ordner „src/css“ bzw. „src/js“. Sie werden feststellen, dass die Verweise in den Link- und Script-Elementen der Datei „index.html“ automatisch angepasst werden. Verschieben Sie nun die Datei „index.html“ in den Ordner „dist“.

Das Ergebnis dieser Aktion ist, dass Ihre Web-Anwendung nicht mehr im Root-Verzeichnis des Projektes liegt, sondern (sauber strukturiert) in zwei Unterordnern. Daher ist es möglich, im Root-Verzeichnis des Projektes weitere projektspezifische Ordner und Dateien anzulegen wie „conf“ und „doc“, die später nicht auf den Web-Server, auf dem die Anwendung schließlich laufen soll, kopiert werden.

Laden der CSS- und der JavaScript-Dateien

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen Version der Web-Anwendung stehen diese Verweise auf diese Dateien im head-Bereich des Dokuments. Dieser wird vollständig geladen, bevor der body-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verläßt die Seite vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der body-Bereich geladen und dann die JavaScript- und die CSS-Dateien. Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser keine Layout-Vorgaben erhalten hat, wenn er mit dem Rendern der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen. Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

CSS-Dateien

Für CSS-Dateien empfiehlt Google ernsthaft, die Link-Element ganz ans Ende der HTML-Datei zu stellen, also nach dem schließenden html-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen wichtige CSS-Style-Befehle direkt – d. h. als CSS-Befehle innerhalb eines stxle-Elements – in die HTML-Datei eingefügt werden.

Von beiden Vorschlägen rate ich dringend ab. Der erste Vorschlag ist nicht HTML-konform, ja noch nicht einmal SGML-konform. Es mag sein, dass diverse Browser diese Syntax verstehen, korrekt ist sie trotzdem nicht. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS) vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. Tun Sie das nicht.

Gehen Sie so vor, wie es unter Multimedia-Programmierung: Best Practices beschrieben ist.

In unserer Anwendung haben wir bislang alles richtig gemacht, bis auf die fehlende automatische Komprimierung. Diese wird weitrt unten beschrieben.

JavaScript-Dateien

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden. Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das script-Element aus dem HTML-Header-Bereich und fügen Sie es vor dem schließenden body-Tag ein:

   ...
   <script type="text/javascript" src="../src/js/main.js"></script>
</body>

Node.js

Dieses Tutorium befasst sich zwar nicht mit der Erstellung von Node.js-Anwendungen, aber trotzdem benötigen wir Node, da für die Komprimierung von Dateien und das automatische Erstellen von JavaScript-Dokumentationen derartiege Anwendungen zum Einsatz kommen.

Installieren Sie zunächst Node.js: https://nodejs.org/en/, Version 6.x. Dieverse Versionen finden Sie unter https://nodejs.org/en/download/. Achten Sie darauf, dass die Option „Add to PATH“ ausgewählt wurde.

Starten Sie WebStorm neu und öffnen Sie das Terminal, um zu testen, ob node funktioniert:

• Klick auf Icon in der linken unteren Ecke → Terminal
• Geben Sie Folgendes ins Terminal ein: node --version

Wenn Node.js korrekt installiert und der Pfad mit den node-Binaries in die Systemvariable PATH eingetragen wurde, sollte die Versionsnummer von node ausgegeben werden.

Sie werden feststellen, das Node.js zum Großteil über Konsolbefehle gesteuert wird. Zu Beginn mag das für eingefleischte Klickibunti-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.

Tipp
Profis verwenden unter Windows lieber ein Terminal, dass eine Unix-Shell simuliert. (Unter Linux und Mac OS X ist das nicht notwendig. Dort läuft sowieso schon eine UNIX-Shell.)

Installieren Sie „Git for Windows“ (https://git-for-windows.github.io/). In diesem Paket ist die „Git BASH“ enthalten. Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie „which“, „vi“ ( :-) ) etc. zur Verfügung stellt.

Öffnen Sie nun ein beliebiges Terminal (WebStorm-Terminal, Git Bash, Mac-OS-X-Terminal ...) und geben Sie folgenden Befehl ein

npm install -g bower grunt-cli jsdoc ink-docstrap yuglify node-minify

Damit werden die wichtigsten Node.js-Pakete gobal (Option „-g“) installiert, die wir im Folgenden noch benötigen. (OK, bower wird noch nicht benötigt. Das Paket ist aber so gut, dass wir es sicher noch brauchen werden.) Die globale Installation hat zur Folge, dass jedes Projekt auf diese Pakete zugreifen kann, Pakete also nicht mehrfach installiert werden.

• Rechtsklick im Dateibaum auf „node-modules“ → Mark Directory as → excluded
• Rechtsklick im Dateibaum auf „doc“ → Mark Directory as → excluded

Beide Ordner enthalten Dateien, die nicht von Ihnen stammen. Diese Dateien können Fehler und Hinweise enthalten, veraltete Schnittstellen (“deprecated”) verwenden etc. (Oh ja, auch andere Programmierer machen Fehler. :-) ) Und wenn Sie diese beiden Orner nicht als „excluded markieren“, prüft WebStorm bei jedem Commit die darin enthaltenen Dateien und weist Sie auf jedes Problem hin. Das können so vile Probleme sein, dass Sie die Probleme in Ihren eigenen Datein vollkommen übersehen.

Nun müssen wir den Node-Paket-Manager „npmn“ (https://docs.npmjs.com/) sowie Grunt (http://gruntjs.com/) initialisieren. Grunt ist der “JavaScript Task Runner”, also ein Programm, das Aufgaben (tasks) wie z. B. das Komprimieren von Programmdateien durchführt.

Die Initialisierung erfolgt durch die Bereitstellung von zei Dateien „package.json“ und „package.json“ im Root-Verzeichnis der Web-Anwendung. Eine initilae Version der package.json könnten Sie theoretisch mit npm init erstellen. Einfacher ist es jedoch, wenn Sie die beiden Datein von Hand erstellen und folgenden Code einfügen:

package.json (https://docs.npmjs.com/files/package.json)

{
  "name": "hello_world_04",
  "version": "1.0.0",
  "description": "Hello World Tutorium",
  "main": "gruntfile.js",
  "directories": {
    "doc": "./doc"
  },
  "dependencies": {},
  "devDependencies": {
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "svn",
    "url": "https://glossar.hs-augsburg.de/kowa/tutorium/es5/hello_world/WK_HelloWorld04"
  },
  "author": "Wolfgang Kowarschick",
  "license": "CC-BY-NC-SA-4.0"
}

Anmerkung: Diese Datei wird durch npm automatisch erstellt und geändert. Daher ist das Layout (welches mir nicht gefällt) vorgegeben.

Hier sollten Sie natürlich nicht meinen Repositorypfad und meinen Namen einfügen, sondern jeweils Ihren. Sie können außerdem die Lizenz anpassen (https://spdx.org/licenses/), unter die Sie Ihre Software stellen, wenn Sie das möchten.

Die meisten Attribute sind selbsterklärend. Wichtig sind für uns vor allem zwei Attribute: „main“ und „devDependencies“. Das erste enthält den Namen der Konfigurationsdatei von Grunt. Diese fehlt noch. Also: Legen Sie sie an (und vergessen Sie nicht, Ihren Namen anstelle meines Namens einzufügen):

gruntfile.js

/**
 * @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
 * @see http://gruntjs.com/getting-started
 *
 * Created on 2016/09/28.
 */

module.exports = function(grunt)
{
  // Project configuration.
  grunt.initConfig
  ({
    pkg: grunt.file.readJSON('package.json'),
  });

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

  // Default task(s).
};

Diese Datei ist noch ziemlich leer, aber das wird sich ändern.

Spannender ist in der Datei „package.json“ das Attribut „devDependencies“ (dev = developer). Diese enthält eine Liste von von NodeJS-Paketen, die für die Entwicklung der Web-Anwendung benötigt werden. Fügen wir einmal das Paket „ink-docstrap“ in diese Liste ein. (Diese Pakte wird nachfolgend für die Erstellung der JavaScript-Dokumentation mittels JSDoc verwendet. Es enthält ein Theme, welches deutlich schöner ist als das Standard-JSDoc-Theme.)

Führen Sie folgenden Befehl im WebStorm-Terminal (oder mittels eine beliebigen anderen Shell im Wurzelverzeichnis Ihrer Web-Anwendung) aus:

npm install ink-docstrap --save-dev

Dies bewirkt zweierlei:

1. Das Node.js-Paket „ ink-docstrap“ sowie diverse weitere Node.js-Pakete, die diese Paket benötigt, werden einem Projektordner namens „node_modules“ abgelegt.
2. Das Name und die Versionnummer des Paketes werden in das Attribut „devDependencies“ in der Datei „package.json“ eingefügt (wegen der Option „--save-dev“).

Nun steht Ihnen der Befehl

npm update

zur Verfügung. Mit diesem können Sie die lokal gepeicherte Versionen der im Attribut „devDependencies“ aufgeführte Node.js-Pakete jederzeit auf die neueste Version aktualisieren. Sie önnen ein Paket auch löschen und dann mittels npm update (https://docs.npmjs.com/cli/update) wieder herstellen. Versuchen Sie es:

npm remove ink-docstrap
npm list

Jetzt ist der Ordner „node_modules“ wieder leer.

npm update
npm list

Und jetzt enthält der wieder „ink-docstrap“ sowie andere dafür notwendige Pakete.

Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):

npm outdated

Kein Ergebnis ist hier ein gutes Ergebnis!

Und natürlich finktioniert das Ganze auch für global gespeicherte Pakete:

npm -g outdated
npm -g list

Allerdings muss man veraltete globale Pakete erneut installieren. Zum Beipiel muss npm relativ häufig aktualisiert werden (sobald „npm -g outdated“ das Paket als veraltet meldet):

npm install -g npm

Automatische Generierung der Schnittstellenbeschreibung

Installieren Sie zunächst JSDoc:

• Öffnen Sie das WebStorm-Terminal.
• npm install -g jsdoc (installiert JSDoc als Node.js-Anwendung; das haben Sie eigentlich schon gemacht, aber das macht nix :-) )
• npm install ink-docstrap (installiert ein JSDoc-Theme namens „docstrap“ ([1]); das haben Sie auch schon gemacht, aber das macht auch nix.)

Übrigens: Es gibt auch noch andere Themes für JSDoc.

Erstellen Sie im Projektordner „conf“ eine JSON-Datei namens „jsdoc.conf“. Fügen Sie in diese Datei folgenden Code ein:

{
  "tags":
  {
    "allowUnknownTags": true
  },
  "source":
  {
    "include":        ["./src/js"],
    "includePattern": ".+\\.js$",
    "excludePattern": "doc"
  },
  "plugins":
  [],
  "templates":
  {
    "systemName":      "WK_HelloWorld04",
    "footer":          "Created by Wolfgang Kowarschick",
    "copyright":       "2016",
    "navType":         "vertical",
    "theme":           "spacelab",
    "linenums":        true,
    "cleverLinks":     false,
    "monospaceLinks":  true,
    "collapseSymbols": true,
    "inverseNav":      false
  },
  "opts":
  {
    "template":    "node_modules/ink-docstrap/template",
    "encoding":    "utf8",
    "destination": "doc/jsdoc",
    "recurse":     true,
    "private":     true
  }
}

Ersetzen Sie im Attribut „footer“ meinen Namen durch Ihren, denn es ist Ihr Projekt, nicht meines. :-)

In dieser Datei wird festgelegt, wie die HTML-Dokumentation des Codes, die JSDoc erstellt, aussehen soll. Insbesondere ist das Template angegeben, das zur Erstellung dieser HTML-Dokuemnte verwendet werden soll. Es handelt sich um „docstrap“, welches wir zuvor heruntergeladen haben. Von der Projektroot aus gesehen, befinden sich die Template-Dateien im Ordner „node_modules/ink-docstrap/template“.

Weitere Konfigurationsparameter werden unter http://usejsdoc.org/about-configuring-jsdoc.html beschrieben.

Sie können nun eine Dokumentation für Ihr Projekt erstellen:

• Öffnen Sie das WebStorm-Terminal.
• jsdoc -c conf/jsdoc.json

Nach kurzer Zeit sollte der Ordner „doc/jsdoc“ erstellt und mit Inhalten gefüllt worden sein. Sehen Sie sich die Datei „doc/jsdoc/index.html“ im Browser an. Diese enthält nicht viel, außer einem Drop-Daown-Menü „global“, in dem die drei von Ihnen erstellen globalen Funktionen „greet“, „greet_on_enter“ und „init“ enthalten sind. Klicken Sie auf eine dieser Funktionen.

Globale Speicherung der JSDoc-Templates

Wenn Sie „ink-docstrap“ nicht mittels

npm install ink-docstrap

sondern global mittels

npm install -g ink-docstrap

installieren (so wie Sie das auch schon bereits getan haben), werden die Template-Dateien nicht im Projektordner, sondern im globalen npm-Ordner abgelegt. Das hat den Vorteil, dass Sie dieses Template für viele Projekte einsetzen können und es nicht bei jedem Projekt separat speichern müssen. Der Nachteil ist, dass in der Datei „conf/jsdoc.json“ den absoluten Pfad des globalen Ordners angeben müssen. Dieser Pfad sieht auf jedem Rechner anders aus. Bei mir lautet er beispielsweise:

c:/Users/kowa/AppData/Roaming/npm/node_modules/ink-docstrap/template

Das heißt, wenn man im Team an einem Projekt arbeitet, müsste man für jedes Teammitglied eine eigene JSDoc-Konfigurationsdatei anlegen, was nicht wirklich schön, aber doch machbar ist.

In der Musterlösung verwende ich die lokale Version „docstrap“ (es gibt allerdings auch eine Datei namens „conf/jsdoc_wk.json“, die speziell für meinen Rechner erstellt wurde). Die lokale Version von „docstrap“ ist alledering nicht im Repository enthalten. Nachdem Sie die Musterlösung auf Ihren Rechner kopiert haben (vergessen, wie's geht? → HTML5-Tutorium: JavaScript: Hello World 04), müssen Sie im WebStorm-Terminal der Musterlösung noch folgenden Befehl ausführe:

npm update

Und schon sollten Sie die Dokumentation wie gewohnt erstellen können.

Sobald Sie „grunt“ konfiguriert haben, sollte „conf/jsdoc.json“ auch in Ihrem Projekt fehlende Node.js-PAkete nachinstallieren.

Erstellung der JSDoc-Dokumentation mittels Klickbunti

Falls Sie die Dokumentation icht immer über das Terminal erstellen möchten, können Sie in WebStorm einen neuen Menüeintrag erstellen, über den Sie die Erzeugung der HTML-Dokumentation starten können.

Sie müssen dazu den Pfad ermitteln, unter dem Ihre jsdoc-Datei zu finden ist. Unter Unix (Maac OS X, Linux, FreeBSD ...) lautet der Befehl, den Sie in ein Terminal eingeben müssen:

which jsdoc

Unter Windows funktioniert dieser Befehl nur in der Git BASH. Außerdem müssen Sie unter Windows den Bash-Pfad modifizieren, damit auch Windows etwas damit anfangen kann. Bei mir gibt dieser Befehl Folgendes aus:

/c/Users/kowa/AppData/Roaming/npm/jsdoc

Um jsdoc in WebStorm aufrufen zu können, müssen Sie in diesem Pfad „/c“ durch „c:“ und „jsdoc“ durch „jsdoc.cmd“ ersetzen. (Mac-User brauchen nichts zu ändern. :-) )

Erstellen Sie nun den neuen WebStorm-Menüeintrag:

• File → Settings → Tools → Extenal Tools
• Klick auf das Plus-Icon
  • Name: JSDoc
  • Group: Documentation
  • Description: Generates JavaScript documentation
  • Hacken bei allen Optionen (Options)
  • Hacken bei allen Show-in-Optionen (Show i) mit ausnahme von „Search results“
• Name: c:/Users/kowa/AppData/Roaming/npm/jsdoc.cmd (hier kommt Ihr zuvor ermittelter Pfad hinein)
• Name: -c $ProjectFileDir$/conf/jsdoc.json
• Name: $ProjectFileDir$
• OK
• OK

Nun finden Sie an mehreren Stellen in WebStorm einen neuens Menüpunkt Documentation mit einem Unterpunkt JSDoc:

• Hauptmenü : Tools → Documentation → JSDoc
• Rechtsklick auf Datei im Projekt-Dateibaum → Documentation → JSDoc
• Rechtsklick auf Datei im Editor-Tabmenü → Documentation → JSDoc

Wenn Sie auf einen dieser Unterpunkte „JSDoc“ klicken, erhalten Sie entweder eine Fehlermeldung ( :-( ) oder es wird eine neue Dokumentation erstellt (d. h., Sie haben alles richtig gemacht :-) ).

Um sicher zu gehen, können Sie versuchsweise den Ordner „doc“ gemeinsam mit seinem gesamten Inhalt löschen und JSDoc nochmals aufrufen.

Sicherung im Repository

Bevor Sie weitermachen: Haben Sie Ihre aktuelle Veriosn von Hello World 04 schon im Repository gesichert?

Sie sollten den „doc“ (im Gegensatz zum Ordner „node_modules“) zu Ihrem Repository hinzufügen:

• Klick auf „doc“ im Dateibaum → Subversion → Add to VCS

Automatische Komprimierung von CSS- und Javascript-Dateien

Nun folgt die letzte Optimierung der Anwendung. Die von Ihnen erstellten CSS- und Javascript-Dateien enthalten viele Leerzeichen, Kommentare, „sprechende“ anstelle von kurzen Variablenbezeichenern etc. Das ist für Sie und alle anderen Entwickler von Vorteil. Für die Übertragung der Daten zu einem Client (Browser) bedeutet das nur unnötiges Datenvolumen. Gerade für mobile Tarife mit Volumenbegrernzung sollten so wenig Daten wie möglich übertragen werden.

Glücklicherweise gibt es Tools, die bestehende CSS- oder Javascript-Dateien komprimieren (meist sogar so, dass sich die Semantik der Dateien nicht ändert; aber wie gesagt: Auch andere Programmierer machen hin und wieder Fehler).

Wir verwenden die Node.js-Tools „cssmin“ für CSS-Dateien (https://www.npmjs.com/package/cssmin) und „UglifyJS2“ für JavaScript-Dateien (https://github.com/mishoo/UglifyJS2). Gesteuert werden diese “minimizer” oder “minifier” mittels dem bereits installierten JavaScript Task Runner grunt“.

Die für das Minimieren mittels Grunt notwendige Pakete wurden ebenfalls bereits installiert:

npm install grunt grunt-contrib-watch grunt-contrib-cssmin grunt-contrib-uglify --save-dev

Nun müssen die Aufgaben zu Komprimieren der JavaScript- und CSS-Dateien in die Konfigurationsdatei eingefügt werden:

gruntfile.js

/**
 * @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
 * @see http://gruntjs.com/getting-started
 *
 * Created on 2016/09/28.
 */

module.exports = function(grunt)
{
  // Project configuration.
  grunt.initConfig
  ({
    pkg: grunt.file.readJSON('package.json'),

    cssmin:
    { options: /* https://github.com/jakubpawlowicz/clean-css */
      { roundingPrecision:   -1
      },
      minimize: 
      { files:
        { 'web/css/min.main.css':  ['src/css/main.css'],
        }
      }
    },
    
    uglify:
    { options:
      { mangle: true
      },
      minimize:
      { files:
        { 'web/js/min.js': ['src/js/main.js']
        }
      }
    }
    
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task(s).
  grunt.registerTask('default', ['uglify', 'cssmin']);
};

Die Funktion „grunt.initConfig“ aufgerufen und es wird ihr ein JavaScript-Objekt übergeben. Im Attribut „pkg“ wird grund der Inhalt der Datei „package.json“ übergeben, damit Grunt ermitteln kann, welche Pakete verfügbar sind. Die beiden anderen Attribute „cssmin“ und „unglify“ (deren Namen frei wählbar sind), werden die beiden Minifier konfiguriert.

In beiden Fällen können Optionen angegeben werden, wie z. B., dass CSS-Maßangaben nicht gerundet werden sollen (es gibt Designer, die bestehen beim Pixelmaß auf vier Nachkommastellen) oder dass geeignete JavaScript-Variablen-Namen „durch die Mangel gedreht“ (mangle), also durch kürze Namen ersetzt werden sollen. Wichtiger ist jedoch die Anngabe, welche Dateien überhaupt erstellt werden und was für Source-Daten dafür verwendet werden solle.

Zu jeder Datei, die erstellt wird, kann man eine ganze Liste von Sourcedateien angeben. Das hat zur Folge, dass alle diese Soursedateien nacheinander komprimiert und dann in die Zieldatei eingefügt werden. Auch das ist eine Optimierung, um das Laden einer Web-Anwendung zu beschleunigen. Eine große Datei wird per HTTP schneller übertragen als viele kleine. Künftig werden wir daher möglichst viele JavaScript-Dateien in komprimierter form in eine einige Datei namens „min.js“ einfügen.

Nach der Initialisierungsfunktion werden noch zwei weitere Funktionen aufgerufen. Mit grunt.loadNpmTasks werden die Grundplugins geladen, die die eigentliche Komprimierung vornehmen. Und mittels grunt.loadNpmTasks wird festgelegt, welche Aufgaben standardmäiß ausgeführt werden, sobald der Befehl „grunt“ ausgeführt wird.

So, nun sollte alles funktionieren. Öffnen Sie das Web-Storm-Terminal und tipppen Sie nacheinander folgende Befehle ein:

grunt cssmin
grunt uglify
grunt
<source>

Sie werden feststellen, das jedesmal bestimmte Dateien in den Ordnern „<code>web/css</code>“ oder/und „<code>web/js</code>“
erstellt werden, die mit dem Namensbestandteil „<code>min</code>“ beginnen. Sehen Sie sich die erzeugten Dateien an.
Sie enthalten denselben Code wie die Original-Dateien, nur in komprimierter (und daher für den Menschen schwer lesbarer) Form.

Als nächstes muss die Datei „<code>index.html</code>“ angepasst werden. Diese lädt noch die unkomprimierten Dateien aus dem 
Source-Verzeichnis. Künftig soll sie die komprimierten Dateien aus dem eigentlichen Web-Ordner laden:

<source lang="html5">
...
<link rel="stylesheet" type="text/css" href="css/min.main.css"/>
...
<script type="text/javascript" src="js/min.js"></script>

Ab sofort werden nicht mehr die Source-Dateien geladen, sondern die komprimierten, durch die Minifier erstellten Dateien. Das heißt aber für uns, dass wir bei jeder Änderung an den Source-Dateien den Befehl „grunt“ ausführen müssen, um die Aktualisierungen in die komprimierten Versionen der JavaScript bzw. CSS-Dateien zu übertragen.

Das ist lästig und geht besser.

Automatische Aktualisierung der komprimierten Dateien

Mit Hilfe des NodeJS-Paketes „grunt-contrib-watch“ aknn man beliebige Dateibäume überwachen, ob sich darin besgtimmte Dateien ändern und in einem derartigen Fall auomatisch andere Grunt Tasks ausführen. Das kann man ausnutzen, um Änderungen bei einer CSS-Datei oder eine JavaScript-Datei die komprimierten Dateien automatisch neu zu erstellen.

Öffnen Sie das Web-Stormterminal und laden Sie das besagte Paket:

npm install grunt-contrib-watch --save-dev

Erweitern Sie nun die Datei „gruntfile.js“ um einen Watch-Task:

watch:
{ css:
  { files:   ['src/css/**/*.css'],
    tasks:   ['cssmin']
  },
  js:
  { files:   ['src/js/**/*.js'],
    tasks:   ['uglify']
  },
  web:
  { files:   ['web/**/*'],
    options: { livereload: true,
               spawn:      false
             }
   }
}

Vergessen Sie nicht, das Plugin zu laden:

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

Der Watch-Task überwacht drei verschiedene Ordner:

• Wann immer sich eine CSS-Datei im Ordner „src/css“ oder einem darin enthaltenen Unterordner ändert, wird der Task „cssmin“ ausgeführt.
• Wann immer sich eineJavaScript-Datei im Ordner „src/js“ oder einem darin enthaltenen Unterordner ändert, wird der Task „uglify“ ausgeführt.
• Wann immer sich irgendeine Datei im Web-Ordner ändert, wird eine livereload-Nachricht (http://livereload.com/) an einen lokalen Nodeserver mit der Portnummer 35729 geschickt. (Keine Angst: Sie brauchen diesen Server nicht zu starten oder zu stoppen.)

Damit kann man Browser anweisen, die HTML-Dateien neu zuladen, wann immer sich etwas ändert. Dies erfolgt entweder mit speziellen Browser-Plugins (http://livereload.com/extensions/) oder mit einem kleinen JavaScript-Hack.

TO BE DONE

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)