基金電子メールのgulpプロセスで背景イメージを検索しますか？

Question

ZURBのFoundation for Emailsは、作成したHTMLを見て、その中で参照されているすべてのイメージを見つけてそれらをすべて.zipファイルに追加するためのプロセスを持っています。しかし、imgセレクタを検索することでそれらのイメージを見つけて、スタイルタグやタグ（Outlookのフォールバック）で背景イメージとして参照されるものは見逃してしまいます。

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

オリジナルのgulpタスクは次のようになります。 path.dirnameの違いを無視 -

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

は、私はちょうどディレクトリにそれができるすべての画像を検索（とジッパーを平坦化するために、これを変更した

（sourcePathは、HTMLファイルへの参照です） ）;私はより多くの電子メールを作成するよう

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

この作品は、しかし、資産/ IMGに保存された画像は、より多数成長し、各電子メールが不必要に、どんどん大きくだ.zipファイルが生成されます。

デフォルトのmoveImagesタスクに追加して、HTML内のすべてのイメージを検索するにはどうすればよいのですか？

Answer 1

私は明示的に背景画像を探す方法を理解することはできませんでしたが、私はこれをちょっとした方法で解決しました。

私はバックグラウンドイメージを持っていますが、後でそれを隠してインラインイメージを追加し、後で削除するタグを付けました。

 <!-- 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> 

とHTMLを移動するときにゴクゴク過程で、私はその.destroymeのdivを削除します。

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ソースから削除されます。

私が望んでいたものではなく、電子メールを作成するときに余分なステップが必要ですが、少なくとも私にとっては役に立ちます...