Html E-Mail-Entwicklung und Testing mit Foundation for Emails, Gmail und Postfix

von

Zurb hat das E-Mail-Framework Foundation for Emails (früher Ink) überarbeitet, Version 2 steht vor der Tür (Migration Guide). Und es gibt ein super Template mit Handlebars, eigener Template-Engine Inky, Scss und Email-Inliner!

Wie man diesem Setup Test-E-Mails beibringt, habe ich kürzlich herausgefunden.

Installation des Foundation for Emails Template

Falls man nicht mit dem Tool Foundation-CLI arbeitet, darf man das Template manuell installieren mit

git clone https://github.com/zurb/foundation-emails-template <project-name>

Dann installiert man im Projektordner alle Abhängigkeiten mit

cd projectname
npm install

Danach startet man das Projekt mit npm start oder finalisiert die E-Mail mit npm run build.

E-Mails per PHP von localhost senden auf dem Mac mit Gmail

Das einzige, das mir hier zu meinem Glück fehlte, war die Funktion, automatisiert Testmails zu versenden. Um das zu können, folgte ich zuerst dank El Capitan diesem Tutorial, um meinen E-Mail-Server Postfix (kommt mit OS X) zu fixen.

Achtung! Das Passwort in der Datei /etc/postfix/sasl_passwd ist ein App-Passwort, welches man bei Google bekommt. Danach ggf. nochmal sudo postmap /etc/postfix/sasl_passwd ausführen.

Nun erstelle ich die Datei mail.php im Hauptverzeichnis des Projektes (Gist):

//  get args from command line
//  http://stackoverflow.com/questions/6826718/pass-variable-to-php-script-running-from-command-line
if ( defined('STDIN') ) {
  $dir = $argv[1] ? $argv[1] : './';
  $ext = $argv[2] ? $argv[2] : 'html';
} else {
  die( 'not on a local machine.' );
}

//  set mail vars
$recipients = array( 'mail@gmail.com', 'mail@anotherservice.com', 'mail@yourdomain.com' );
$sender     = 'mail@yourdomain.com';
$reply      = 'mail@yourdomain.com';
 
$header     = 'MIME-Version: 1.0' . "\r\n";
$header    .= 'Content-type: text/html; charset=utf-8' . "\r\n";
 
$header    .= 'From: ' . $sender . "\r\n";
$header    .= 'Reply-To: ' . $reply . "\r\n";

//  loop over files in given directory:
//  http://is.php.net/manual/en/function.glob.php
foreach ( glob( $dir . '*.' . $ext ) as $file ) {

    //  set subject to a unique still readable string to be found easily in the inbox
    $subject = time() . ' ' . $file;

    //  grab content of inlined file
    $body = file_get_contents( $file );

    //  and of we go!
    foreach ( $recipients as $recipient ) {
        mail( $recipient, $subject, $body, $header );
    }

}

Mail senden mit Npm aus dem Terminal

Im letzten Schritt modifizieren wir die Datei package.json unseres Template Verzeichnis‘ – wir fügen den Befehl npm run mail hinzu (Gist).

{
  "scripts": {
    "mail" : "php mail.php ./dist/ html"
  }
}

Kommentieren