在 gulp 构建的格式化标签之间添加了 Pug (Jade) 额外空间

Question

我使用 Gulp、webpack 和 pug(jade)。问题在于 dist-code 由于构建时的格式化而具有额外的空间。

伪代码：

label
  each item in items
    span
      if kkk == 2
        =item[1]
      else
        abbr(title='ttttttt')
          =elem

生成的 (dist) .html 是这样的：

<label for="ааааа">set to 
    <abbr title="Scalable Vector Graphics">SVG/</abbr>
    <abbr title="Joint Photographic Experts Group">JPEG</abbr>
</label>

看起来像：

设置为 SVG/JPEG

如何删除“/”后的空格，或更改某些内容以使其看起来像：

设置为 SVG/JPEG

这是我的代码：

+mixin dd['svg', 'sdf sdfsdsd SVG', , , , [['Scalable Vector Graphics', 3]]],

mixin dd(list)
- var words = [];
- var abbr = [];
each item, i in list
//-....
    - var words = [];
    - var abbr = [];
    +e.INPUT(id= it[0])
    +e.LABEL(for=it[0])
        - words = item[1].match(/[^\s\/]+\/?/g)
        each elem, i in words
            if it[3] != undefined && it[3].indexOf(i + 1) != -1
                +e.SPAN
                    +other(it[5], abbr, i, words.length, elem)
            else
                +other(it[5], abbr, i, words.length, elem)

mixin other(abbrs, abbr, i, wordslength, elem)
    if abbrs != undefined && abbrs.some(elem => (abbr = elem)[1] == (i + 1))
        abbr(title= abbr[0])
            =elem
        else
            =elem

也就是说，需要制作

<abbr title="Scalable Vector Graphics">SVG/</abbr>
<abbr title="Joint Photographic Experts Group">JPEG</abbr>

成为生成的构建 (dist) 代码中的一行：

<abbr title="Scalable Vector Graphics">SVG/</abbr><abbr title="Joint Photographic Experts Group">JPEG</abbr>

显示：内联块；什么都没有改变。检查了其他几个类似的问题 - 与此问题无关。

Answer 1

恐怕没有优雅的方法可以解决这个问题。

如果你想要一个快速的解决方案，我推荐setting the font size of the parent element to 0。

如果你想从 Pug 的角度解决这个问题，也许可以尝试在 Pug ({ pretty: false }) 中禁用美化的 HTML 输出？不确定它是否会在这种情况下修复它，但它可能会（但是生成的 HTML 不再漂亮了）。