8

我有一个带有单个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。但问题是如何将它们自动组装到一个文件中。

4

4 回答 4

2

我最终使用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和其他优秀的预定义任务来优化代码。

于 2013-06-14T08:38:18.537 回答
2

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

你可以安装：

$ npm install -g 内联

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

$ 内联 index.html > index.min.html

或者您可以在http://inliner.webapplist.com/上在线使用它

于 2016-11-16T12:57:16.763 回答
0

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

查看：

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

于 2013-06-18T05:02:57.420 回答
-1

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

于 2013-06-12T07:35:31.223 回答