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

How to generate a single optimized html file from web a project?

本文关键字：优化 单个 html 文件 web 项目      更新时间：2023-09-26

我有一个典型的网页与单一的 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。但问题是如何将它们自动组装成一个文件。

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

  • 一个带有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和其他优秀的预定义任务来优化代码。

你可以试试https://github.com/remy/inliner

你可以安装:

$ NPM install -g inline

，然后执行(参见inliner --help的可能选项)

$ inline index.html> index.min.html

或者你也可以在http://inliner.webapplist.com/上使用

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

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

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

相关文章：