当前位置: 首页 > 后端技术 > Node.js

nodejs分离html文件中的js和css

时间:2023-04-03 18:09:22 Node.js

摘要:本文要实现的内容是使用nodejs对文件进行增删改查,并演示实例-》html中脚本和样式的内容分离文件,然后分别生成js文件和css文件。中间处理异步api-》async/await,Promise项目托管:extract-js-css,欢迎star直接上传代码://extract-js-css//importfsfrom'fs'varfs=require('fs')//从'csscomb'导入csscomb//varcsscomb=require('csscomb')//varcomb=newcsscomb('zen');//console.log(comb)//删除文件constdeleteFile=(path)=>{returnnewPromise(resolve=>{fs.unlink(path,(err)=>{if(err){console.log(err)return};console.log(`成功删除${path}文件`);resolve()});})}//删除文件夹constdeleteDir=async(path)=>{let_files=awaitnewPromise(resolve=>{fs.readdir(path,(err,files)=>{if(err){console.log(err)};console.log(`成功读取${path}文件夹`);resolve(files)})})if(_files&&_files.length){for(leti=0;i<_files.length;i++){//console.log(_files[i],'innnnnn')awaitdeleteFile('./test/'+_files[i])}}//console.log('deletehou')awaitnewPromise(resolve=>{fs.rmdir(path,(err)=>{if(err){console.log(err)};console.log(`成功删除空${path}文件夹`);resolve()})});}constemptyDir=(path)=>{returnnewPromise(resolve=>{fs.rmdir(path,(err)=>{if(err){console.log(err)};console.log(`成功删除空${path}文件夹`);resolve()})})}//新建文件夹/****/constmkdirTest=()=>{returnnewPromise(resolve=>{fs.mkdir('./test',{recursive:true},(err,data)=>{if(err){console.log(err)};console.log('创建文件夹成功')resolve()})})}//读取html内容/****/constreadHtml=()=>{returnnewPromise(resolve=>{fs.readFile('./test.html','utf-8',(err,data)=>{if(err){throwError(err)}console.log('test.html读取成功!--NO1')resolve(data)})})}//写入css和js/***向文件追加内容*@param{是文件名}path*@param{写入文件内容}data*@param{文件类型}type*@authorerlinger*@time*/constappendFile=(path,data,type)=>{returnnewPromise(resolve=>{fs.appendFile(path,data,(err)=>{if(err){console.log(err)};console.log(`${type}datahasbeenappendedtofile`);resolve()});})}//writeahtmlconstwriteHtml=(path,data)=>{returnnewPromise(resolve=>{fs.writeFile(path,data,(err)=>{if(err){console.log('err',err)return}console.log(`${path}写入成功,函数结束!`);resolve()//必须解析否则promise到此结束,调用该方法后的代码将不会被执行})})}//插件方法入口(async()=>{console.log('===========================游戏开始===============================');awaitdeleteDir('./test');console.log('我应该等待---删除文件夹后---出现')awaitmkdirTest();console.log('我应该在---文件夹创建成功---之后出现!');letcssReg=/[\s|\S]*?<\/style\s*>/ig;让jsReg=/';letstyleCollection,scriptCollection;letcssContent='',jsContent='',htmlContentStr='';letoriginContent=awaitreadHtml();styleCollection=originContent.match(cssReg);scriptCollection=originContent.match(jsReg);//处理cssfor(leti=0;i/g,'').替换(/<\/style\s*>/g,'').replace(/("")/g,'')for(leti=0;i/g,'').replace(/<\/script\s*>/g,'').replace(/<\/script\s*>"*/g,'').replace(/("")/g,'')awaitappendFile('./test/test.css',JSON.parse(cssContent),'css');console.log('我应该出现在---css写成功---!');awaitappendFile('./test/test.js',JSON.parse(jsContent),'js');console.log('我应该在---js写成功之后出现---!');htmlContentStr=originContent.replace(allStyleReg,'').replace(cssReg,cssLink).replace(allScriptReg,'').replace(jsReg,jsrc);console.log('copyTest.html文本已格式化并准备写入');awaitwriteHtml('./test/copyTest.html',htmlContentStr);console.log('=============================游戏结束================================');})()关于async/await的学习推荐:async/await代码真的没什么好解释的,大家慢慢看吧。运行:nodeextract-js-css如果要使用es6模块,使用import方式,需要单独安装一个babel,使用这个包编译成es5,运行即可。具体使用可以用down项目运行。对于本项目,需要提醒一下:对文件的处理是异步操作,如果是单一的异步操作方法(如:appendFile方法),就是给文件异步添加内容,直接封装成promise,然后返回出来。如果一个操作包含多个异步处理逻辑,则需要在该方法中。使用async声明方法,使用await等待异步操作,最后返回一个promise。在主进程的执行中,我们使用async声明的方法来调用(我这里是直接调用匿名函数),使用await等待异步操作,这样我们的主进程就是一个同步执行的进程,看起来很令人耳目一新。本文异步操作文件的api方法是异步的,nodejs开发文档提供了同步操作文档,直接使用同步api即可。我这里的重点是在异步操作的过程中使用async/awaitpromise方法,更好的掌握。本文的一个demo提供了处理多个异步操作的解决方案,一个异步操作包含多个异步操作,包括循环执行异步操作,具体针对HTML文件的字符串处理,比较蹭,使用正则匹配的案例字符串格式化和解析字符串相对简单。读取文件内容后,需要JSON.stringify,后面填充文件时,需要JSON.parse。目前还没有找到合适的方法。如果有合适的方法,请告诉我并与您交流。.下面是执行一个mainasync方法的过程。欢迎评论指正!我是埃林格