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');
![](https://i-blog.csdnimg.cn/blog_migrate/8348809cf52b7e84b212fa9fc4e8eeae.png)
免费学习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)的方法。 希望我已经给您足够的资源来帮助您入门。 环顾四周,看看最适合您,您的工作流程和您的应用程序的地方。 如果您知道我没有涉及的其他有用工具,请在评论中告诉我。
node.js发送邮件