Grunt workflow inklusive Bildoptimierung

Bild

Als Developer und Designer hat man es ja heutzutage mit den verschiedensten Technologien und Tools zu tun. Neben den neuen Möglichkeiten die sich hier bieten, wachsen aber auch gleichzeitig unsere Anforderungen. Wichtig ist daher, dass man sich mit neuen Hilfsmitteln und Erkenntnissen auseinandersetzt, um sich selbst und seinen Workflow stetig weiterentwickeln zu können. Ich stand unlängst genau vor so einer Situation.

Ausgangspunkt

Websites werden immer größer und haben schon eine durchschnittliche Größe von 1,5MB überschritten. (Stand Sept. 2013) Daher wird Web-performance, besonders unter Berücksichtigung von mobilen Endgeräten, immer wichtiger und entscheidend für gute User Experience. Bilder stellen bei diesen 1,5MB mit über 60% den größten Teil dar. Dadurch ist auch klar wo man am meisten Bytes einsparen und Performance gewinnen kann. Neben der Überlegung ob ein Bild wirklich notwendig ist, ist Bildoptimierung der nächste logische und wichtige Schritt. Mein Ziel war es Bildoptimierung in meinen täglichen Workflow besser zu integrieren, und zwar automatisiert.

Automate everything. You don’t want to repeat image optimization yourself, nor do you want to ask your team to do the same six steps you repeat. Set up a build process that smartly optimizes new images. Use lossy compression.  – Paul Irish, Google

Wie Paul Irish schreibt ist es wichtig Prozesse im Team zu automatisieren. Online Tools für Bild-Optimierung sind praktisch, aber umständlich im täglichen Gebrauch. Außerdem ist es wichtig, Prozesse für sein Team zu vereinheitlichen. Es sollte sich nicht jedes Teammitglied neu Gedanken über dieses Thema machen. Hier kann definitiv Zeit eingespart werden.
Gerade wenn es um Workflow und Automatisierung geht, hört man viel über Grunt und deshalb habe ich es mir mal näher angesehen.

Grunt ist ein Taskrunner

Grunt ist eine JavaScript “Taskrunner” und basiert auf dem Node.js Framework. Es hilft dabei Aufgaben, die man immer wieder benötigt, zu automatisieren und zentral zu steuern. Zu diesen Aufgaben zählen zum Beispiel das Kompilieren von Sass und LESS oder das Komprimieren von Dateien. Hier ist aber noch lange nicht Schluss. Dank der großen Grunt-Community gibt es Hunderte von Plugins die uns bei unserer täglichen Arbeit unterstützen können. Bildoptimierung gehört natürlich auch dazu und das schauen wir uns gleich etwas genauer an.
Erste Erfahrungen mit Grunt werden im nächsten Abschnitt vorausgesetzt, da wir uns auf den Aspekt der Bildoptimierung konzentrieren wollen. Wer noch nicht so weit ist, dem empfehle ich den Grunt Getting started Guide, sowie diesen Blog Artikel.
Uns geht es ja um Bildbearbeitung und hierfür hat Grunt zahlreiche Plugins parat. Wir werden uns in einem Beispiel ImageOptim ansehen. Das Grunt Plugin ImageOptim arbeitet mit den Apps ImageOptim, ImageAlpha und JPEGMini for Mac. Diese müssen daher zu allererst installiert werden.

• ImageOptim
• ImageAlpha
• JPEGmini for Mac (App Store, kostenpflichtig)

JPEGmini ist nicht zwingend erforderlich, daher werden wir es bei unserem Beispiel auch nicht verwenden. Trotzdem zahlt es sich, wie man hier  in einer Statistik über Batch Image Tools gut erkennen kann, aus.
Jetzt können wir mit unserem Beispiel beginnen. Im Projektordner der Wahl, geht es mit der Grunt Integration weiter. Zuerst erstellen wir ein Standard package.json file.

{
    "name": "liechtencker-imageoptim",
    "version": "0.1.0",
    "author": "Christoph Rumpel",
    "devDependencies": {
        "grunt": "~0.4.1",
    }
}

Danach können wir die nötigen Grunt Komponenten, sowie ImageOptim installieren.

sudo npm install

Nun geht es an die Einstellungen und dafür erstellen wir die Gruntfile.js Datei.

module.exports = function(grunt) {
    grunt.initConfig({
    // ImageOptim settings
    imageoptim: {
        myTask: {
            options: {
                jpegMini: false,
                imageAlpha: true,
                quitAfter: true
                },
                files: ['assets/images', 'assets/css/images']
            }
        }
    });
    grunt.loadNpmTasks('grunt-imageoptim');
};

Im neuen Task imageoptim definieren wir die Tools die wir für die Bildoptimierung verwenden wollen, sowie die Ordner in denen die Bilder zu finden sind. Mit quitAfter, schließen wir nur die verwendeten Tools wieder.
Nun können wir mit dem folgenden Befehl ganz einfach unsere Bilder optimieren.

grunt imageoptim

Voila! Schnell, effektiv und am Allerwichtigsten automatisch. Natürlich gibt es hier noch eine Vielanzahl an weiteren Einstellungsmöglichkeiten. Dafür empfehle ich euch einfach einen Blick in die Dokumentation zu werfen.

Fazit

Wir haben mit Grunt ein mächtiges Tool um uns bei den täglichen Aufgaben als Designer oder Developer zu unterstützen. Wir können es unseren Anforderungen perfekt anpassen und damit unseren Workflow enorm verbessern. Wie wir gesehen haben ist auch die Integration von Bildoptimierung-Tools ein Kinderspiel und Ausreden diesbezüglich gehören daher hoffentlich der Vergangenheit an.