Lukas
3 Minuten

Favicons und andere Icons zu generieren ist doof, denn für fast jedes Gerät muss ein eigenes Icon bereitgestellt werden. Gut, dass sich das mit Gulp automatisieren lässt.

Es gibt zwar richtig viele Packages für Gulp, die automatisch Favicons generieren können - doch wieso unnötig viele Packages installieren und Abhängigkeiten schaffen, wenn es auch ohne geht? Die Gulp-Konfigurationsdatei wird schnell unübersichtlich, wenn zu viele verschiedene Plugins genutzt werden.

Wir zeigen euch, wie wir in unseren Projekten Favicons und Apple Touch Icons mit zwei Gulp-Plugins (gulp-image-resize und gulp-rename) generieren, die wir für viele verschiedene Tasks wiederverwenden können.

Damit die Gulp-Pipeline funktioniert, müssen GraphicsMagick und/oder ImageMagick installiert werden. Unter osx geht das mit brew install graphicsmagick beziehungsweise mit brew install imagemagick, unter ubuntu mit apt-get install graphicsmagick beziehungsweise mit apt-get install imagemagick.

Gulp-Task

In unserer gulpfile.js gibt es ein Array, das alle relevanten Parameter für die unterschiedlichen Icons enthält - also das Suffix, sowie Breite und Höhe. Gulp durchläuft den Task für jedes Icon und setzt die Werte aus dem Array ein.

var gulp = require('gulp');
var imageResize = require('gulp-image-resize');
var rename = require("gulp-rename");

var icons = [
  {suffix: '@16x16', width: 16, height: 16, format: 'png'},
  {suffix: '@32x32', width: 32, height: 32, format: 'png'},
  {suffix: '@96x96', width: 96, height: 96, format: 'png'},
  {suffix: '@152x152', width: 152, height: 152, format: 'png'},
  {suffix: '@167x167', width: 167, height: 167, format: 'png'},
  {suffix: '@180x180', width: 180, height: 180, format: 'png'}
]

gulp.task('icons', function(done) {
  icons.forEach(function(icon) {
    var resizeIcons = {
      imageMagick: true,
      width: icon.width,
      height: icon.height,
      format: icon.format
    }
    return gulp
      .src('source/assets/img/icon.png')
      .pipe(imageResize(resizeIcons))
      .pipe(rename({suffix: icon.suffix}))
      .pipe(gulp.dest('build/assets/img'));
  });
  done();
});

Die Icons können nun im Webprojekt genutzt werden, wir zeigen, wie wir die Icons in Middleman-Projekten einbinden.

Kaffeekasse

Der Artikel hat Dir weitergeholfen?

Der Artikel hat Dir weitergeholfen? Sehr schön, so soll es sein! Wenn Dir unsere Snippets weiterhelfen, supporte uns auf Steady.com.

Supporte uns auf Steady.com