gulpfile.js

const path = require("path");

const gulp = require("gulp");
const textSimple = require("gulp-text-simple");
const rename = require("gulp-rename");

const mjml2html = require("mjml");
const prettier = require('gulp-prettier');

const TYPESCRIPT_SOURCE_DIR = "src";

const TEMPLATES_SOURCE_DIR = "templates/mjml";
const TEMPLATES_SOURCE = `${TEMPLATES_SOURCE_DIR}/*.mjml`;
const TEMPLATES_OUTPUT_DIR = `${TYPESCRIPT_SOURCE_DIR}/templates/html`;

/**
 * Transform a mjml template to a Typescript function outputting HTML.
 *
 * @param content the content of mjml template as string
 * @param options options object (see gulp-text-simple plugin https://www.npmjs.com/package/gulp-text-simple)
 */
const toMjml = (content, options) => {
  const name = path.basename(options.sourcePath);
  return [
    `// DO NOT EDIT THIS FILE`,
    `// this file was auto generated from '${name}' by gulp generate:templates`,
    `// eslint-disable-next-line max-params`,
    `export default function(`,
    `  title: string,`,
    `  headlineText: string,`,
    `  senderOrganizationName: string,`,
    `  senderServiceName: string,`,
    `  organizationFiscalCode: string,`,
    `  titleText: string,`,
    `  contentHtml: string,`,
    `  footerHtml: string,`,
    `  organizationLogoPath: string = "https://assets.cdn.io.italia.it/logos/organizations"`,
    `): string {`,
    `  return \``,
    `${mjml2html(content, { minify: true }).html}\`;`,
    `}`,
    ""
  ].join("\n");
};

/**
 * Generate Typescript template files from mjml (https://mjml.io/).
 */
gulp.task("generate:templates", () => {
  return gulp
    .src(TEMPLATES_SOURCE)
    .pipe(textSimple(toMjml)())
    .pipe(prettier())
    .pipe(rename(filepath => (filepath.extname = ".ts")))
    .pipe(gulp.dest(TEMPLATES_OUTPUT_DIR));
});

gulp.task("default", ["generate:templates"]);