一、案例准备和目标

二案例实操

1.案例步骤

2.具体操作

①导入需要的模块并创建正则表达式

②使用fs模块读取需要被处理的html文件

③自定义resolveCSS文件

④自定义resolveScript文件

⑤自定义resolveHTML文件

小伙伴们，前两次分享的node.js的fs文件读取、写入以及路径模块的路径拼接和通过路径模块获取扩展名及文件名大家看懂了吗？我也是刚刚才写文章所以有很多不懂得，做的不到位的，希望各位小伙伴们能够多多提提意见，帮我指正问题。

一、案例准备和目标

今天呢想和大家就之前分享的东西做一个小小的案例，在正式操作之前呢需要做一些小小的准备，我们需要在我们创建的文件夹内放入一个HTML文件，之前写的随便一个就可以，只不过HTML文件里面需要同时包括style样式、body及script三部分，而我们今天的目标就是将一个HTML文件中的style样式、body和script三部分分别写入html、css和js三个文件。

这个案例中我们会复习到"fs.readFile()"、''fs.writeFile()"、"__dirname"、"path.join()"内容，如果不记得了的小伙伴们就点开链接复习一下吧！

首先，我们看一下我准备的页面

二案例实操

1.案例步骤

这词案例大概分为五个步骤，我们一起来看一下吧！

①导入需要的模块并创建正则表达式

②使用fs模块读取需要被处理的html文件

③自定义resolveCSS文件

④自定义resolveScript文件

⑤自定义resolveHTML文件

2.具体操作

①导入需要的模块并创建正则表达式

// 导入fs模块
const fs = require('fs')
// 导入path路径
const path = require('path')
// 创建正则表达式，分别匹配<style></style>和<script></script>标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

以“const regStyle = /<style>[\s\S]*<\/style>/”为创建style正则表达式。

注意：内容写在“/”里面，其中style和script属于匹配的标签

"\s"属于所有空白字符，“\S”属于非空白字符，“*”属于任意多次

创建script正则表达同样如此

②使用fs模块读取需要被处理的html文件

// 导入fs模块
const fs = require('fs')
// 导入path路径
const path = require('path')
// 创建正则表达式，分别匹配<style></style>和<script></script>标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 调用fs.readFile()方法读取之前放在文件夹的html文件
fs.readFile(path.join(__dirname,'./index.html'),'utf-8',(err,dataStr) =>{
       // 进行判断若err为true说明读取失败，会返回错误信息
    // 否则会显示读取成功
    if(err) return console.log(err.message)
    console.log('读取成功')

})

在fs.writeFile()中使用了path.join()__dirname来确定路径，

若使用path.join()使用的是“__dirname,'./index.html' ”,若不使用path.join()则是“__dirname+'/index.html' ”。

这是两种不同的写法，大家一定要注意啊！

我们可以打开cmd或者在文件夹内打开PowerShell窗口进行运行，输入node 空格 ./xxx.js,按下空格进行运行。

③自定义resolveCSS文件

同样的，写到这里我们就可以正式开始写自定义resolveCSS文件了。

// 导入fs模块
const fs = require('fs')
const { resolve } = require('path')
// 导入path路径
const path = require('path')
// 创建正则表达式，分别匹配<style></style>和<script></script>标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 调用fs.readFile()方法读取之前放在文件夹的html文件
fs.readFile(path.join(__dirname,'./index.html'),'utf-8',(err,dataStr) =>{
       // 进行判断若err为true说明读取失败，会返回错误信息
    // 否则会显示读取成功
    if(err) return console.log(err.message)
    console.log('读取成功')
    // 创建resolveCSS函数并调用
    resolveCSS(dataStr)
    

})
// 创建resolveCss函数
function resolveCSS(htmlStr){
      // 使用正则提取html中的css样式
    const c1 = regStyle.exec(htmlStr)
    // 将<style>标签和</style>标签替换为空格
    const newCSS = c1[0].replace('<style>',' ').replace('</style>',' ')
     // 写入index.css文件中
    fs.writeFile(path.join(__dirname,'./index.css'),newCSS,(err) =>{
        //    判断err是否为true，若true返回错误信息，否则显示写入成功
        if(err) return console.log(err.message)
        console.log('写入成功')
    })
}
}

在我们创建好resolveCSS函数并且调用以后会在导入fs模块语句下方自动生成一条新的语句

const { resolve } = require('path')

在这里面涉及到两个个新的方法：exec()和repla()。

exec()语法：RegExpObect.exec(string)

replace()语法：stringObject.replace(regexp/substr,replacement)

方法要调用！！！！！！！！！一定记得

写到这里，可以再进行一次运行

我们打开文件夹，可以发现已经出现了index.css文件了

我们将生成的css文件打开看一下

④自定义resolveScript文件

处理完css样式我们可以开始处理js样式了。

