我有一个典型的网页与单一的 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