requireJS 优化器:也可以缩小 HTML 文件

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

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

这是否可能使用 requirejs 优化器或任何其他方式（也许是一些咕噜咕噜的插件）？

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

相同的原理可以用于任何插件，尽管某些插件可能需要更多配置才能完成打算对文件执行的操作。

我会采取另一种方法，在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>

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

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

启用 gzip 压缩：启用 GZIP 压缩
浏览器中的缓存：如何设置 HTTP 标头（用于缓存控制）？

可以动态构建文件对象（检查 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'
     }]
 }
}

相关内容

最新更新

热门标签：