Gulp HTML缩小自定义标签不起作用答案

【问题标题】：Gulp HTML minify for custom tags not workingGulp HTML缩小自定义标签不起作用
【发布时间】：2020-03-24 20:01:24
【问题描述】：

这是我的 HTML 页面的简短版本，其中包含 <xmp> 代码 sn-ps 标记：

<div class="container">
  <a href="#">Aqua Dotted Link - Default</a>

  <br /><br />

  <a href="#" class="a-gold">Gold Dotted Link</a>

  <h3>Code for Footer: </h3>
  <pre><code><xmp><u>This is U tag with underlined aqua - Default </u>

  <u class="u-gold">This is U tag with underlined gold</u>

  <u class="u-orange">This is U tag with underlined orange</u></xmp></code></pre>

  <p>Hello World</p>

  <p>Hello World 2</p>
</div>

使用gulp-htmlmin，我在gulpfile.js 中执行以下操作：

let htmlmin = require('gulp-htmlmin');

...

gulp.task('html', gulp.series('clean', function() {
  return gulp.src(globs.html)
   .pipe(htmlmin({
     collapseWhitespace: true,
     removeComments: true,
   }))
   .pipe(gulp.dest('./dist'));
}));

...

我不知道出了什么问题，但这是我得到的输出：

<div class=container><a href=#>Aqua Dotted Link - Default</a><br><br><a href=# class=a-gold>Gold Dotted Link</a><h3>Code for Footer:</h3><pre><code><xmp><u>This is U tag with underlined aqua - Default </u>

  <u class=u-gold>This is U tag with underlined gold</u>

  <u class=u-orange>This is U tag with underlined orange</u></xmp></code></pre><p>Hello World<p>Hello World 2</div>

我怎样才能让 gulp 识别<xmp> 标签以便它可以缩小它？

【问题讨论】：

标签： javascript gulp minify

【解决方案1】：

<xmp> 是obsolete。

尝试使用<pre> 或<code> 而不是<xmp>。

【讨论】：

我知道它已经过时了，但是如果我使用 <pre><code> <h1>Hello World</h1> </pre></code> 这段代码，它实际上会在我的 HTML 中以大标题呈现 Hello World。所以我使用<pre><code><xmp><h1>Hello World</h1></xmp></pre></code> 所以它现在在我的HTML 页面上呈现<h1>Hello World</h1>
那么，Gulp 有没有办法识别这一点？ gulp 用户如何缩小诸如 <Render> 之类的自定义标签或任何其他自定义 Web 组件标签的内容？
嗨。因此，我发现了您缩小 html 代码的问题。 <pre> 和 </pre> 之间的代码不会因为明显的原因而被缩小（以保存代码格式、空格等），如果你从标记中删除 <pre> 标签，你的代码将被自定义标签缩小为好吧。