Share
Das Entwerfen von E-Mails ist hart und archaisch. Inlining von CSS, Tabellendesign, unterschiedliche CSS-Unterstützung, mehrere Geräte, mehrere Clients, die Liste ist endlos. In diesem Tutorial erkläre ich, wie Sie Grunt zur Automatisierung und Optimierung Ihres Workflows verwenden können.
E-Mail-Design unterscheidet sich vom Webdesign. Oft entwerfen Sie eine Vorlage in einer isolierten Umgebung mit wenig bis gar keinen Abhängigkeiten oder freigegebenen Ressourcen. Möglicherweise kopieren Sie Markup von einem Ort (lokal, statisch) an einen anderen (ESP, Codebase). Es kann schwierig sein, Ihre E-Mail-Vorlagen beizubehalten. Sie können nur schwer mit den Teammitgliedern zusammenarbeiten, um die Konsistenz zu gewährleisten. Außerdem müssen Sie die verschiedenen Tests und das Inlining berücksichtigen, die vor dem Versenden durchgeführt werden müssen.
Ein Problem, das ich in der Vergangenheit hatte, ist, dass ich jedes Mal, wenn ich eine neue E-Mail-Vorlage benötigte, eine vorhandene Vorlage nehme und hier und da ein paar Anpassungen vornehmen würde. Dies würde zu inkonsistenten E-Mails im gesamten Produkt führen. Welches ist nur schlechte Praxis.
Ein anderes Problem, auf das ich gestoßen bin, ist, ich glaube, ich bin fertig, also habe ich die Vorlage durch ein CSS-Inliner-Tool geschrieben und es einem Entwickler übergeben, nur damit jemand eine Änderung anfordert oder einen Fehler aufzeigt. Der Workflow zum Bearbeiten / Inline / Kopieren muss dann immer wieder wiederholt werden.
Heutzutage verwende ich Grunt, um den Workflow für das E-Mail-Design zu optimieren. Es hilft mit ein paar Dingen:
Grunt ist ein Aufgabenläufer. Es ist eine Javascript-Datei, die die Aufgaben ausführt, die nacheinander ausgeführt werden sollen. Diese Liste von Dingen, die ich oben erwähnt habe? Wir können diese in eine Grunt-Datei packen und sie alle für uns erledigen lassen. Perfekt für wiederholte Aufgaben.
Um Grunt zum Laufen zu bringen, müssen Sie sich mit Befehlszeilen und Javascript ein wenig schmutzig machen. Aber es ist sehr einfach.
Chris Coyier gibt ein wirklich gutes Tutorial, um Grunt zum ersten Mal zu gründen. Ich werde die Grundlagen überarbeiten.
Grunt erfordert ein paar Dinge, um loszulegen. Node, ein Paketmanager und eine Gruntdatei.
Gehen Sie zur Node-Site und befolgen Sie die Anweisungen zur Installation.
Erstellen Sie einen neuen Ordner (z. B. aufgerufen) Email) Erstellen Sie dann eine Datei mit dem Namen package.json.
Fügen Sie diese JSON in die Datei ein.
"name": "emailDesign", "version": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Hier weisen wir den Node Package Manager an, Grunt Version 0.4.5 oder höher zu verwenden.
Um die obige Version von Grunt zu installieren, gehen Sie in der Befehlszeile in das Verzeichnis Ihres Projekts und geben Sie Folgendes ein:
npm installieren
Wenn Sie diesen Befehl ausführen, bemerken Sie a Knotenmodule Ordner erscheinen.
Führen Sie noch in Ihrem E-Mail-Verzeichnis den folgenden Befehl aus:
npm install -g grunt-cli
Hinweis: Möglicherweise müssen Sie diesen Befehl mit voranstellen Sudo wenn Sie aufgefordert werden, es als root / Administrator auszuführen.
Danach können wir Grunt-Befehle in die Befehlszeile eingeben.
Erstellen Sie eine Datei mit dem Namen Gruntfile.js in Ihrem Projektordner und fügen Sie das folgende JavaScript ein:
Accentsconagua
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default'); ;Dies ist das Nackte, was Grunt benötigt, um zu funktionieren. Jetzt noch aufregenderes Material hinzufügen.
Beginnen wir mit etwas einfachem, aber lebenswichtigem: Inlining von CSS. Nehmen wir an, wir haben eine E-Mail-Vorlage mit CSS im Kopf. CSS im Kopf ist leicht zu pflegen (ish), aber die Vorlage, die wir eigentlich wollen senden sollte CSS eingebettet haben.
Wir werden eine ziemlich einfache HTML-E-Mail mit dem CSS im Kopf verwenden. Speichern Sie das folgende Markup als email.html im Verzeichnis Ihres Projekts.
Hallo Welt!
Dies ist eine E-Mail-Vorlage.
Als Nächstes werden wir eine CSS-Inliner-Task verwenden, um jede Stilregel in den HTML-Elementen selbst zu platzieren. Ich mag diesen Inliner, da er keine anderen Abhängigkeiten erfordert. Gehen Sie zurück zur Befehlszeile und führen Sie Folgendes aus:
npm install grunt-inline-css --save-dev
Dadurch wird die Grunt-Inline-Css-Task zu Ihrem hinzugefügt npm_modules Ordner sowie die package.json Datei.
Als nächstes fügen Sie die Aufgabe zu Ihrem hinzu Gruntfile.js Verwenden Sie dieses Snippet, wo Sie es sehen grunt.registerTask ('default');
grunt.loadNpmTasks ('grunt-inline-css');Fügen Sie dann in den Konfigurationsoptionen die Option ein grunt.initConfig () Methode:
inlinecss: main: Optionen: , Dateien: 'email-inlined.html': 'email.html'
Inlinecss soll die Datei namens "email.html" finden und "email-inlined.html" ausgeben. Zum Schluss rufen wir es von der Grunt-Standardaufgabe auf:
grunt.registerTask ('default', ['inlinecss']);Ihre Gruntfile sollte jetzt ungefähr so aussehen:
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')), inlinecss: main: Optionen: , Dateien: 'email-inlined.html' : 'email.html'; grunt.loadNpmTasks ('grunt-inline-css'); grunt.registerTask ('default', ['inlinecss']); ;Geben Sie erneut ein, um zur Befehlszeile zurückzukehren grunzen und geben Sie es ein, um es auszuführen.
Sie sollten jetzt mit einer email-inlined.html Datei mit der CSS-Inline. Wenn Sie beide HTML-Dateien in Ihrem Browser öffnen, sollten sie gleich aussehen.
Mit etwas Glück, das Sie von der Leistungsfähigkeit von Grunt bei der Automatisierung Ihres E-Mail-Design-Workflows überzeugt haben wird. Darüber hinaus haben Sie nach dieser Einführung den Rahmen geschaffen, um noch weiter zu gehen.
Welche anderen E-Mail-Designaufgaben könnten Sie automatisieren??
Dies ist das Gruntfile, das auf GitHub Open-Source ist, das ich oft verwende. Schauen wir uns die einzelnen Aufgaben an, um zu sehen, was wirklich los ist.
Ich verwalte mein CSS gerne mit SCSS, daher muss Grunt als Erstes die Haupt-SCSS-Datei kompilieren.
Assemble ist ein statischer Standortgenerator. Es stellt das HTML zusammen, indem es die Hauptlayoutvorlagen und den Inhalt für jede E-Mail zusammenstellt.
Ich verwende Premailer für Inline-CSS. Wenn Sie sich fragen, warum ich den Inliner nicht von oben benutze, habe ich herausgefunden, dass der Premailer Medienabfragen besser unterstützt. Damit Medienabfragen funktionieren können, möchten wir, dass sie im Kopf gelassen werden und nicht inline.
Hinweis: premailer hat Abhängigkeiten, die ebenfalls installiert werden müssen, einschließlich Ruby und ein paar Edelsteine.
Um eine E-Mail an einen Posteingang zu senden, verwende ich die Mailgun-API. Dadurch wird die ausgegebene HTML-E-Mail an meinen Posteingang gesendet, sodass ich sie in dem von mir ausgewählten Client selbst sehen kann.
Dies ist auch eine nützliche Methode, um Ihre Vorlage an Litmus zu senden, wenn Sie eine Vorschau in anderen E-Mail-Clients anzeigen möchten. Dazu muss der Empfänger geändert werden.
Dies ist praktisch, wenn Sie Transaktions-E-Mails senden und Bildressourcen irgendwo aufbewahren müssen. Wenn Sie einen E-Mail-Diensteanbieter (E-Mail-Diensteanbieter) zum Versenden Ihrer E-Mails verwenden, besteht eine gute Chance, dass Sie Ihre Bildressourcen für Sie speichern. In diesem Fall ist dies also kein Problem.
Um die Aufgaben auszuführen, haben wir eine Reihe von Befehlsoptionen.
grunzen führt die Standardaufgabe aus. Dies beinhaltet das Kompilieren von Sass, das Zusammenstellen von Vorlagen und das Inlinieren des CSS. Sie können die Ausgabe dann in Ihrem Browser öffnen.grunt send --template = MY_TEMPLATE.html führt die oben genannten Aufgaben aus und versendet die von Ihnen angegebene E-Mail-Vorlage. Denken Sie daran, die Mailgun-Einstellungen in Gruntfile.js zu aktualisieren.grunzen cdnify führt die Standardaufgaben erneut aus, lädt jedoch auch lokale Bildelemente hoch und ersetzt dann die Dateipfade durch den CDN-Pfad.grunt cdnify send -template = MY_TEMPLATE.html Es gibt weitere Aufgaben, die Sie hinzufügen möchten, um Ihren Prozess zu unterstützen, oder Sie möchten einige entfernen. Gehen Sie zum Plugin-Verzeichnis von Grunt, um die Aufgaben zu finden, die Ihren Arbeitsablauf erleichtern.
Hier sind einige Vorlagen, die ich zuvor erstellt habe.
Mit dem oben beschriebenen Workflow und der Gruntfile habe ich eine Handvoll Transaktions-E-Mails für Dev-Teams zur Verfügung gestellt. Fühlen Sie sich frei, sie zu verwenden, oder verwenden Sie sie als Vorlage für Ihre eigenen E-Mail-Designs.
Viele Aufgaben, die mit dem E-Mail-Design verbunden sind, können mühsam und umständlich sein. Lassen Sie Grunt die harte Arbeit für Sie erledigen und Sie werden den gesamten Prozess viel angenehmer finden!
