node.js读取、拆分HTML文件中的CSS、Script、HTML模块到不同文件

node.js读取、拆分HTML文件中的CSS、Script、HTML模块到不同文件

一月 22, 2022
该文章更新于 2022.01.22

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const fs = require('fs')
const path = require('path')

// 匹配style标签的正则 \s匹配所有空格;\S匹配所有非空格;*代表无限次
const regStyle = /<style>[\s\S]*<\/style>/
// 匹配script标签的正则
const regScript = /<script>[\s\S]*<\/script>/

// 读取文件
fs.readFile(path.join(__dirname, './009-index.html'), 'utf-8', function (err, dataStr) {
// 读取失败时直接return
if (err) return console.log('读取html文件失败了', err.message);
// 读取成功后,调用对应的三个方法,分别拆解出css、js、html文件
resolveCss(dataStr);
resolveJS(dataStr);
resolveHTML(dataStr);
})

// 定义处理css样式的方法
function resolveCss(htmlStr) {
// 使用正则提取需要的内容
const r1 = regStyle.exec(htmlStr)
// 将提取出来的样式字符串,进行字符串的replace替换操作
const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, (err) => {
if (err) return console.log('写入CSS样式失败!', err.message);
console.log('写入样式文件成功了!');
})
}

// 定义处理script的方法
function resolveJS(htmlStr) {
const r2 = regScript.exec(htmlStr);
const newJS = r2[0].replace('<script>', '').replace('</script>', '');
fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, (err) => {
if (err) return console.log('写入script失败!', err.message);
console.log('写入script成功!');
})
}

// 定义处理HTML的方法
function resolveHTML(htmlStr) {
const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>');
fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, (err) => {
if (err) return console.log('写入HTML失败!', er.message);
console.log('写入HTML成功!');
})
}

最终生成效果:

image-20220122001810336