使用nodejs来分离html文件中的js和css

对于本文要实现的内容，使用nodejs进行文件的添加、删除、修改和检查，演示示例-"将脚本和样式的内容分离在一个html文件中，然后分别生成js文件和css文件。异步中间处理Api“异步/等待，承诺”

项目主持：extract-js-css，欢迎来到star

直接编码：

//extract-js-css/从fs'var fs=require('fs ')中导入fs/从CSS梳'/var CSS梳=必需(' CSS梳')/var梳=新CSS梳(' Zen ')中导入CSS梳；//console.log(comb) //删除文件const deleteFile=(路径)={返回新的Promise(resolve={ fs.unlink(路径)，(err)={ if(err){ console。日志(错误)返回}；控制台。日志(` 0已成功删除${path}文件`);resolve()})；})} //删除文件夹const deleteDir=async(路径)={ let _ files=等待新的承诺(解析={ fs.readdir(路径)，(err，file)={ if(err){ console。log(err)}；控制台。日志(` 0已成功读取${path}文件夹`);resolve(files)})})if(_ files _ files。长度){对于(让I=0；I _ files . lengthi){//console . log(_ files[I]，' innnnnn ')等待删除文件(' ./test/' _ file[I])} }//控制台。日志('删除后')等待新的Promise(resolve={ fs.rmdir(路径)，(err)={ if(err){ console。log(err)}；控制台。日志(` 0已成功删除空${path}文件夹`);resolve()})})；}const emptyDir=(路径)={返回新的Promise(resolve={ fs.rmdir(路径)，(err)={ if(err){ console。log(err)}；控制台。日志(` 0已成功删除空${path}文件夹`);resolve() }) })}//新建文件夹/* * * */const mkdirTest=()={ 0返回新的Promise(resolve={ fs.mkdir ' ./test '，{ recursive: true }，(err，data)={ if(err){ console。log(err)}；console.log('新建文件夹成功)resolve() }) })} //读取超文本标记语言内容/* * * */const ReadHTML=()={ 0返回新的承诺(解析={ fs.readFile(')./test.html '，' utf-8 '，(err，data)={ if(err){ throw Error(err)} console。日志('测试。超文本标记语言读取成功！- NO1 ')解析（数据)}) })} //写入钢性铸铁和js/** *向文件中追加内容* @param {是文件名字}路径* @param {写入文件的内容}数据* @param {文件类型}键入* @ author er linger * @ time */const appendFile=(路径，数据，类型)={返回新的Promise(resolve={ fs.appendFile(路径，数据，(err)={ if(err){ console。log(err)}；console.log(`${type}数据已追加到文件`);resolve()})；})}//写一个htmlconst writeHtml=(路径，数据)={返回新的Promise(resolve={ fs.writeFile(路径，数据)，(err)={ if(err) { console.log('err，err)return } console。日志(`$ { path }写入成功，功能结束！`);resolve() //必须决心。

不然承诺就到此为止，调用该方法后面的代码将不执行}) })} //插件方法入口(async()={ console。日志('================================================-游戏开始=========================');等待删除目录('。/test’)；console.log('我应该是等-删除文件夹后-才出现)等待mkdirTest()；console.log('我应该是在-文件夹新建成功-后出现！');让cssReg=/style[\s|\S]*？\/style/ig；让jsReg=/script[\s|\S]*？\/script/ig；让allStyleReg=/\/style[\s|\S]*？style/ig；让allScriptReg=/\/script[\s|\S]*？脚本/ig；让cssLink='link rel='样式表href=' ./test。CSS"rel="外部没有跟随“”；让jsrc='script src='http:/test。js '/script '；让样式收集，脚本收集让cssContent=' '，jsContent=' '，htmlContentStr=让origin content=等待读取html()；样式集合=原始内容。匹配(CSsreg)；脚本集合=原始内容。匹配(JSReG)；//处理css用于(让I=0；istylecollection . lengthi){ CSsContent=JSON。stringify(样式集合[I])；} CSsContent=CSsContent。替换(/style/g ' ').替换(/\/style/g ' ').将(/('')/g ' ')替换为（让I=0；isscriptcollection。长度；I){ jsContent=JSON。stringify(脚本集合[I])；} jsContent=jsContent。替换(/script/g ' ').替换(/\/script/g ' ').替换(/\/script'*script/g ').替换(/('')/g ' ')，等待appendFile(' ./test/test.css '，JSON.parse(cssContent)，' CSS '；console.log('我应该是在- css写入成功-后出现!');等待appendFile(' ./test/test.js '，JSON.parse(jsContent)，' js '；console.log('我应该是在射流研究…写入成功-后出现!');htmlContentStr=originContent .替换(allStyleReg ' ').替换(cssReg，cssLink).替换(allScriptReg ' ').替换(jsReg、jsrc)；console.log('copyTest.html文本已经格式化，准备写入');等待writeHtml(' ./test/copyTest.html '，HTMlContentStr)；控制台。日志('===================================游戏结束=====================================')；})()代码确实没什么好解释的，慢慢看就明白了。运行：

Node extract-js-css如果要用es6模块，用import方法导入，需要单独安装一个巴别塔，用这个包编译成es5，正在运行。对于特定用途，您可以运行它。

对于这个项目，我们需要提醒您以下几点：

所有文件都是异步处理的。如果是单个异步操作方法(例如：appendFile方法)，就是将内容异步添加到文件中，直接打包成promise，然后返回。

如果一个操作包含多个异步处理逻辑，您需要用async声明方法，用wait等待异步操作，最后返回一个承诺

在执行主进程的过程中，我们使用async声明的方法进行调用(在我的例子中，匿名函数直接调用)，使用await等待异步操作，这样我们的主进程就是一个同步执行的进程，看起来明亮清晰。

本文中异步操作文件的api方法是异步的。nodejs开发文档提供了同步操作文档，所以可以直接使用同步api。我主要在异步操作的过程中使用async/await promise方法来更好地掌握它。

本文中的一个演示提供了一个处理多个异步的方案，一个异步操作包含多个异步操作，包括在一个循环中执行异步操作。它专门处理HTML文件的字符串处理，这在格式化和解析具有常规匹配和字符串的字符串时相对简单。读取文件内容后，需要JSON.stringify，以后在填写文件时需要JSON.parse。目前还没有找到合适的方法。如果你有合适的方法，请让我知道并与你交流。

以下是执行主异步方法的过程