node.js发送邮件_使用Node.js发送电子邮件-CSDN博客

node.js发送邮件

大多数Web应用程序将需要发送奇数电子邮件。无论是本质上是交易性的，还是以市场为导向的，例如时事通讯，促销或产品推荐，这都是无处不在的要求。而且，如果您要发送电子邮件，则很可能希望使用HTML发送出去。

实际上，发送电子邮件非常简单。也就是说，在批量发送时，您还需要考虑各种其他问题，例如处理退回，跟踪点击以及与垃圾邮件过滤器进行斗争。

但是，对于本文而言，我们更感兴趣的是如何处理HTML电子邮件模板以及随之而来的所有问题。

不幸的是，电子邮件客户端之间的各种限制，怪异和差异意味着HTML电子邮件充满了困难。

但是，即使在整个SitePoint上，也有许多构建HTML电子邮件的良好资源。有Massimo的指南来构建您的第一封电子邮件时事通讯，Tim的编码指南以及Lauren的最佳实践系列。

但是，本文的重点并不是在开发HTML电子邮件时遇到的问题，而是在一些可以帮助您自动完成该过程的工具上。我们将集中在两个主要方面：从Node.js应用程序发送HTML电子邮件，以及使用诸如Grunt之类的工具。

让我们看几个主要问题和一些解决方案。

纯文本版本

电子邮件客户端HTML呈现功能虽然远远不能达到您在浏览器中可以执行的功能，但大多数都支持HTML –可能是基本的。但不是所有的。此外，有些人明确希望接收纯文本版本，并且会在其客户端中阻止HTML版本。因此，我们需要发送纯文本版本以及您的全开，全开HTML电子邮件。

广义上讲，您可以采用以下两种方法之一-准备单独的纯文本模板，或选择从HTML自动生成模板。后者是否有效，可能取决于HTML版本的复杂性和格式，结果可能不一致。就我个人而言，我更喜欢生成一个单独的纯文本版本，因为它使我可以更好地控制输出，但是如果您希望使其自动化，则有很多选择。

有一个Nodemailer（稍后将介绍）插件可以自动为您从HTML电子邮件中提取文本，这是Premailer执行的许多任务之一-我们稍后将介绍的另一种工具。

内联CSS

由于许多电子邮件客户端的限制，您应该始终内联CSS 。

我们也不只是在谈论将样式放在HTML电子邮件的<head>中的<style>标记中。相反，需要使用内联style属性将CSS样式应用于每个元素。考虑以下示例：

.btn-primary {
  text-decoration: none;
  color: #FFF;
  background-color: #348eda;
  border: solid #348eda;
  border-width: 10px 20px;
  line-height: 2;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  border-radius: 5px;
  text-transform: capitalize;
}

<tr>
  <td class="content-block">
    We may need to send you critical information about our service and it is important that we have an accurate email address.
  </td>
</tr>
<tr>
  <td class="content-block">
    <a href="{{ url }}" class="btn-primary">Confirm your email address</a>
  </td>
</tr>

这是相同HTML片段，内联CSS：

<tr style="margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px;">
  <td class="content-block" style="margin: 0; padding: 0 0 20px; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top;">
    We may need to send you critical information about our service and it is important that we have an accurate email address.
  </td>
</tr>
<tr style="margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px;">
  <td class="content-block" style="margin: 0; padding: 0 0 20px; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top;">
    <a href="{{ url }}" class="btn-primary" style="margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; background-color: #348eda; border: solid #348eda; border-width: 10px 20px; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize;">Confirm your email address</a>
  </td>
</tr>

坦率地说，手动执行此操作非常麻烦-更不用说使HTML电子邮件模板几乎不可维护了。这也是自动化所急需的任务。果然，我们现在将讨论许多解决方案。

果汁

Juice是一个JavaScript库，用于自动内联CSS，使其非常适合HTML电子邮件。只需为其提供一些HTML和样式表，它将为您将其转换为无法维护的混乱，如上面的示例。

您可以通过模块， Grunt或Gulp在Node.js应用程序中使用Juice。

Grunt内联CSS

您也可以使用此Grunt插件。用法很简单。

安装插件：

npm install grunt-inline-css --save-dev

注册任务：

grunt.loadNpmTasks('grunt-inline-css');

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

最后，配置它以告诉它要处理什么：

grunt.initConfig({
  inlinecss: {
    main: {
      options: {
      },
      files: {
        'templates/emails/_inlined/confirm-email.html': 'templates/emails/_raw/confirm-email.html',
        'templates/emails/_inlined/password-reset.html': 'templates/emails/_raw/password-reset.html'
      }
    }
  }
})

