合并HTML-CSS-JS

芋圆社区 > 编程 > NodeJS > 合并HTML-CSS-JS

491

2023-08-24

Hey、小怪兽

• 之前写天地图Demo的时候，分开成index.html，index.css，index.js，最后给后端的时候就一个HTML文件，所以就写了一个自动合成一个HTML的JS
• 使用的时候很简单，创建一个auto.js的JS文件，把最下面的完整代码塞进去，接着在控制台终端输入：
```
node auto.js
```
• 就会生成一个叫androidMap.html的文件，这个就是合并后的文件
• 这里需要注意几点：
• 首先是文件的位置，我是这样的，要合并的文件放在dev文件夹里，auto.js在外面，如果不是这样的结构需要修改代码：

const filePath = path.join(__dirname, "androidMap.html");
const htmlFilePath = path.join(__dirname, "dev", "index.html");
const cssFilePath = path.join(__dirname, "dev", "index.css");
const jsFilePath = path.join(__dirname, "dev", "index.js");

• 第二点是我是将要合并的index.html里的这个link和script改成<style></style>和<script></script>，是修改第一个link和script，所以前面不能其他的link和script，如果有的话就得修改代码：

const htmlModified = htmlData.replace('<link rel="stylesheet" href="./index.css" />', "<style></style>").replace('<script src="./index.js"></script>', "<script></script>");

• 第三点是如果修改了，就直接再执行一遍命令，会自动替换androidMap.html的，不需要删除
• 最后附上README.md和完整代码：

const fs = require("fs").promises;
const path = require("path");

const fileExists = async (filePath) => {
  try {
    await fs.access(filePath);
    return true;
  } catch (error) {
    return false;
  }
}

const modifyHTMLFile = async () => {
  try {
    const filePath = path.join(__dirname, "androidMap.html");
    const htmlFilePath = path.join(__dirname, "dev", "index.html");
    const cssFilePath = path.join(__dirname, "dev", "index.css");
    const jsFilePath = path.join(__dirname, "dev", "index.js");

    // 如果文件不存在，则创建一个新文件
    if (!(await fileExists(filePath))) {
      await fs.writeFile(filePath, "", "utf8");
      console.log(`已创建文件 ${filePath}`);
    }

    // 读取HTML文件
    let htmlData = await fs.readFile(htmlFilePath, "utf8");

    // 删除指定内容
    const htmlModified = htmlData.replace('<link rel="stylesheet" href="./index.css" />', "<style></style>").replace('<script src="./index.js"></script>', "<script></script>");

    // 保存修改后的HTML文件
    await fs.writeFile(filePath, htmlModified, "utf8");
    console.log("HTML文件已添加!");

    // 读取 index.css 文件
    let cssData = await fs.readFile(cssFilePath, "utf8");

    // 添加 CSS 内容到 HTML 的 <style> 标签中
    const cssModified = htmlModified.replace(/<\/style>/, `${cssData}\n</style>`);

    // 保存修改后的 HTML 文件
    await fs.writeFile(filePath, cssModified, "utf8");
    console.log("CSS文件已添加!");

    // 读取 index.js 文件
    let jsData = await fs.readFile(jsFilePath, "utf8");

    // 添加 js 内容到 HTML 的 <script> 标签中
    const jsModified = cssModified.replace(/<\/script>/, `${jsData}\n</script>`);

    // 保存修改后的 HTML 文件
    await fs.writeFile(filePath, jsModified, "utf8");
    console.log("JS文件已添加!");
  } catch (err) {
    console.error(err);
  }
}

modifyHTMLFile();

上一篇：连接MySQL数据库失败

合并HTML-CSS-JS

回复