18: Build Tool – Grunt svgstore

Wir können definitiv nerdiger mit unseren Build-Tools werden. Zum Zeitpunkt der Veröffentlichung ist Grunt das Paradebeispiel für Build-Tools. Es gibt Konkurrenten, aber Grunt ist schon seit geraumer Zeit am beliebtesten. Wenn Sie neu bei Grunt sind, habe ich eine Vielzahl von Dingen, die ich darüber geschrieben und als Screencast aufgenommen habe

• Grunt für Leute, die Dinge wie Grunt seltsam und schwierig finden
• #130: Erste Momente mit Grunt
• #134: Ein Rundgang durch eine im Entstehen begriffene Website, die mit Jekyll, Grunt, Sass, einem SVG-System und mehr erstellt wurde

Selbst wenn Sie Grunt noch nie verwendet haben, beginnen wir in diesem Screencast so ziemlich von Grund auf und bringen alles in Gang. Die Idee ist, dass wir von dem typischen "Ordner voller SVGs" ausgehen. Jede Datei.svg repräsentiert eine Grafik, die wir auf der Website verwenden möchten. Wir möchten all dies in einem SVG-Defs-Block komprimieren, der einsatzbereit ist. Symbole erstellt, Barrierefreiheitsinformationen nach bestem automatisiertem Vermögen hinzugefügt usw.

Sobald wir Grunt zum Laufen gebracht und das Build-Tool installiert haben, auf das wir uns hier konzentrieren, grunt-svgstore, sind wir startklar.

In unserer kleinen Demo haben wir Grunt über die Gruntfile.js so konfiguriert, dass es unseren Ordner mit SVGs durchsucht und eine defs.svg-Datei erstellt, die wir in einen Includes-Ordner legen.

module.exports = function(grunt) {

  grunt.initConfig({
    svgstore: {
      options: {
        formatting : {
          indent_size : 2
        }
      },
        default: {
          files: {
          'includes/defs.svg': ['svg/*.svg'],
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-svgstore');

};

Ein Upgrade von hier aus würde die Verwendung eines "watch"-Plugins beinhalten, das diesen Ordner mit SVGs überwacht und diese Aufgabe automatisch ausführt, wenn sich Dateien ändern (oder hinzugefügt oder gelöscht werden). Wenn Sie einen Website-Builder wie Jekyll verwenden, könnten Sie sogar einen jekyll build danach auslösen, um sicherzustellen, dass die neue Datei in der erstellten Website verfügbar ist.