재단 이메일의 꿀풀 프로세스에서 배경 이미지 찾기?

Question

ZURB의 Foundation for Emails는 ZURB가 생성 한 HTML을보고, 참조 된 모든 이미지를 찾아서 .zip 파일에 모두 추가하는 과정을 제공합니다. 그러나 img 셀렉터를 검색하여 해당 이미지를 찾았으므로 스타일 태그 또는 태그 (Outlook의 대체 기능)에서 배경 이미지로 참조 된 것을 놓치게됩니다.

style="background-image:url('image.jpg');" 
<v:fill src="image.jpg" /> 

원래 꿀꺽 꿀꺽한 과제는 다음과 같습니다. path.dirname의 차이를 무시 -

var moveImages = gulp.src(sourcePath) 
    .pipe($.htmlSrc({ selector: 'img'})) 
    .pipe($.rename(function (path) { 
    path.dirname = fileName + '/' + path.dirname; 
    return path; 
    })); 

난 그냥 디렉토리에 할 수있는 모든 이미지를 찾을 수 (및 우편을 평평하게이 문제를 수정 한

(원본 경로 HTML 파일에 대한 참조입니다)); 나는 점점 더 많은 이메일을 만들 때

var moveImages = gulp.src(dist+'/assets/img/*') 
    .pipe($.rename(function (path) { 
    path.dirname = ''; 
    return path; 
    })); 

이

자산에 저장된 이미지/IMG 더 많은 성장을 할 것이다, 그러나 작동하고, 각 이메일은 불필요하게, 더 크고 더 큰이 .zip을 생성합니다.

기본 moveImages 작업에 어떻게 추가하여 전체 HTML 디렉토리의 이미지를 가져 오지 않고도 HTML의 모든 이미지를 찾을 수 있습니까?

Answer 1

배경 이미지를 명시 적으로 찾는 방법을 찾지 못했지만 약간 해로운 방법으로 해결했습니다.

내가 배경 이미지가있는 곳에서 나는 숨겨진 인라인 이미지와 나중에 제거 할 수 있도록 태그가 추가되었습니다. HTML을 이동할 때

 <!-- Inline background image so build process picks it up. --> 
    <div style="display: none; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all" class="destroyme"> 
    <img src="assets/img/header-background.png"> 
    </div> 

그리고

다음 쭉 마시는 과정에서, 나는 .destroyme 사업부 것을 제거;

var moveHTML = gulp.src(sourcePath) 
    .pipe($.replace('assets/img/', '')) 
    .pipe($.htmlRemove('.destroyme')) 
    .pipe($.rename(function (path) { 
    path.dirname = ''; 
    return path; 
    })); 

사용 : https://github.com/gevgeny/gulp-html-remove

NPM은 HTML 로컬 미리보기 목적/DIST에 작성 될 때 --save-DEV는

그 방법을 꿀꺽-HTML-제거 설치, 중복 이미지 ISN 표시되고 압축되면 '배경'이미지가 이미지 폴더로 가져와지고 HTML 소스에서 중복 된 이미지가 제거됩니다.

정확히 내가 원하는 것은 아니며 이메일을 작성할 때 추가 단계가 필요하지만 작동합니다 (최소한 나를 위해 ...