grunt-contrib-htmlmin> html-minifier>自定义数据属性>使用srcset

时间:2018-06-07 10:05:27

标签: custom-data-attribute grunt-contrib-htmlmin

SHORT:

是否有人知道如何获取包 grunt-contrib-htmlmin (v2.4.0)以忽略data-前缀以将自定义数据属性data-srcset视为{{ 1}}?

LONG:

包grunt-contrib-htmlmin(使用html-minifier)处理srcset就好了。

但是,我还使用延迟加载图像下方的图像,使用自定义数据属性srcset中的值加载srcset。

该软件包不会处理data-srcset属性的值 - 我认为因为它是附加data-srcset的“自定义属性”。

我希望该软件包能够处理data-,就像它只是data-srcset一样。

示例未经澄清的HTML:

srcset

输出将缩小为:

<img ... srcset="
https://www.example.com/some-image-400.jpg 400w, 
https://www.example.com/some-image-800.jpg 800w,
https://www.example.com/some-image-1200.jpg 1200w"
alt="some image" />

<img ... data-srcset="
https://www.example.com/some-image-400.jpg 400w, 
https://www.example.com/some-image-800.jpg 800w,
https://www.example.com/some-image-1200.jpg 1200w"
alt="some image" />

// Note values are on different lines

而不是像这样的一行:

<img ... srcset="https://www.example.com/some-image-400.jpg 400w, https://www.example.com/some-image-800.jpg 800w, https://www.example.com/some-image-1200.jpg 1200w" alt="some image"> <img ... data-srcset="
    https://www.example.com/some-image-400.jpg 400w, 
    https://www.example.com/some-image-800.jpg 800w
    https://www.example.com/some-image-1200.jpg 1200w"" alt="some image">

请注意,“正常”<img ... srcset="https://www.example.com/some-image-400.jpg 400w, https://www.example.com/some-image-800.jpg 800w, https://www.example.com/some-image-1200.jpg 1200w" alt="some image"> <img ... data-srcset="https://www.example.com/some-image-400.jpg 400w, https://www.example.com/some-image-800.jpg 800w, https://www.example.com/some-image-1200.jpg 1200w"" alt="some image"> 的内容处理得很好,只处理srcset,因此请创建新行。

我尝试明确告诉它使用选项data-srcset折叠自定义属性。它已折叠但行之间没有间距(在一个值customAttrCollapse: /data-srcset/,的结尾逗号与下一个值中,的开头之间)之间没有间距,因此它读取url之类的内容。 Srcset需要值之间的空格。

我还尝试通过使用../some-image-400.jpg 400w,https://www....选项告诉它忽略data-。这有效 EXCEPT 它将ignoreCustomFragments: [/data-/],替换为data-成为data-srcset的{​​{1}}。

我也试过data- srcset(我不确定它的作用,但似乎它可能有关系)但仍然无效。

有人可以帮忙吗?

作为参考,我的grunt任务是:

preventAttributesEscaping: true,

0 个答案:

没有答案