HTML 资源内联工具

这是一个 Node.js 命令行工具，可以将 HTML 文件中引用的外部 CSS 和 JavaScript 资源自动内联到 HTML 文件中，生成一个独立的、包含所有资源的单文件 HTML。

功能特点

✨ 核心功能

• 自动为 HTML 中的 CSS 和 JS 资源添加 inline 属性
• 将外部 CSS 和 JS 文件内容内联到 HTML 中
• 支持压缩处理（可选）
• 保持中文字符编码正确

🔧 技术特性

• 支持全局模块调用，无需本地安装依赖
• 智能路径解析和错误处理
• 详细的进度提示和友好的错误信息
• 自动创建输出目录

安装要求

1. 安装 Node.js

确保你的系统已安装 Node.js（版本 >= 16.0.0）

node --version

2. 全局安装 inline-source 模块

npm install -g inline-source

验证安装：

npm list -g inline-source

使用方法

基本语法

node inline-my-html.js <输入HTML文件> <输出HTML文件>

示例

# 基本用法
node inline-my-html.js index.html index-inlined.html

# 使用相对路径
node inline-my-html.js ./src/index.html ./dist/index.html

# 使用绝对路径
node inline-my-html.js D:\projects\site\index.html D:\projects\site\output.html

工作原理

1. 读取输入文件：读取指定的 HTML 文件内容
2. 添加 inline 属性：自动为所有外部 CSS/JS 资源添加 inline 属性
3. 资源内联：使用 inline-source 库将外部资源内容嵌入到 HTML 中
4. 生成输出文件：将处理后的 HTML 保存到指定路径

转换示例

转换前（input.html）：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World</h1>
    <script src="script.js"></script>
</body>
</html>

转换后（output.html）：

<!DOCTYPE html>
<html>
<head>
    <style>/* style.css 的内容 */</style>
</head>
<body>
    <h1>Hello World</h1>
    <script>/* script.js 的内容 */</script>
</body>
</html>

命令行输出说明

执行脚本时会显示详细的处理进度：

✅ 已加载全局安装的 inline-source 模块

==================================================
🚀 HTML资源内联工具
==================================================

📥 输入: random.html
📤 输出: output.html

📄 读取HTML文件...
🏷️  添加inline属性...
🔄 执行资源内联...
💾 写入输出文件...
✅ 内联完成！输出文件：output.html

==================================================
✨ 处理完成！
==================================================

错误处理

常见错误及解决方法

❌ 错误：输入文件不存在

❌ 错误: 输入文件不存在
   D:\projectile.html

📂 当前目录下的文件:
  📄 index.html
  📄 style.css
  📄 script.js

解决：检查文件路径是否正确，脚本会列出当前目录的文件供参考

❌ 错误：未安装 inline-source

❌ 加载 inline-source 模块失败: 无法加载全局模块 inline-source...

💡 请确保已全局安装 inline-source:
   npm install -g inline-source

解决：执行 npm install -g inline-source 安装依赖

❌ 错误：资源文件找不到

❌ 处理失败: ENOENT: no such file or directory...

💡 可能原因:
   • HTML中引用的CSS/JS文件路径不正确
   • 资源文件不存在或路径错误
   • 请检查HTML文件中资源路径是否正确

解决：检查 HTML 文件中引用的资源路径是否正确

文件结构

project/
├── inline-my-html.js    # 主脚本文件
├── README.md             # 本文档
├── random.html           # 示例输入文件
├── output.html           # 示例输出文件
├── style.css             # 示例样式文件
└── script.js             # 示例脚本文件

配置选项

在脚本中可以修改以下配置：

const CONFIG = {
    COMPRESS: false,    // 是否压缩内联的 CSS/JS 代码
    ENCODING: 'utf-8'   // 文件编码
};

要启用压缩，将 COMPRESS 改为 true：

const CONFIG = {
    COMPRESS: true,     // 启用压缩
    ENCODING: 'utf-8'
};

注意事项

1. 路径问题：HTML 文件中引用的资源路径应该相对于 HTML 文件本身
2. 网络资源：本工具不支持内联网络资源（如 https://cdn.example.com/style.css）
3. 图片资源：目前仅支持 CSS 和 JavaScript 文件的内联
4. 模块加载：脚本会自动查找全局安装的 inline-source 模块，无需本地安装

许可证

MIT License

技术支持

如遇到问题，请检查：

1. Node.js 版本是否 >= 16.0.0
2. 是否已执行 npm install -g inline-source
3. HTML 文件中的资源路径是否正确
4. 所有引用的资源文件是否存在