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,