Плагин Gulp для замены переменных на мета значения

Question

Плагин Gulp для замены переменных на мета значения

Я создаю шаблоны электронной почты для почтового приложения Marketo 2.0. Эти шаблоны используют объявления переменных. На них ссылаются как на мета-значения, которые затем можно редактировать при создании электронных писем на основе шаблона. Переменные мета-ссылки включают в себя; строки, логические, цвета, числа и т. д.

Синтаксис для объявления переменной следующий:

<meta class="mktoNumber" id="articleSectionSpacerBottom" mktoname="Article heading spacer bottom" default="30" min="0" max="30" step="5">

Переменная вызывается в теле документа следующим образом:

${articleSpacerBottom}

Я хотел бы найти плагин, который может обрабатывать значения по умолчанию для каждой переменной, чтобы я мог локально тестировать шаблоны электронной почты.

Поэтому для каждой переменной или каждого экземпляра переменной найдите соответствующий метатег и получите значение по умолчанию.

Я надеюсь добавить это в задачу обработки html, чтобы она запускалась сразу после injectsPartials плагин.

gulp.task('html', function () {
  gulp.src(source + '*.+(html|php)')
    .pipe($.plumber())
    .pipe($.injectPartials({
        removeTags: true
    }))
    .pipe($.inline({
        base: source,
        css: $.cleanCss,
        disabledTypes: ['svg', 'img']
    }))
    .pipe($.inlineCss({
        applyStyleTags: true,
        applyLinkTags: true,
        removeStyleTags: false,
        removeLinkTags: true,
        applyWidthAttributes: true,
        applyTableAttributes: true
    })) 
    .pipe($.replace('src="images/', 'src="' + mtkosrc + template +'-'))
    .pipe($.replace('mktoname', 'mktoName'))
    .pipe(gulp.dest(build))
    .pipe(reload({
        stream: true
    }));
});

1

gulp marketo

Источник

user1376820 04 авг '16 в 13:07

1 ответ

Решение

Другие вопросы по тегам gulp marketo

user5892036 04 авг '16 в 15:38 2016-08-04 15:38 · Accepted Answer · 2016-08-04 15:38

Я сомневаюсь, что есть какие-то готовые плагины, которые делают то, что вы хотите. Тебе придется написать что-то самому.

Это не должно быть слишком сложно, однако. Ты можешь использовать map-stream чтобы получить доступ к каждому vinyl Файловый объект в потоке. Тогда используйте cheerio разобрать HTML и найти <meta> теги. После этого это простая операция поиска и замены.

Вот небольшой пример, который работает для меня:

gulpfile.js

var gulp = require('gulp');
var cheerio = require('cheerio');
var map = require('map-stream');

gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(map(function(file, done) {
      var html = file.contents.toString();
      var $$ = cheerio.load(html);
      $$('meta').each(function() {
        var meta = $$(this);
        var variable = new RegExp('\\$\\{' + meta.attr('id') + '\\}', 'g');
        html = html.replace(variable, meta.attr('default'));
      });
      file.contents = new Buffer(html);
      done(null, file);
    }))
    .pipe(gulp.dest('build'));
});

index.html

<html>
<head>
<meta class="mktoNumber" id="articleSectionSpacerBottom1" mktoname="Article heading spacer bottom" default="30" min="0" max="30" step="5">
<meta class="mktoNumber" id="articleSectionSpacerBottom2" mktoname="Article heading spacer bottom" default="42" min="0" max="30" step="5">
</head>
<body>
${articleSectionSpacerBottom1}
${articleSectionSpacerBottom2}
</body>
</html>

строить /index.html

<html>
<head>
<meta class="mktoNumber" id="articleSectionSpacerBottom1" mktoname="Article heading spacer bottom" default="30" min="0" max="30" step="5">
<meta class="mktoNumber" id="articleSectionSpacerBottom2" mktoname="Article heading spacer bottom" default="42" min="0" max="30" step="5">
</head>
<body>
30
42
</body>
</html>