Gulp-MJML 项目教程

最新推荐文章于 2024-08-28 08:23:37 发布

滑隽蔚Maia

最新推荐文章于 2024-08-28 08:23:37 发布

阅读量135

点赞数 1

本文链接：https://blog.csdn.net/gitblog_00415/article/details/141618014

版权

Gulp-MJML 项目教程

gulp-mjmlAdd Gulp to your MJML workflow!项目地址:https://gitcode.com/gh_mirrors/gu/gulp-mjml

项目介绍

Gulp-MJML 是一个用于将 MJML 标记语言转换为 HTML 的 Gulp 插件。MJML 是一种旨在简化响应式电子邮件设计的标记语言。通过使用 Gulp-MJML，开发者可以自动化处理 MJML 文件到 HTML 的转换过程，从而更高效地构建和维护电子邮件模板。

项目快速启动

安装依赖

首先，创建一个新的 npm 项目并安装必要的 npm 包：

npm init
npm install gulp gulp-mjml mjml

配置 Gulp 任务

在项目根目录下创建一个 gulpfile.js 文件，并添加以下内容：

const gulp = require('gulp');
const mjml = require('gulp-mjml');
const mjmlEngine = require('mjml');

gulp.task('default', function () {
  return gulp.src('src/*.mjml')
    .pipe(mjml(mjmlEngine))
    .pipe(gulp.dest('dist'));
});

运行 Gulp 任务

在终端中运行以下命令以执行 Gulp 任务：

npx gulp

这将把 src 目录下的所有 .mjml 文件转换为 HTML 文件，并输出到 dist 目录中。

应用案例和最佳实践

应用案例

假设你有一个名为 example.mjml 的 MJML 文件，内容如下：

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          Hello, World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

运行 Gulp 任务后，dist 目录中将生成一个名为 example.html 的文件，内容如下：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title> </title>
  <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a { padding:0; }
    body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
    table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
    img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
    p { display:block;margin:13px 0; }
  </style>
</head>
<body>
  <div>
    <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
      <tr>
        <td align="center" style="padding:0;">
          <table role="presentation" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
            <tr>
              <td align="center" style="padding:40px 0 30px 0;">
                Hello, World!
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

最佳实践

模块化设计：将 MJML 文件拆分为多个组件，以便于管理和复用。
自动化测试：使用 Gulp 任务自动化测试 MJ

gulp-mjmlAdd Gulp to your MJML workflow!项目地址:https://gitcode.com/gh_mirrors/gu/gulp-mjml

滑隽蔚Maia

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Gulp-MJML 项目教程

Gulp-MJML 项目教程 gulp-mjmlAdd Gulp to your MJML workflow!项目地址:https://gitcode.com/gh_mirrors/gu/gulp-mjml 项目介绍Gulp-MJML 是一个用于将 MJML 标记语言转换为 HTML 的 Gulp 插件。MJML 是一种旨在简化响应式电子邮件设计的标记语言。通过使用 Gulp-MJML，开发者...
复制链接

扫一扫