nodejs--基于 fs 和 path 模块的时钟案例

目的：

将index.html页面里的 css html js代码拆分成三个文件，分别是：

• index.css
• index.html
• index.js
• 并且将拆分出来的3个文件，存放到clock目录中

实现的步骤：

1. 创建两个正则表达式，分别用来匹配<style>和<script>标签
2. 使用fs模块，读取需要被处理的htmml文件
3. 自定义resolveCSS方法，来写入 index.css 样式文件
4. 自定义 resolveJS方法，来写入 index.js 脚本文件
5. 自定义 resolveHTML方法，来写入 index.html文件

// 1.导入所需模块
const fs = require("fs");
const path = require("path");

//2.创建对应的正则表达式分别处理 <style></style> 和 <script></script> 标签
// \s 匹配空白字符
// \S 匹配任意非空白字符
// * 出现任意多次
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

// 3 读取文件
fs.readFile(path.join(__dirname,'./index.html'),'utf8',function(err,dataStr){
    if(err){
        return console.log('读取失败',err.message);
    }

    // 3.1 
    resolveCSS(dataStr);
    resolveJS(dataStr);
    resolveHTML(dataStr);
})


//4.自定义 resolveCSS() 处理css
function resolveCSS(htmlStr){
    //4.1 使用正则提取页面中的 <style></style> 标签
    const r1 = regStyle.exec(htmlStr);

    //4.2 将提取出来的样式字符串做进一步处理
    const newCSS = r1[0].replace('<style>','').replace('</style>','');

    //4.3 将提取出来的 css 样式，写入 index.css 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.css'),newCSS,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}

//5.自定义 resolveJS() 处理 js
function resolveJS(htmlStr){
    //5.1 使用正则提取页面中的 <script></script> 标签
    const r2 = regScript.exec(htmlStr);

    //5.2 将提取出来的样式字符串做进一步处理
    const newJS = r2[0].replace('<script>','').replace('</script>','');

    //5.3 将提取出来的 js 样式，写入 index.js 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.js'),newJS,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}

//6.自定义  resolveHTML() 处理 html
function  resolveHTML(htmlStr){
    //6.1 使用字符串的 replace() 把内嵌的 <style></style> 和 <script></script> 标签，替换为外联的 <link href=""> 和 <script src=""></script>
    const newHTML = htmlStr
    .replace(regStyle,`<link rel="stylesheet" href="./index.css">`)
    .replace(regScript,`<script src="./index.js"></script>`);

    //6.2 将替换完成之后的 html 代码，写入到 index.html 文件中
    fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML,err => {
        if(err){
            return console.log('写入失败',err.message);
        }
        console.log('写入成功');
    })
}