如何从Web项目生成单个优化的html文件？

Question

我有一个带有单个 html文件的典型网页。该页面使用CSS，JavaScript模块（requirejs）和图像。我想生成一个html文件，其中包含所有嵌入和压缩的资源，包括html文件本身。

这是我的结构：

myApp/
   www/
      css/
          css1.css
          css2.css
      img/
          img1.png
          img2.png
      js/
          main.js
          module1.js
      index.html

我想生成这个：

myApp/
   www-build/
      index.min.html

我知道，存在用于优化javascript，css和html的不同工具。但是问题是如何自动将它们组装到单个文件中。

Answer 1

我最终使用gruntjs和一系列 grunt 任务来完成这项工作：

• 带有导入 js 和 css 的 include 指令的Jade模板。
• grunt-base64将图像转换为 base64。

玉文件，会是这样的：

html
    head
        title= "Example Page"
        include css/css1.css
        include css/css2.css
        include js/main.js
        include js/module1.js

    body
        | <img src="data:image/png;base64,
        include img1.b64
        | "/>

        | <img src="data:image/png;base64,
        include img2.b64
        | "/>

        canvas#myCanvas 

我还使用uglify和其他优秀的预定义任务来优化代码。