Question

我有一个带有backbonejs，jquery和requirejs的项目文件夹，在使用requirejs优化器调用我的gruntfile脚本之后，它创建了我的优化文件，就像浏览器中的charme一样。但我希望缩小我的HTML文件，以便在应用程序加载时保存一些字节。

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

这可能是使用requirejs优化器或任何其他方式（可能是一些grunt插件）吗？

Answer 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

任何插件都可以使用相同的原则，但有些插件可能需要更多配置才能执行与文件有关的操作。

Answer 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>

Answer 3

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

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

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

Answer 4

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

您可以在gruntfile.js中使用的代码段就像

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

requireJS Optimizer：也可以缩小HTML文件？

4 个答案: