변수를 메타 값으로 대체하는 Gulp 플러그인

저는 Marketo의 이메일 2.0 애플리케이션 용 이메일 템플릿을 작성하고 있습니다. 이러한 템플릿은 변수 선언을 이용합니다. 이들은 메타 값으로 참조되며 템플릿을 기반으로 전자 메일을 생성 할 때 편집 할 수 있습니다. 변수 메타 참조에는 다음이 포함됩니다. 문자열, 불리언, 색상, 숫자 등변수를 메타 값으로 대체하는 Gulp 플러그인

변수를 선언하는 구문은 다음과

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

변수가이 같은 문서의 본문에 호출 : I '는

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

출처

2016-08-04 onebitrocket

나는 당신이 원하는대로 할 수있는 out-of-the-box 플러그인이 있는지 의심 스럽다. 너 스스로 무언가를 써야 할 것이다.

그러나 너무 어렵지는 않습니다. 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 플러그인

답변

관련 문제