Question

ZURB的电子邮件基金会有一个gulp流程，用于查看它生成的HTML，查找其中引用的所有图像，并将它们全部添加到.zip文件中。但是，它通过搜索img选择器来查找这些图像，因此错过了在样式标记或标记（Outlook的后备）中作为背景图像引用的任何内容。

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

原始的gulp任务看起来像;

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

（sourcePath是对HTML文件的引用）

我已将其修改为只找到目录中的所有图像（并展平zip - 忽略path.dirname中的差异）;

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

然而，随着我创建越来越多的电子邮件，存储在assets / 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的gulp过程中，我删除了.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 install --save-dev gulp-html-remove

这样，当html内置于/ dist用于本地预览时，不显示复制的图像，当它被压缩时，“背景”图像被拉入图像文件夹，并且复制从HTML源代码。

这不完全是我想要的，在你制作电子邮件时需要额外的一步，但它确实有效（至少对我而言）......

在Foundation Emails的gulp过程中查找背景图像？

1 个答案: