18: Build Tool - Grunt svgstore - CSS-Tricks

Mit unseren Build-Tools können wir definitiv ein bisschen nerdiger werden. Zum Zeitpunkt der Veröffentlichung ist Grunt das Aushängeschild der Build-Tools. Es gibt Konkurrenten, aber Grunt ist seit einiger Zeit der beliebteste. Wenn Sie neu bei Grunt sind, habe ich eine Vielzahl von Dingen, die ich darüber geschrieben und per Screencast gesendet habe:

Grunzen für Leute, die denken, dass Dinge wie Grunzen seltsam und hart sind
# 130: Erste Momente mit Grunzen
# 134: Eine Tour durch eine laufende Site, die mit Jekyll, Grunt, Sass, einem SVG-System und mehr erstellt wurde

Selbst wenn Sie Grunt noch nie benutzt haben, fangen wir in diesem Screencast so ziemlich von vorne an und bringen alles in Gang. Die Idee ist, dass wir aus dem Inbegriff eines "Ordners voller SVGs" heraus arbeiten. Jede Datei.svg repräsentiert eine Grafik, die wir auf der Site verwenden möchten. Wir wollen das alles in einen gebrauchsfertigen SVG-Defs-Block zerquetschen. Erstellte Symbole, Informationen zur Barrierefreiheit, die nach bestem Wissen und Gewissen hinzugefügt wurden usw.

Sobald wir Grunt zum Laufen gebracht und das Build-Tool installiert haben, auf das wir uns hier konzentrieren, grunt-svgstore, können wir loslegen.

In unserer kleinen Demo haben wir Grunt so konfiguriert, dass sie über die Datei Gruntfile.js unseren Ordner voller SVGs durchsucht und eine defs.svg-Datei erstellt, die wir in einem Includes-Ordner ablegen.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Das Aufsteigen von hier aus würde die Verwendung eines "Watch" -Plugins beinhalten, um diesen Ordner mit SVGs zu überwachen und diese Aufgabe automatisch auszuführen, wenn sich eine der Dateien ändert (oder hinzugefügt oder gelöscht wird). Wenn Sie einen Site Builder wie Jekyll verwenden, können Sie sogar jekyll builddanach eine auslösen , um sicherzustellen, dass die neue Datei auf der erstellten Site verfügbar ist.