使用node.js拆分 html 文件

使用node.js拆分 html 文件
    目标：将html文件拆分为 css文件，js文件，html文件
    拆分步骤：
        1.导入文件处理模块

const fs = require('fs')

        2.导入处理路径模块

const path = require('path')

        3.定义两个正则表达式，分别筛选css代码，和js代码

​
// 定义一个正则表达式抽取 js 脚本
 const regJavaScript = /<script>[\s\S]*<\/script>/
 // 利用正则表达式抽取 style 样式
 let regStyle = /<style>[\s\S]*<\/style>/

​

        4.使用fs.readFile() 方法读取要拆分的文件

fs.readFile(path.join(__dirname, './时钟案例.html'), 'utf8', (err, dataStr) => {
    // 判断是否读取成功
    if (err) return console.log('文件读取失败', err.message)
    // 文件读取成功
    console.log('文件读取成功')
   
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)


})

        5.(1).定义一个方法分离css
                1.利用筛选css的正则表达式筛选出对应的css样式模块代码
                2.使用正则表达式中的exec() 方法，得到筛选后的代码，exec() 会返回一个数组，数组的第0项就是筛选的得到的部分 r1[0]
                3.使用replace() 方法将css样式中的<s>和</style>替换成空字符串 得到最终想要的部分newCss
                4.将最终处理好的newCss写入文件index.css中

// 定义一个方法分离CSS
function resolveCSS(dataHtml) {
    
    const r1 = regStyle.exec(dataHtml)
    // 将提取出来的字符串，进行字符串的 replace 替换操作
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')
    // 使用 fs.writeFile() 方法给文件写入内容
    fs.writeFile(path.join(__dirname, './code/index.css'), newCss, 'utf8', (err) => {
        if (err) return console.log('文件写入失败')
        console.log('文件写入成功')
    })
}

          (2).定义一个方法分离js
                1.利用筛选JavaScript的正则表达式筛选出对应的JavaScript样式模块代码
                2.使用正则表达式中的exec() 方法，得到筛选后的代码，exec() 会返回一个数组，数组的第0项就是筛选的得到的部分 r1[0]
                3.使用replace() 方法将css样式中的<script>和</script>替换成空字符串 得到最终想要的部分newJs
                4.将最终处理好的newJs写入文件index.js中

// 定义一个方法分离JS 脚本
function resolveJS(dataHtml) {
    
    const r1 = regJavaScript.exec(dataHtml)
    // 将提取出来的字符串， 进行字符串 replace 替换操作
    const newJs = r1[0].replace('<script>', '').replace('</script>', '')
    // 使用 fs.writeFile() 方法给文件写入内容
    fs.writeFile(path.join(__dirname, './code/index.js'), newJs, 'utf8', (err) => {
        // 判断文件是否写入成功
        if(err) return console.log('文件写入失败')
        return console.log('文件写入成功')
    })
}

          (3).定义一个方法分离html
                1.使用筛选JavaScript 和 Css 的正则表达式 将对应部分替换掉
                2.替换的内容分别为<script src="index.js"></script> 和 <link rel="stylesheet" href="index.js"/>
                3.将替换后的内容 newHtml 写入 index.html 文件中

// 定义一个方法处理 html 文件
function resolveHTML(dataHtml) {
    // 使用正则表达式进行替换内容
    const newHtml = dataHtml.replace(regStyle, '<link rel="stylesheet" href="index.css">').replace(regJavaScript, '<script src="index.js"></script>')
    // 将newHtml 写入index.html文件中
    fs.writeFile(path.join(__dirname, './code/index.html'), newHtml, 'utf8', (err) => {
        // 判断是否写入成功
        if (err) return console.log('文件写入失败', errmessage);
        return console.log('文件写入成功')
    })
    
}

        7.调用三个方法，完成 html 分离

 resolveCSS(dataStr)
 resolveJS(dataStr)
 resolveHTML(dataStr)

        完整代码展示：
        

// 导入模块
const fs = require('fs')
const path = require('path')

 // 定义一个正则表达式抽取 js 脚本
 const regJavaScript = /<script>[\s\S]*<\/script>/
 // 利用正则表达式抽取 style 样式
 let regStyle = /<style>[\s\S]*<\/style>/

// 使用 fs.readFile() 方法读取文件
fs.readFile(path.join(__dirname, './时钟案例.html'), 'utf8', (err, dataStr) => {
    // 判断是否读取成功
    if (err) return console.log('文件读取失败', err.message)
    // 文件读取成功
    console.log('文件读取成功')
   
    resolveCSS(dataStr)
    resolveJS(dataStr)
    resolveHTML(dataStr)


})

// 定义一个方法分离CSS
function resolveCSS(dataHtml) {
    
    const r1 = regStyle.exec(dataHtml)
    // 将提取出来的字符串，进行字符串的 replace 替换操作
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')
    // 使用 fs.writeFile() 方法给文件写入内容
    fs.writeFile(path.join(__dirname, './code/index.css'), newCss, 'utf8', (err) => {
        if (err) return console.log('文件写入失败')
        console.log('文件写入成功')
    })
}
// 定义一个方法分离JS 脚本
function resolveJS(dataHtml) {
    
    const r1 = regJavaScript.exec(dataHtml)
    // 将提取出来的字符串， 进行字符串 replace 替换操作
    const newJs = r1[0].replace('<script>', '').replace('</script>', '')
    // 使用 fs.writeFile() 方法给文件写入内容
    fs.writeFile(path.join(__dirname, './code/index.js'), newJs, 'utf8', (err) => {
        // 判断文件是否写入成功
        if(err) return console.log('文件写入失败')
        return console.log('文件写入成功')
    })
}

// 定义一个方法处理 html 文件
function resolveHTML(dataHtml) {
    // 使用正则表达式进行替换内容
    const newHtml = dataHtml.replace(regStyle, '<link rel="stylesheet" href="index.css">').replace(regJavaScript, '<script src="index.js"></script>')
    // 将newHtml 写入index.html文件中
    fs.writeFile(path.join(__dirname, './code/index.html'), newHtml, 'utf8', (err) => {
        // 判断是否写入成功
        if (err) return console.log('文件写入失败', errmessage);
        return console.log('文件写入成功')
    })
    
}