// 导入fs模块
const fs = require('fs')
const { resolve } = require('path')
// 导入path路径
const path = require('path')
// 创建正则表达式，分别匹配<style></style>和<script></script>标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 调用fs.readFile()方法读取之前放在文件夹的html文件
fs.readFile(path.join(__dirname,'./index.html'),'utf-8',(err,dataStr) =>{
       // 进行判断若err为true说明读取失败，会返回错误信息
    // 否则会显示读取成功
    if(err) return console.log(err.message)
    console.log('读取成功')
    // 创建resolveCSS函数并调用
    resolveCSS(dataStr)
    // 创建resolveScript函数并调用
    resolveScript(dataStr)
})
// 创建resolveCss函数
function resolveCSS(htmlStr){
      // 使用正则提取html中的css样式
    const c1 = regStyle.exec(htmlStr)
    // 将<style>标签和</style>标签替换为空格
    const newCSS = c1[0].replace('<style>',' ').replace('</style>',' ')
     // 写入index.css文件中
    fs.writeFile(path.join(__dirname,'./index.css'),newCSS,(err) =>{
        //    判断err是否为true，若true返回错误信息，否则显示写入成功
        if(err) return console.log(err.message)
        console.log('写入成功')
    })
}
// 创建resolveScript函数
function resolveScript(htmlStr){
    // 使用正则提取html中的css样式
    const c2 = regScript.exec(htmlStr)
    // 将<script>标签和</script>标签替换为空格
    const newScript = c2[0].replace('<script>','0').replace('</script>',' ')
     //   判断err是否为true，若true返回错误信息，否则显示写入成功
    fs.writeFile(path.join(__dirname,'./index.js'),newScript,(err) =>{
        if(err) return console.log(err.message)
        console.log('写入文件')
    })
}

一定要记得在这里进行方法的调用哦！

然后再次在cmd或者PowerShell窗口运行，再打开文件夹进行查看

打开js文件也看一下

⑤自定义resolveHTML文件

到现在为止，我们的css文件和js文件已经创建成功了，现在该是HTML文件了

// 导入fs模块
const fs = require('fs')
const { resolve } = require('path')
// 导入path路径
const path = require('path')
// 创建正则表达式，分别匹配<style></style>和<script></script>标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 调用fs.readFile()方法读取之前放在文件夹的html文件
fs.readFile(path.join(__dirname,'./index.html'),'utf-8',(err,dataStr) =>{
       // 进行判断若err为true说明读取失败，会返回错误信息
    // 否则会显示读取成功
    if(err) return console.log(err.message)
    console.log('读取成功')
    // 创建resolveCSS函数并调用
    resolveCSS(dataStr)
    // 创建resolveScript函数并调用
    resolveScript(dataStr)
    // 创建resolveHTML函数并调用
    resolveHTML(dataStr)

})
// 创建resolveCss函数
function resolveCSS(htmlStr){
      // 使用正则提取html中的css样式
    const c1 = regStyle.exec(htmlStr)
    // 将<style>标签和</style>标签替换为空格
    const newCSS = c1[0].replace('<style>',' ').replace('</style>',' ')
     // 写入index.css文件中
    fs.writeFile(path.join(__dirname,'./index.css'),newCSS,(err) =>{
        //    判断err是否为true，若true返回错误信息，否则显示写入成功
        if(err) return console.log(err.message)
        console.log('写入成功')
    })
}
// 创建resolveScript函数
function resolveScript(htmlStr){
    // 使用正则提取html中的css样式
    const c2 = regScript.exec(htmlStr)
    // 将<script>标签和</script>标签替换为空格
    const newScript = c2[0].replace('<script>','0').replace('</script>',' ')
     //   判断err是否为true，若true返回错误信息，否则显示写入成功
    fs.writeFile(path.join(__dirname,'./index.js'),newScript,(err) =>{
        if(err) return console.log(err.message)
        console.log('写入文件')
    })
}
// 创建resolveHTML函数
function resolveHTML(htmlStr){
     // 将regStyle替换为<link rel="stylesheet" href = "./index.css"/>
    // regScript替换为<script src="./index.js>"></script>
    const newHtml = htmlStr.replace(regStyle,'<link rel=stylesheet href="./111.css"/>').replace(regScript,'<script src="./222.js"></script>')
    fs.writeFile(path.join(__dirname,'./index2.html'),newHtml,(err) =>{
          //   使用fs.writeFile()方法写入文件 判断err是否为true，若true返回错误信息，否则显示写入成功
        if(err) return console.log(err.message)
        console.log('写入成功')
    })
}

在resolveHTML函数创建中有一个小小的知识点：在整个html页面其实就是head，style，body和script，在这个函数中我们就只是将这个页面中style部分和script部分改为了链接形式，所以在直接将regstyle和regscript部分直接改为了链接。