如何在MJML Gulp任务中正确配置juicePreserveTags为img、br标签添加自闭合标签

核心问题定位 #

之前配置无效的核心原因是juicePreserveTags的传值类型不匹配：

• 之前参考的字符串格式配置，是早年MJML在静态配置文件、命令行场景下的适配写法，这类场景需要把配置序列化为字符串做跨进程传递。
• 在Gulp构建直接调用MJML API的场景中，juicePreserveTags是透传给MJML内部Juice内联样式工具的原生参数，传入JSON字符串会被Juice识别为无效值，完全不会触发标签保留逻辑。

基础正确配置 #

直接把juicePreserveTags从JSON字符串替换为结构匹配的JS对象，调整后的构建函数代码：

export function buildMjml() {
  const options = {
    beautify: true,
    minify: false,
    keepComments: false,
    // 直接传入原生JS对象，无需序列化为JSON字符串
    juicePreserveTags: {
      imgTag: { start: '<img', end: '/>' },
      brTag: { start: '<br', end: '/>' }
    },
  };

  return gulp.src(PATHS.mjml.src)
    .pipe(mjmlGulp(mjml, options))
    .pipe(gulp.dest(PATHS.dist));
}

版本兼容补全 #

如果调整参数类型后，生成文件里的img、br自闭合标签还是被移除，需要调整HTML美化环节的规则：

• MJML默认开启的beautify选项会调用js-beautify做代码格式化，默认规则会自动抹除单标签的自闭合后缀，需要把原配置中简单的beautify: true替换为自定义格式化规则，明确指定需要保留自闭合的单标签列表：

export function buildMjml() {
  const options = {
    beautify: {
      indent_size: 2,
      void_elements: ["img", "br", "hr", "input", "meta", "link"],
      unformatted: [],
      inline: []
    },
    minify: false,
    keepComments: false,
    juicePreserveTags: {
      imgTag: { start: '<img', end: '/>' },
      brTag: { start: '<br', end: '/>' }
    },
  };

  return gulp.src(PATHS.mjml.src)
    .pipe(mjmlGulp(mjml, options))
    .pipe(gulp.dest(PATHS.dist));
}

• 调整完成后重新执行构建任务，无需手动修改原始MJML源码的标签写法，生成产物中的img、br标签会自动补全/>的自闭合后缀，满足邮件客户端的兼容性要求。

内容的提问来源于stack exchange，提问作者Dali