值得指出的是，该插件在后台使用了Juice。

预邮器

Premailer是用于处理HTML电子邮件的在线服务，它执行许多任务：

内联CSS
将相对路径（例如链接）转换为绝对路径
根据电子邮件客户端的功能检查CSS属性
（可选）它可以自动为您创建替代文本版本

为此，使用基于Web的服务非常好，但是每次进行更改时都必须手动复制并粘贴源，很快就会变得乏味。幸运的是，还有一个API ，还有一个软件包，它使您可以更轻松地从Node应用程序中使用该API。

要安装该软件包，请运行以下命令：

npm install premailer-api

这是一个使用原始模板的命令行工具的简单示例，该模板存储为名为in.html的文件，然后将其发送到Premailer进行处理。然后将处理后HTML输出到out.html ，并将纯文本版本输出到out.txt ：

var premailer = require('premailer-api')
  , fs = require('fs');

var template = fs.readFileSync('./in.html', 'utf8');

premailer.prepare(
  {
    html: template 
  }, 
  function(err, email) {  
    fs.writeFileSync('out.html', email.html);
    fs.writeFileSync('out.txt', email.text);
  }
);

为了说明–给定以下HTML：

<!-- in.html -->
<html>
  <head>
    <title>My Email</title>
    <style type="text/css">
      a { color: #336699; }
    </style>
  </head>
  <body>
    Styles inlined with 
    <a href="http://premailer.dialect.ca">Premailer</a> via 
    <a href="https://github.com/JedWatson/node-premailer">node-premailer</a>.
  </body>
<html>

这将为您提供以下内容：

<!-- out.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
  <title>My Email</title>
  <style type="text/css">
    a { color: #336699; }
  </style>
</head>
<body>
  Styles inlined with 
  <a href="http://premailer.dialect.ca" style="color: #336699;">Premailer</a> via 
  <a href="https://github.com/JedWatson/node-premailer" style="color: #336699;">node-premailer</a>.
</body>
</html>

和纯文本版本：

// out.txt
Styles inlined with
Premailer ( http://premailer.dialect.ca ) via
node-premailer ( https://github.com/JedWatson/node-premailer ).

请注意，除了内联CSS外，Premailer还将链接转换为适合纯文本的方式。

您可以使用许多选项–有关更多详细信息，请参阅Premailer文档。

您可以使用多种方式使用Premailer。有一个Grunt插件， Gulp插件，或者您可以按照上面的示例代码的方式滚动自己的命令行工具。

其他资产

如果您使用的是HTML电子邮件，则可能至少包含一张图片。使您的整个电子邮件完全基于图像（虽然令人沮丧地普遍使用）是一个巨大的禁忌，但是一些图像将大大有助于完善它们。

您可以对图像进行很多操作。显然，链接的图像需要在外部可用，因此确保使用绝对（而非相对）路径非常重要。 Premailer是这里的一种选择。

一种常见的方法是将HTML电子邮件的图像上载到Content Delivery Network（CDN）或Amazon S3之类的服务。

Grunt Email Design Workflow软件包与Rackspace的Cloud Files集成在一起，或者有许多用于与S3集成的插件。

任务执行者

我们已经介绍了一些可以从任务运行者那里使用的工具，例如Grunt或Gulp。

Grunt / Gulp工作流程示例可能涉及：

使用Juice内联CSS
识别图像，上传到S3并更正其路径
缩小HTML
预编译车把模板
将预编译的模板合并到JST文件中

使用Grunt处理电子邮件模板的最简单方法也许是从Grunt Email Boilerplate开始。那里有很多功能-您不一定要使用所有功能-因此请转到文档以了解其功能。当然， Gulp也有类似的东西。

如果您是Yeoman，那么有很多专门用于HTML电子邮件的生成器，例如this 。

电子邮件模板库

就Node.js解决方案而言，您可以将电子邮件模板库称为HTML电子邮件的Swiss-Army工具。

它几乎负责创建HTML电子邮件的整个过程等等。

该库提供以下功能：

支持ejs，Jade，Swig，车把，标志和灰尘
使用Less，SASS，Stylus或Styl进行CSS预处理
CSS inlinig使用Juice
与Nodemailer集成，邮戳
支持批量发送

换句话说，这是NodeHTML电子邮件的厨房接收器。让我们来看看它，以及如何使用它。

用法

通过npm安装：

npm install email-templates

接下来，在某个位置创建一个目录来保存模板。在其中为每种电子邮件类型创建一个目录。例如，一个目录用于确认电子邮件，另一个目录用于密码重置说明，以及一个通用的消息包装器。

这是示例目录结构：

templates
  emails
    confirm-email
    password-reset
    welcome

接下来，创建您的模板。至少，每个电子邮件派生工具都需要一个模板来呈现HTML版本。它的文件名很重要–必须命名为html.ext ，其中.ext代表您选择的模板库。因此，例如，如果您使用的是车把，则需要将文件html.hbs为Jade， html.jade等。请注意，您需要确保已安装适当的模板引擎！

您可能还需要创建一个样式表。再次使用扩展名调用此styles.ext ，以告诉库如何处理它。标准CSS的.css或.scss或.less ，如果要使用预处理器，则依此类推。

如果您希望创建自己的纯文本版本，请创建一个名为text.ext的文件。与扩展名相同的规则与HTML模板相同，因此将其命名为诸如text.hbs ， text.jade等。

为了说明这一点，如果选择的模板语言是Handlebars，而您恰好更喜欢SCSS，则可以按照以下方法布置confirm-email目录：

templates
  emails
    confirm-email
      html.hbs
      text.hbs
      styles.scss

接下来，您需要配置传输机制。该库无缝工作NodeMailer和邮戳 ; 就本文而言，我们将使用Nodemailer，因为它不需要任何第三方服务，并且是从Node.ks发送电子邮件的最受欢迎的选择之一。

在大多数情况下，您可能会希望通过SMTP使用Nodemailer，尽管还有各种各样的其他传输方式，从Sendmail到SES和Sendgrid 。

这是使用SMTP的示例：

var nodemailer = require('nodemailer');
var transport = nodemailer.createTransport(smtpTransport({
  host: 'smtp.yourprovider.org',
  port: 25,
  auth: {
    user: 'username',
    pass: 'password'
  }
}));

如果您使用的是Gmail，但使用的是一些非标准设置，则可以使用以下快捷方式：

var nodemailer = require('nodemailer');
var transport = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'username@gmail.com',
    pass: 'password'
  }
});

现在已经配置好，您可以发送一封电子邮件，如下所示：

emailTemplates(templatesDir, function(err, template) {

  if (err) {
    console.log(err);
  } else {

  var locals = {
    email: 'user@example.com',
    url: 'http://acme.com/confirm/xxx-yyy-zzz'
  };

    // Send a single email
    template('confirm-email', locals, function(err, html, text) {
      if (err) {
        console.log(err);
      } else {
        transport.sendMail({
          from: 'Acme Corp <no-reply@acme.com>',
          to: locals.email,
          subject: 'Please confirm your e-mail address',
          html: html,
          text: text
        }, function(err, responseStatus) {
          if (err) {
            console.log(err);
          } else {
            console.log(responseStatus.message);
          }
        });
      }
    });
  }
});

电子邮件模板库的优缺点

显然，该库解决了许多围绕HTML电子邮件的问题。它还为您提供了极大的灵活性。如果您想使用Jade和SASS，则可以–同样是Handlebars和Less，或Swig和Stylus。

但是，有一件事–如果您要发送大量电子邮件，则可以分批发送，并且库每批只会处理一次模板。但是，下次发送电子邮件或一批电子邮件时，它将再次贯穿整个过程。如果您发送大量电子邮件，则最好创建预编译的模板。

还请记住，您需要确保与资产的链接和路径是绝对的，并可以选择优化图像或将资产上传到内容分发网络（CDN）。

测试您HTML电子邮件

当然，如果没有测试说明，发送HTML电子邮件的指南是不完整的。

Mailcatcher是用于“拦截”您的应用程序发送的电子邮件的非常有用的工具。您只需在计算机上将其作为后台进程运行，将应用程序配置为使用适当的端口，就可以通过计算机上基于Web的界面查看电子邮件。 Matthew Setter 在SitePoint上对此进行了全面的介绍。

通过比较电子邮件在各种客户端中的呈现方式的屏幕快照，还值得查看Litmus来测试HTML电子邮件。

结论

HTML电子邮件确实是一种痛苦，但是使用自动化可以减轻很多麻烦。在本文中，我研究了Node.js应用程序中的一些选项以及使用任务运行器（例如Grunt）的方法。希望我已经给您足够的资源来帮助您入门。环顾四周，看看最适合您，您的工作流程和您的应用程序的地方。如果您知道我没有涉及的其他有用工具，请在评论中告诉我。