案例：时钟
目标效果
- 将单个 index.html 页面拆分成三个文件：分别是 html 、 js 、 css 文件。拆分后放在 clock 目录中。
原始代码
Details
分析
- 创建正则表达式，分别来匹配
style标签和script标签。 - 使用 fs 模块，读取需要处理的 HTML 文件。
- 自定义 resolveCSS 方法(拆解)，写入
index.css文件。 - 自定义 resolveJS 方法(拆解)，写入
index.js文件。 - 自定义 resolveHTML 方法(拆解)，写入
index.html文件。
正则表达式
const fs = require("fs");
const path = require("path");
//正则表达式
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;
// \s 表示空白字符，\S标识非空白字符，*表示匹配任意次数
读取原始 HTML 文件
...
// 读取原始文件，将HTML代码以纯文本的方式读入
fs.readFile(
path.join(__dirname, "../index.html"),
"utf8",
function (err, dataStr) {
// 读取失败
if (err) {
return console.log("读取HTML失败!");
}
// 拆分
resolveCSS(dataStr);
resolveJS(dataStr);
resolveHTML(dataStr);
}
);
...
拆分CSS代码
function resolveCSS(htmlStr) {
// 调用正则表达式匹配
const r1 = regStyle.exec(htmlStr);
// 处理提取后的字符串，将标签去掉
const newCSS = r1[0].replace("<style>", "").replace("</style>", "");
fs.writeFile(
path.join(__dirname, "./clock/index.css"),
newCSS,
function (err) {
if (err) {
return console.log(err.message);
}
console.log("写入css成功");
}
);
}
拆分JS代码
function resolveJS(htmlStr) {
// 调用正则表达式匹配
const r1 = regScript.exec(htmlStr);
// 处理提取后的字符串，将标签去掉
const newCSS = r1[0].replace("<script>", "").replace("</script>", "");
fs.writeFile(
path.join(__dirname, "./clock/index.js"),
newCSS,
function (err) {
if (err) {
return console.log(err.message);
}
console.log("写入js成功");
}
);
}
拆分HTML代码
// 读取原始文件，将HTML代码以纯文本的方式读入
function resolveHTML(htmlStr) {
// 将原来的代码替换为链接
const newHTML = htmlStr
.replace(regStyle, '<link rel="stylesheet" href="./index.css"/>')
.replace(regScript, '<script src="./index.js"/>');
fs.writeFile(
path.join(__dirname, "./clock/index.html"),
newHTML,
function (err) {
if (err) {
return console.log(err.message);
}
console.log("写入html成功");
}
);
}
完整代码
Details
控制台输出
PS D:\desk\FrontEnd\test\8-11> node clock
写入js成功
写入css成功
写入html成功
结果
运行 index.html :
注意点
writeFile方法只能创建文件，但是不能创建路径（文件夹）- 重复调用
writeFile时新内容会覆盖旧的内容。