Плагин Gulp для замены переменных с помощью метазначений

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

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

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

переменная называется в теле документа, как это:

${articleSpacerBottom}

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

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

Я надеюсь добавить это в задачу обработки 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 
    })); 
});

источник

2016-08-04 onebitrocket

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

Это не должно быть слишком тяжелым. Вы можете использовать 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>

источник

2016-08-04 15:38:52

Вау, большое вам спасибо. Я понятия не имел, с чего начать. Отлично работает. – onebitrocket

Плагин Gulp для замены переменных с помощью метазначений

ответ

Смежные вопросы