使用nodejs分离html文件里的js和css详解

使用Node.js分离HTML文件中的JS和CSS，通常需要以下步骤：

1. 安装依赖

使用Node.js分离HTML文件中的JS和CSS，需要通过安装一些Node.js的依赖来实现。具体可以使用以下命令安装：

npm install cheerio //用于解析html文件
npm install fs      //用于读取和写入文件
npm install path    //用于处理路径

1. 读取HTML文件

使用Node.js分离HTML文件中的JS和CSS，我们需要读取HTML文件的内容。可以使用以下代码来实现：

const fs = require('fs');

const html = fs.readFileSync('./index.html', 'utf-8');

上面的代码中，我们使用了fs模块的readFileSync方法读取了HTML文件的内容，将其存储在了html变量中。./index.html是HTML文件的路径，utf-8是HTML文件的编码格式。

1. 解析HTML文件

使用cheerio模块解析HTML文件。可以使用以下代码将HTML文件解析成DOM树：

const cheerio = require('cheerio');

const $ = cheerio.load(html);

上述代码中，我们使用了cheerio模块的load方法将HTML文件解析成了DOM树，并将其赋值给了$变量。

1. 分离JS和CSS

使用cheerio模块，我们可以很容易地从DOM树中分离出JS和CSS。以下代码演示了如何从HTML文件中分离出所有的JS和CSS，并将它们存储成文件：

const path = require('path');

const jsPath = './output/js'; // 存放JS文件的路径
const cssPath = './output/css'; // 存放CSS文件的路径

$('script').each((index, element) => {
    const content = $(element).html();

    const fileName = `js_${index}.js`;
    const filePath = path.join(jsPath, fileName);

    fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
});

$('link[rel="stylesheet"]').each((index, element) => {
    const href = $(element).attr('href');
    const content = fs.readFileSync(href, 'utf-8');

    const fileName = `css_${index}.css`;
    const filePath = path.join(cssPath, fileName);

    fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
});

上述代码中，我们首先定义了存放JS和CSS的文件路径。然后使用$的each方法遍历HTML文件中的所有script标签和link标签，获取它们的内容并将其存储成文件。

注意：

• 对于script标签，我们需要使用html()方法获取其内容；
• 对于link标签，我们需要使用attr()方法获取其href属性，然后读取对应的CSS文件内容。

示例1：分离单个HTML文件中的JS和CSS

const fs = require('fs');
const path = require('path');

const cheerio = require('cheerio');

const htmlPath = './test.html';
const outputPath = './output';

const html = fs.readFileSync(htmlPath, 'utf-8');
const $ = cheerio.load(html);

$('script').each((index, element) => {
    const content = $(element).html();

    const fileName = `js_${index}.js`;
    const filePath = path.join(outputPath, fileName);

    fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
});

$('link[rel="stylesheet"]').each((index, element) => {
    const href = $(element).attr('href');
    const content = fs.readFileSync(href, 'utf-8');

    const fileName = `css_${index}.css`;
    const filePath = path.join(outputPath, fileName);

    fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
});

上述代码中，我们定义了单个HTML文件的路径和存放JS和CSS的路径，然后使用cheerio和fs模块读取HTML文件的内容，分离出其中的JS和CSS，并将其存储成文件。

示例2：分离多个HTML文件中的JS和CSS

const fs = require('fs');
const path = require('path');

const cheerio = require('cheerio');

const htmlPath = './pages';
const outputPath = './output';

const filenames = fs.readdirSync(htmlPath);

filenames.forEach((filename) => {
    const html = fs.readFileSync(path.join(htmlPath, filename), 'utf-8');
    const $ = cheerio.load(html);

    const jsPath = path.join(outputPath, 'js', filename);
    const cssPath = path.join(outputPath, 'css', filename);

    $('script').each((index, element) => {
        const content = $(element).html();

        const fileName = `js_${index}.js`;
        const filePath = path.join(jsPath, fileName);

        fs.mkdirSync(jsPath, { recursive: true });
        fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
    });

    $('link[rel="stylesheet"]').each((index, element) => {
        const href = $(element).attr('href');
        const content = fs.readFileSync(path.join(htmlPath, href), 'utf-8');

        const fileName = `css_${index}.css`;
        const filePath = path.join(cssPath, fileName);

        fs.mkdirSync(cssPath, { recursive: true });
        fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
    });
});

上述代码中，我们定义了包含多个HTML文件的文件夹路径和存放JS和CSS的路径，然后使用fs.readdirSync方法读取文件夹下的所有HTML文件。接着，我们依次读取每个HTML文件的内容，分离出其中的JS和CSS，并将其存储成文件。

需要注意的是，我们根据每个HTML文件的名称创建了两个文件夹，用于存放该HTML文件中分离出的JS和CSS。由于可能存在新的文件夹，我们在使用fs.mkdirSync方法创建文件夹前，需要使用{ recursive: true }参数来创建它们的上级文件夹。