核心思路
1、导入fs模块,path模块
2、分别创建CSS,JS正则表达式
3、fs.readFile()读取index.html这个文件,成功后调用函数;
4、封装一个函数,定义正则表达式,分别匹配<script></script>和<style></style>标签
5、replace()方法去除标签;
6、将提取出来的css样式,写入对应的文件中
const fs = require('fs')
const path = require('path')
const { resolve } = require('path/posix')
// 定义正则表达式,分别匹配<script></script>和<style></style>标签
// [\s\S]匹配任意字符(空白字符+非空白字符) *匹配多次
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 使用fs.readFile()读取被处理的文件index.html
fs.readFile(path.join(__dirname,'/index.html'),'utf8',(err,dataStr)=>{
if(err) {
return console.log('读取失败!' + err);
}
console.log('读取成功!');
// 读取html文件成功后,调用对应的方法,拆解出html,css,js文件
resolveCSS(dataStr)
resolveJS(dataStr)
resolveHTML(dataStr)
})
// 处理 CSS样式
function resolveCSS(htmlStr) {
// 使用正则提取页面中<script></st>标签
const r1 = regStyle.exec(htmlStr)
// 将提取出来的样式字符串,进一步处理(删除<script></script>)
const newCSS = r1[0].replace('<style>','').replace('</style>','')
// 将提取出来的css样式,写入index.css文件中
fs.writeFile(path.join(__dirname,'/clock/index.css'),newCSS, err => {
if(err) {
console.log('写入CSS样式失败!' + err);
} console.log('写入CSS样式成功!');
})
}
// 处理JS
function resolveJS(htmlStr) {
// 使用正则提取页面中<script></script>标签
const r2 = regScript.exec(htmlStr)
// 将提取出来的样式字符串,进一步处理(删除<script></script>)
const newJS = r2[0].replace('<script>','').replace('</script>','')
// 将提取出来的css样式,写入index.css文件中
fs.writeFile(path.join(__dirname,'/clock/index.js'),newJS, err => {
if(err) {
console.log('写入JS脚本失败!' + err);
} console.log('写入JS脚本成功!');
})
}
// 处理HTML
function resolveHTML(htmlStr) {
// 将字符串调用replace()方法,将内嵌的<script></script>和<style></style>标签,替换成link 和script标签
const newHTML = htmlStr.replace(regStyle,'<link rel="stylesheet" href="./index.css">').replace(regScript,'<script src="./index.js"></script>');
// 将提取出来的css样式,写入index.css文件中
fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML, err => {
if(err) {
console.log('写入html失败!' + err);
} console.log('写入html成功!');
})
}
网友评论