Eine Zusammenfassung zum Thema JavaScript Minifier

Code kompakt: Automatisierung & Co.
Kommentare

Eines der größten Probleme bei der Webentwicklung ist der Umgang mit Ressourcen. Daher haben wir uns in der Serie Code kompakt mit zahlreichen JavaScript Minifiern beschäftigt. Mit von der Partie waren UglifyJS, JSMin, Packer, MS Ajax Minifier und der Closure Compiler. Im letzten Teil der Serie wollen wir einen Blick auf die Automatisierung werfen – und uns alle Ergebnisse noch einmal im Detail ansehen.

Code kompakt

In unserer Serie Code kompakt haben wir uns ausfürhlich mit den verschiedensten JavaScript Minifiern beschäftigt.

JavaScript Minifier: Automatisierung

Im Normalfall möchten Sie nicht bei jeder Änderung Ihres JavaScript-Quellcodes erneut die Komprimierung vornehmen müssen. Abhilfe schafft hier die Automatisierung dieser Aufgaben. Im Bereich von JavaScript hat sich zu diesem Zweck Grunt durchgesetzt – ein Build-Tool für JavaScript-Applikationen, das selbst in JavaScript geschrieben ist. Die einzige Voraussetzung, die Sie für dessen Installation erfüllen müssen, ist, dass Node.js auf Ihrem System installiert sein muss. Der Installationsprozess von Grunt unterteilt sich in zwei Stufen: Zunächst müssen Sie das globale NPM-Paket grunt-cli installieren und danach das lokale grunt. Die lokale Installation von grunt sollten Sie mit der Option –save-dev durchführen. Diese sorgt dafür, dass grunt als Dev-Dependency in Ihre lokale package.json-Konfigurationsdatei eingetragen wird.

npm install -g grunt-cli
npm install grunt –save-dev

Nach der Installation dieser beiden Pakete erstellen Sie die Konfigurationsdatei für Grunt mit dem Namen Gruntfile.js. Diese Datei enthält die Angaben über die verschiedenen Aufgaben, die Sie erledigen möchten. Sie sehen nun, wie Sie mit einer Kombination aus mehreren Plug-ins die Komprimierung Ihrer Applikation mit Grunt und UglifyJS erreichen können. Grunt ist lediglich eine Plattform zur Ausführung von Aufgaben. Damit diese funktionieren können, benötigen Sie die jeweiligen Plug-ins. Grunt bietet Ihnen für den Umgang mit UglifyJS das Plug-in grunt-contrib-uglify. Dieses müssen Sie ebenfalls lokal installieren. Außerdem benötigen Sie zur Automatisierung der Komprimierung bei Änderungen das Plug-in grunt-contrib-watch.

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

Die Konfigurationsdatei von Grunt ist im JSON-Format aufgebaut. Sie müssen zunächst dafür sorgen, dass die beiden benötigten Plug-ins korrekt geladen werden. Das erreichen Sie durch einen Aufruf der Methode grunt.loadNpmTasks. Als Argument erhält diese Methode jeweils den Namen des zu ladenden Plug-ins. Als Nächstes müssen Sie die Konfiguration mit einem Aufruf der grunt.initConfig-Methode erstellen. Dieser Methode übergeben Sie eine Objektstruktur, die die Konfiguration für das ugilfy- und das watch-Plug-in enthält. Die Konfiguration schließen Sie ab, indem Sie den so genannten Standard-Task definieren. Der gibt an, welche Aufgaben erledigt werden sollen, wenn Grunt ohne weitere Option im Verzeichnis der Gruntfile.js-Datei aufgerufen wird. Diese Definition nehmen Sie mit einem Aufruf der grunt.registerTask-Methode vor. Im Fall des aktuellen Beispiels beinhaltet der Standard-Task lediglich die Ausführung des uglify-Plug-ins.

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      build: {
        files: {
          'myApp.min.js': ['jquery-2.0.3.js', 'app.js']
        }
      }
    },
    watch: {
      scripts: {
        files: ['app.js'],
        tasks: ['uglify']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['uglify']);
};

Haben Sie Ihre Gruntfile.js (Listing 1) gespeichert, haben Sie zwei Möglichkeiten, Grunt auszuführen. Zum einen können Sie Grunt ohne weitere Optionen ausführen. In diesem Fall wird der Standard-Task abgearbeitet, was durch die aktuelle Konfiguration dazu führt, dass die angegebenen Dateien mit UglifyJs komprimiert werden. Zum anderen können Sie auch explizit den watch-Task ausführen. In Grunt können Sie jeden konfigurierten Task über den jeweiligen Namen als Kommandozeilenoption ansprechen. Das bedeutet, dass Sie mit dem Kommando grunt watch den watch-Task starten. Dieser wird benachrichtigt, sobald sich eine der konfigurierten Dateien ändert, und führt die in der Konfiguration angegebenen Tasks, also im Fall des Beispiels den ugilfy-Task, aus. Mit dieser Konfiguration müssen Sie sich dann nicht mehr selbst darum kümmern, dass die komprimierte Version Ihrer Applikation neu erstellt wird. Dieser Prozess geschieht automatisch im Hintergrund, solange der watch-Task läuft. Es handelt sich hierbei um einen permanent laufenden Dienst, den Sie selbst abbrechen müssen, indem Sie die Tastenkombination STRG + C betätigen.

Minifier UglifyJS JSMin Packer MS Ajax Minifier gcc
System Win, Mac, Linux Win, Mac, Linux Win, Mac, Linux Win Win, Mac, Linux
Voraussetzung node.js Node.js, .NET, Pearl, PHP Java
Minifier
Mehrere Dateien
Optimierung Comment, Whitespace, Mangle Comment, Whitespace Comment, Whitespace, Mangle Comment, Whitespace, Mangle Comment, Whitespace, Mangle, Rewrite
Beautifier
Analyzer
Kompression (von 240 KB) 84 KB 128 KB 108 KB 84 KB 76 KB

Zusammenfassung

Die Minifizierung von JavaScript-Quellcode gehört schon seit Längerem zu den Best Practices in der Webentwicklung. Gerade in Zeiten von mobilen Webseiten und den Volumenbeschränkungen vieler Mobilfunkverträge gewinnt die Reduzierung des Transportvolumens wieder mehr an Bedeutung. Wie Sie in diesem Artikel gesehen haben, existieren zahlreiche Werkzeuge, die Ihnen dabei helfen, den Speicherbedarf Ihrer JavaScript-Dateien zu reduzieren. Die Ausgabe der einzelnen Minifier unterscheidet sich je nach verwendetem Werkzeug. Der kleinste gemeinsame Nenner ist die Entfernung von Kommentaren und Whitespaces wie Zeilenumbrüchen, Leerzeichen oder Tabs. Darüber hinaus bieten einige Minifier an, Variablen zu kürzen oder gar den Quellcode selbst umzuschreiben. Sie sollten sich zunächst im Klaren über Ihre Anforderungen an das Werkzeug sein und nach diesen Anforderungen dann das korrekte Werkzeug auswählen.

Neben den hier erwähnten Minifiern existieren noch zahlreiche weitere Ansätze wie beispielsweise der YUI Compressor von Yahoo, die aber ähnlich wie die hier vorgestellten Werkzeuge arbeiten.

Aufmacherbild: Vintage tin toy robot von Shutterstock / Urheberrecht: josefkubes

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -