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

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

Answer 1

您可以尝试https://github.com/remy/inliner

您可以安装：

$ npm install -g inliner

然后执行（有关可能的选项，请参阅inliner --help）

$ inliner index.html＆gt; index.min.html

或者您可以在http://inliner.webapplist.com/

在线使用它

Answer 2

我最终使用gruntjs和一系列繁琐的任务来完成这项任务：

带有include指令的Jade模板，用于导入js和css。
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和其他优秀的预定义任务来优化代码。

Answer 3

我不确定将其生成为一个完整的文件，但您可以使用Google Granule压缩[到一个文件]并以编程方式动态缩小CSS文件和JS文件。（正在加载页面时）。这将显着减少网页加载时间。

结帐：

http://code.google.com/p/granule/

Answer 4

你可以在你的单个文件中包含所有内容，但我认为这不是一个好主意，因为Pekka的评论已经指出了。但无论如何：你可以包含带有标签的Javascript，与CSS（或内联CSS）相同。对于图像：您需要将它们转换为字符串，以便将它们保存在页面中。 Base64编码将完成这项工作。这是一个例子：http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

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

4 个答案: