帕格（翡翠）额外的空间添加在gulp构建上的格式化标签之间 [英] Pug (Jade) extra space added between formatted tags on gulp build

问题描述

我使用Gulp，webpack和帕格（翡翠）。问题在于dist-code由于在构建时格式化而具有额外空间。

伪代码：

 标签
物品中的每件物品
跨度
如果kkk == 2 
 =物品[1] 
 else 
 abbr（title ='ttttttt'）
 = elem 
  

dist）.html就是这样的：

 < label for =所有>设置为
< ; abbr title =Scalable Vector Graphics> SVG /< / abbr> 
< abbr title =联合图像专家组> JPEG< / abbr> 
< / label> 
  

并且看起来像：

设置为SVG / JPEG

如何删除'/'后面的空格或更改某些内容看起来像：

设置为SVG / JPEG

以下是我的代码：

  + mixin dd ['svg'，'sdf sdfsdsd SVG'，，，，， [['Scalable Vector Graphics'，3]]]，
 
 mixin dd（list）
  -  var words = []; 
  -  var abbr = []; 
每个项目，我在列表中
 // -.... 
  -  var words = []; 
  -  var abbr = []; 
 + e.INPUT（id = it [0]）
 + e.LABEL（for = it [0]）
  -  words = item [1] .match（/ [^ \\ \\ s \ /] + \ /？/ g）
每个元素，我用单词
 if it [3]！= undefined&&它[3] .indexOf（i + 1）！= -1 
 + e.SPAN 
 + other（它[5]，abbr，i，words.length，elem）
 else 
 + other（it [5]，abbr，i，words.length，elem）
 
其他（abbrs，abbr，i，wordslength，elem）
 if abbrs！ =未定义&& abbrs.some（elem =>（abbr = elem）[1] ==（i + 1））
 abbr（title = abbr [0]）
 = elem 
 else 
 = elem 
  

换句话说，需要制作

 < abbr title =Scalable Vector Graphics> SVG /< / abbr> 
< abbr title =联合图像专家组> JPEG< / abbr> 
  

在生成的构建（dist）代码中包含一行代码：

 < abbr title =Scalable Vector Graphics> SVG /< / abbr>< abbr title =联合图像专家组> JPEG<缩写> 
  

display：inline-block;什么都不变。检查了其他几个类似的问题 - 与此问题无关。

解决方案

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

如果您想要快速解决方案，我建议将父元素的字体大小设置为0 。

如果您想从Pug的角度来解决它，也许尝试在Pug中禁用已批量化的HTML输出（ {pretty： false} ）？不确定是否会在这种情况下解决它，但它可能（但是，生成的HTML不再漂亮了）。

I use Gulp, webpack and pug(jade). The issue is with the dist-code that has an extra space because of formatting on build.

pseudo-code:

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

and the resulting (dist) .html is something like this:

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

and looks like:

set to SVG/ JPEG

How to remove the space after '/', or to change something to make it look like:

set to SVG/JPEG

and here is my code:

+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

In other words, need to make

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

be one line inside the resulting build (dist) code:

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

display: inline-block; changes nothing. Checked other several similar questions - irrelevant to this issue.

解决方案

I'm afraid there is no elegant way around this one.

If you want a quick solution, I recommend setting the font size of the parent element to 0.

If you want to solve it from the Pug perspective, maybe try disabling prettified HTML output in Pug ({ pretty: false })? Not sure whether it will fix it in this case, but it might (the resulting HTML, however, is not pretty anymore).

这篇关于帕格（翡翠）额外的空间添加在gulp构建上的格式化标签之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！