requireJS 优化器：也可以缩小 HTML 文件？答案

【问题标题】：requireJS Optimizer: possible to minify HTML files too?requireJS 优化器：也可以缩小 HTML 文件？
【发布时间】：2014-02-26 12:16:51
【问题描述】：

我有一个包含backbonejs、jquery 和requirejs 的项目文件夹，在使用requirejs 优化器调用我的gruntfile 脚本后，它会创建我的优化文件，就像我的浏览器中的一个魅力一样。但我想缩小我的 HTML 文件，以便在应用程序中加载它们时节省一些字节。

我在 r.js 优化之后尝试使用 grunt-contrib-htmlmin，但是这个插件需要我定义每个 HTML 文件，但是我有很多文件，如果定义 HTML 文件夹来缩小的话会很棒。

是否可以通过 requirejs 优化器或任何其他方式（可能是一些 grunt 插件）？

【问题讨论】：

标签： requirejs gruntjs r.js

【解决方案1】：

expandMapping 在这种情况下很有用。可以缩小整个目录并保持其结构不变，而不必列出目录中的每个html 文件。像这样：

htmlmin: {
    dist: {
        options: {
          removeComments: true,
          collapseWhitespace: true
        },
        files: grunt.file.expandMapping(['path/**/*.html', 'path2/**/*.html'], 'destination/', {
            rename: function(destBase, destPath) {
                return destBase+destPath;
            }
        })
    }
}

输出将是：

path/test.html => destination/path/test.html
path/subpath1/abc.html => destination/path/subpath1/abc.html
path/subpath2/yey.html => destination/path/subpath2/yey.html
path2/foo.html => destination/path2/foo.html

任何插件都可以使用相同的原理，尽管某些插件可能需要更多配置才能完成对文件的处理。

【讨论】：

【解决方案2】：

我会采取另一种方法并在Jade 中开发您的html 代码。 Jade 语法简洁，让您编写的 html 代码错误更少（例如，input 标签没有结束标签）。

示例代码：

html
   head
   body
      //- this comment won't be shown in the html output
      .someClass.secondClass
         p Hello world

使用grunt-contrib-jade可以将jade文件编译成html文件。

您只需要在 Gruntfile.js 中进行配置：

       jade: {
            staging: {
                options: {
                    pretty: true
                },
                files: [
                    {
                        expand: true,
                        src: '**/*.jade',
                        dest: 'target/staging/',
                        cwd: 'src/',
                        ext: '.html'
                    }
                ]
            }
        },

对于开发版本，您使用pretty 选项。对于生产（缩小），您省略了漂亮的选项。

上面例子的输出是：

<html>
  <head></head>
  <body>
    <div class="someClass secondClass">
      <p>Hello world</p>
    </div>
  </body>
</html>

没有它是：

<html><head></head><body><div class="someClass secondClass"><p>Hello world</p></div></body></html>

【讨论】：

【解决方案3】：

你不能缩小 HTML，因为你不能缩小 CSS。缩小的概念在某种程度上与编程语言有关，而 HTML 是一种描述性语言，而不是一种编程语言。

您想要的是一种将文件更好地传输到浏览器的方法。您可以通过两种标准方式来实现这一点，都与 Web 服务器和 HTTP 协议相关：

启用 gzip 压缩：enable GZIP compression
在浏览器中缓存：How to set HTTP headers (for cache-control)?

【讨论】：

错了，通过删除空格和 cmets 可以缩小 HTML 和 CSS。但是，除非您还在相应的 html 中包含一些转换，否则没有简单的方法可以混合 css 类名称。但是启用压缩和缓存是个好建议！
你通过消除空格实现的缩小与 js 缩小无法相比。这是不值得的，因为压缩处理所有的空格。 HTML cmets 现在也不是很常见。
关于空白和压缩，你是对的，如果你不必维护不支持 http 压缩的旧版 IIS（比如我 :-/）。注意 HTML cmets：只需打开任何在 wordpress g 上运行的中型博客。我自己确实经常使用它们，因为knockoutjs 支持虚拟元素。但是，-1 对于好的建议来说是苛刻的，对此感到抱歉 - 糟糕的触发习惯。我现在想投票给你，但我不会让我
下次投票前请三思，否决票适用于极少数情况。此外，我们所做的大部分前端最佳实践都会对 http2 mattwilcox.net/web-development/… 有害
赞成@DavidLemon，因为他在技术上是正确的。您不会缩小 HTML 本身（如 javascript），但可以压缩不必要的空格，这可能是问题的意图。

【解决方案4】：

您可以动态构建文件对象（检查http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically）

您可以在 gruntfile.js 中使用的代码 sn-p 类似于

 htmlmin: {
 build: {
     options: {
         removeComments: true,
         collapseWhitespace: true
     },
     files: [{
         expand: true,
         src: ['*.html'],
         dest: 'html/',
         ext: '.min.html'
     }]
 }
}

【讨论】：