Nodejs处理CSS、JS、HTML

目的：将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="./01test的css.css"/>').replace(regscript,'<script src="./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相关推荐

网易云课堂Nodejs笔记（js Function，css，写法)
网易云课堂Nodejs笔记(js Function,css) CSS position ---网页定位 margin ---元素外边距 padding ---元素内边距 nth-child()选择器 ...
前端面试宝典 html css js ajax es6
面试宝典一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
sublime插件 —— 一键美化HTML/CSS/JS代码
当我们在设计网页页面的时候,如果页面元素有很多,使用HTML-CSS-JS Prettify可以快速整理我们的代码结构,让代码缩进合适,删除多余的空格/空行,安装步骤如下. step1:使用Sub ...
html面试题(一)--html css js
前端面试题汇总一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
sublime一键格式化html/css/js
1.使用快捷键ctrl+shift+p调出控制台,输入install package,然后输入html-css-js prettify,进行下载 2.下载完成后,在preference打开packag ...
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器 MiniBlink的作者是龙泉寺扫地僧 miniblink是什么? (抄了一下龙泉寺扫地僧写 ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...
Atitit 使用h5技术 html css js 制作桌面程序gui界面解决方案attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...

Nodejs处理CSS、JS、HTML

Nodejs处理CSS、JS、HTML相关推荐

最新文章

热门文章