Nodejs处理CSS、JS、HTML

Ashorer.

2024-03-28 帮助1人

目的：将02案例下的01test.html拆分成01test.html，01test的css.css，01test的js.js三个目录，并把这三个文件放到02案例目录下。

学新通

01test.html代码：

<style>
.box1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
<body>
<div class="box1"></div>
<button id="btn1">改变颜色</button>
</body>
<script>
$(function(){
$("#btn1").click(function(){
$(".box1").css('background-color','red');
})
})
</script>

实现的效果就是改变box1的背景颜色

学新通

实现步骤：

1、创建两个正则表达式，用来匹配<style>和<script>标签

2、用fs模块，读取要处理的HTML文件

3、自定义resolveCSS和resolveJS方法写入.css和.js文件

4、自定义resolveHTML方法，写入.html文件

步骤1-导入需要用到的模块和创建正则表达式

const fs=require('fs')
// 导入path路径处理模块
const path=require('path')
// *表示匹配多次
const regstyle= /<style>[\s\S]*<\/style>/
const regscript= /<script>[\s\S]*<\/script>/

步骤2-用fs模块读取.html文件

fs.readFile(path.join(__dirname,'./02案例/01test.html'),'utf-8',function(err,dataStr){
if(err) return console.log('读取html文件失败' err.message);
// 调用对应的方法
resolveCSS(dataStr)
resolveJS(dataStr)
resolveHTML(dataStr)
})

步骤3-自定义resolveCSS方法和resolveJS方法

resolveCSS方法：

function resolveCSS(htmlStr){
// 提取<style></style>标签
const r1=regstyle.exec(htmlStr)
// 把<style>和</style>都换成空
const newCss=r1[0].replace('<style>','').replace('</style>','')
// 将处理好的css样式写入01test的css.css文件
fs.writeFile(path.join(__dirname,'./02案例/01test的css.css'),newCss,function(err){
if(err) return console.log('写入css失败' err.message);
console.log('写入css成功');
})
}

这里注意01test的css.css文件需要提前创建，因为fs.write不会创建新文件。如果不提前创建，会报错。另外如果文件已经有内容，fs.write会覆盖内容。

resolveJS方法：

function resolveJS(htmlStr){
// 提取<script></script>标签
const r2=regscript.exec(htmlStr)
// 把<script>和</script>都换成空
const newJS=r2[0].replace('<script>','').replace('</script>','')
// 将处理好的js脚本写入01test的js.js文件
fs.writeFile(path.join(__dirname,'./02案例/01test的js.js'),newJS,function(err){
if(err) return console.log('写入JS失败' err.message);
console.log('写入JS成功');
})
}

这里01test的js.js文件也是需要提前创建的。

步骤4-自定义resolveHTML方法

function resolveHTML(htmlStr){
// 用replace方法，把内嵌的<style>标签替换为外联的<link>标签，把内嵌的<script>标签替换为外联的<script>标签
const newHTML=htmlStr.replace(regstyle,'<link rel="stylesheet" href="https://blog.csdn.net/qq_64010161/article/details/01test的css.css"/>').replace(regscript,'<script src="https://blog.csdn.net/qq_64010161/article/details/01test的js.js"></script>')
// 将处理好的代码，写入01test.html文件中
fs.writeFile(path.join(__dirname,'./02案例/01test.html'),newHTML,function(err){
if(err) return console.log('写入HTML失败' err.message);
console.log('写入HTML成功');
})
}

运行结果：

学新通

写入的.css文件：

学新通

写入的.js文件：

学新通

写入的.html文件：

学新通

效果演示：

学新通

效果一样，说明拆分成功。

这篇好文章是转载于：学新通技术网

Nodejs处理CSS、JS、HTML

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