Gulp Plug-in zum Ersetzen von Variablen durch Metawerte

Ich erstelle E-Mail-Vorlagen für Marketo's E-Mail 2.0-Anwendung. Diese Vorlagen nutzen die Vorteile einer Variablendeklaration. Diese werden als Metawerte referenziert, die dann beim Generieren von E-Mails basierend auf einer Vorlage bearbeitet werden können. Variable Meta-Referenzen umfassen; Strings, boolean, Farben, Zahlen usw.Gulp Plug-in zum Ersetzen von Variablen durch Metawerte

Die Syntax eine Variable zu deklarieren folgt:

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

Die Variable im Körper eines Dokuments wie folgt aufgerufen wird:

${articleSpacerBottom}

I‘ Ich möchte ein Plugin finden, das die Standardwerte für jede Variable verarbeiten kann, damit ich E-Mail-Vorlagen lokal testen kann.

Suchen Sie also für jede Variable oder jede Instanz der Variablen das zugehörige Meta-Tag und erhalten Sie den Standardwert.

Ich hoffe, dies zu einer HTML-Verarbeitung Aufgabe hinzuzufügen, so dass es unmittelbar nach dem injectsPartials Plug-in läuft.

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 
    })); 
});

Quelle

2016-08-04 onebitrocket

Ich bezweifle, dass es irgendwelche Out-of-the-Box-Plugins gibt, die tun, was Sie wollen. Du musst selbst etwas schreiben.

Dies sollte jedoch nicht zu schwer sein. Sie können map-stream verwenden, um auf jedes vinyl Dateiobjekt im Stream zuzugreifen. Verwenden Sie dann cheerio, um den HTML-Code zu analysieren und die <meta> Tags zu finden. Danach ist es eine einfache Suche & Operation ersetzen.

Hier ist ein kleines Beispiel, das funktioniert für mich:

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>

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> 
30 
42 
</body> 
</html>

Quelle

2016-08-04 15:38:52

Wow, vielen Dank. Ich hatte keine Ahnung, wo ich anfangen sollte. Es wirkt wie ein Zauber. – onebitrocket

Gulp Plug-in zum Ersetzen von Variablen durch Metawerte

Antwort

Verwandte Themen