1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      使用nodejs分离html文件里的js和css详解

       更新时间£º2019年04月12日 08:41:47   投稿£ºlaozhang   我要评论

      在本篇文章里小编给大家分享了关于如何使用nodejs分离html文件里的js和css的相关知识点£¬需要的朋友参考下¡£

      摘要£º 本文要实现的内容£¬使用nodejs 对文件的增删改查£¬演示的例子-¡·分离出一个html 文件里面的script 和style 里面的内容£¬然后单独生成js文件和css 文件¡£中间处理异步的api-¡·async/await , Promise

      项?#23458;?#31649;£ºextract-js-css , 欢迎star

      直接上代码£º

      // extract-js-css
      
      // import fs from 'fs'
      
      var fs = require('fs')
      
      // import csscomb from 'csscomb'
      
      // var csscomb = require('csscomb')
      
      // var comb = new csscomb('zen');
      
      // console.log(comb)
      
       
      
      // 删除文件
      
      const deleteFile = (path)=>{
      
        return new Promise(resolve => {
      
          fs.unlink(path, (err) => {
      
            if (err) {
      
              console.log(err)
      
              return
      
            };
      
            console.log(`已成功删除 ${path}文件`);
      
            resolve()
      
          });
      
        })
      
      }
      
       
      
      // 删除文件夹
      
      const deleteDir = async (path)=>{
      
        let _files = await new Promise (resolve => {
      
          fs.readdir(path, (err,files) => {
      
            if (err) {
      
              console.log(err)
      
            };
      
            console.log(`已成功读取 ${path} 文件夹`);
      
            resolve(files)
      
          })
      
        })
      
       
      
        if(_files && _files.length) {
      
          for(let i =0;i<_files.length;i++) {
      
            // console.log(_files[i],'innnnnn')
      
            await deleteFile('./test/'+ _files[i])
      
          }
      
        }
      
        // console.log('delete hou')
      
       
      
        await new Promise(resolve => {
      
          fs.rmdir(path, (err) => {
      
            if (err) {
      
              console.log(err)
      
            };
      
            console.log(`已成功删除空 ${path}文件夹`);
      
            resolve()
      
          })
      
        });
      
      }
      
      const emptyDir = (path) => {
      
        return new Promise(resolve => {
      
          fs.rmdir(path, (err) => {
      
            if (err) {
      
              console.log(err)
      
            };
      
            console.log(`已成功删除空 ${path}文件夹`);
      
            resolve()
      
          })
      
        })
      
      }
      
      // 新建文件夹
      
      /**
      
       * 
      
       */
      
      const mkdirTest = ()=>{
      
        return new Promise(resolve => {
      
          fs.mkdir('./test', { recursive: true }, (err, data)=>{
      
            if (err) {
      
              console.log(err)
      
            };
      
            console.log('新建文件夹成功')
      
            resolve()
      
          })
      
        })
      
      }
      
       
      
      // 读取html 内容
      
      /**
      
       * 
      
       */
      
      const readHtml = ()=>{
      
        return new Promise(resolve => {
      
          fs.readFile('./test.html', 'utf-8', (err, data)=>{
      
            if(err) {
      
              throw Error(err)
      
            }
      
            console.log('test.html 读取成功£¡--NO1')
      
            resolve(data)
      
          })
      
        })
      
      }
      
       
      
      // 写入css 和js
      
      /**
      
       * 向文件中追加内容
      
       * @param {是文件名字} path 
      
       * @param {写入文件的内容} data 
      
       * @param {文件类型} type 
      
       * @author erlinger
      
       * @time 
      
       */
      
      const appendFile = (path, data, type) => {
      
        return new Promise(resolve => {
      
          fs.appendFile(path, data, (err) => {
      
            if (err) {
      
              console.log(err)
      
            };
      
            console.log(`${type}数据已追加到文件`);
      
            resolve()
      
          });
      
        })
      
      }
      
      // 写一个html
      
      const writeHtml = (path, data) => {
      
        return new Promise(resolve => {
      
          fs.writeFile(path, data, (err) =>{
      
            if(err) {
      
              console.log('err', err)
      
              return
      
            }
      
            console.log(`${path} 写入成功£¬功能结束!`);
      
            resolve() // 必须resolve ¡£不然 promise 就到此为止£¬调用该方法后面的代码将不执行
      
          })
      
        })
      
      }
      
       
      
      // 插件 方法入口
      
      (async ()=>{
      
        console.log('==========================game-start=============================');
      
        await deleteDir('./test');
      
        console.log('我应该是等---删除文件夹后---才出现')
      
       
      
        await mkdirTest();
      
        console.log('我应该是在---文件夹新建成功---后出现£¡');
      
       
      
        let cssReg = /<style>[\s|\S]*?<\/style>/ig;
      
        let jsReg = /<script>[\s|\S]*?<\/script>/ig;
      
        let allStyleReg = /<\/style>[\s|\S]*?<style>/ig;
      
        let allScriptReg = /<\/script>[\s|\S]*?<script>/ig;
      
        let cssLink = '<link rel="stylesheet" href="./test.css" rel="external nofollow" >';
      
        let jsrc = '<script src="./test.js"></script>';
      
        let styleCollection, scriptColletion;
      
        let cssContent = '', jsContent = '', htmlContentStr = '';
      
       
      
        let originContent = await readHtml();
      
        styleCollection = originContent.match(cssReg);
      
        scriptColletion = originContent.match(jsReg);
      
         
      
        // 处理 css
      
        for (let i =0;i<styleCollection.length;i++) {
      
          cssContent += JSON.stringify(styleCollection[i]);
      
        }
      
       
      
        cssContent = cssContent.replace(/<style>/g,'').replace(/<\/style>/g, '').replace(/("")/g,'')
      
         
      
        for (let i =0;i<scriptColletion.length;i++) {
      
          jsContent += JSON.stringify(scriptColletion[i]);
      
        }
      
         
      
        jsContent = jsContent.replace(/<script>/g,'').replace(/<\/script>/g, '')
      
        .replace(/<\/script>"*<script>/g, '').replace(/("")/g,'')
      
         
      
        await appendFile('./test/test.css', JSON.parse(cssContent), 'css');
      
        console.log('我应该是在---css写入成功---后出现£¡');
      
       
      
        await appendFile('./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 文本已经格式化£¬准备写入');
      
        await writeHtml('./test/copyTest.html', htmlContentStr);
      
       
      
        console.log('==========================game-over=============================');
      
      })()

      代码确实没什么好解释的£¬慢慢看就明白了¡£运行£º

      node extract-js-css

      如果你要使用 es6 module£¬用 import 导入方法£¬需要单独装一个babel£¬使用这个包去编译成es5£¬在运行£¬具体使用可以down项目运行一下¡£

      针?#28304;?#39033;目£¬需要提醒说明以下£º

      对文件的处理都是异步操作£¬如果是单一的一个异步操作方法£¨比如£ºappendFile 方法£©,它就是往文件里面异?#25945;?#21152;内容£¬直接封装成一个promise,然后 return 出来就好¡£

      如果一个操作里面包含多个异步处理逻辑的就需要在这个方法里面£¬用async 声明方法£¬用await 等待异步操作£¬最后return 出去一个promise

      在执行主流程中£¬我们用async声明的方法进行调用£¨我这里是匿名函数直接调用£© £¬用await 进行等待异步操作£¬这样我们的主流程就是一个同步的执行的流程£¬看起来很爽朗¡£

      文中的异步操作文件的api 方法是异步的£¬nodejs 开发文档提供了同步操作文档£¬大家可以直接使用同步的api¡£我这里主要是联系在异步操作的过程中£¬使用async/ await promise 方法£¬更好的掌握它¡£

      文中的一个demo 提供了处理多个异步¡¢一个异步操作里面包含多个异步操作£¬包括在循环里执行异步操作 的一个方案£¬里面具体针对HTML 文件的字符串处理£¬比较搓搓£¬在用正则匹配和字符串格式化和解析字符串的情况比?#31995;?#19968;¡£在读取完文件内容后£¬需要 JSON.stringify£¬后来在填入文件中的时候要 JSON.parse £¬ 目前没找到合适的方法£¬如果有大佬有合适的方法£¬欢迎告知与我£¬大家一起交流¡£

      下面是 执行一个主 async方法的一个过程

      相关文章

      • 浅析Node.js 中 Stream API 的使用

        浅析Node.js 中 Stream API 的使用

        这篇文章给大家浅析node.js中stream api的使用£¬本文介绍的非常详细£¬涉及到node.js api£¬node.js stream相关知识£¬?#34892;?#36259;的朋友可以参考下
        2015-10-10
      • node.js学习之交互式解释器REPL详解

        node.js学习之交互式解释器REPL详解

        Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环?#24120;?#31867;似Window 系统的终端或 Unix/Linux shell£¬我们可以在终端中输入命令£¬并接收系统的响应¡£下面这篇文章我们就来详细的介绍下关于node.js交互式解释器REPL的内容£¬有需要的朋友们可以参考借鉴¡£
        2016-12-12
      • Node.js中child_process实现多进程

        Node.js中child_process实现多进程

        这篇文章主要介绍了Node.js中child_process实现多进程,需要的朋友可以参考下
        2015-02-02
      • Node.js测试中的Mock文件系统详解

        Node.js测试中的Mock文件系统详解

        相信大家应该都知道在Node.js测试中£¬常常会需要构造某种项目目录¡£ 为每个测试用例添加相应的目录结构?#30830;?#26102;又难以维护¡£那么这个时候Mock文件系统就派上用场了£¬下面这篇文章详细的介绍了Mock文件系?#24120;?#26377;需要的朋友们可以参考借鉴£¬下面来一起学习学习吧¡£
        2016-11-11
      • Node.js的环境安装配置(使用nvm方式)

        Node.js的环境安装配置(使用nvm方式)

        在我们前端开发工程中,很多繁琐机械的操作都是会慢慢的被抽离出来的,比如当我们为dom操作和浏览器兼容性感到厌烦时,jQuery出现了,随着时间的发展,JavaScript现在被应用到了服务器中,但是首先第一步我们要学会如何安装配置Node.js的环?#24120;?#26412;文是使用nvm方式£¬来一起看?#30784;?/div> 2016-10-10
      • node.js缺少mysql模块运行报错的解决方法

        node.js缺少mysql模块运行报错的解决方法

        前几天在工作中需要利用node.js连接数据库£¬通过网上的教程连接后运行却报错了£¬然后赶紧查找解决的方法£¬通过测试与朋友的提点£¬终于解决了这个问题£¬现在将解决的方法分享给大家£¬有需要的朋友们可以参考借鉴£¬下面来一起看看吧¡£
        2016-11-11
      • 又?#33041;?Node.js 实现文件上传¡¢删除功能

        又?#33041;?Node.js 实现文件上传¡¢删除功能

        这篇文章主要介绍了又?#33041;?Node.js 实现文件上传¡¢删除功能£¬代码简单易懂£¬非常不错£¬具有一定的参考借鉴价值,需要的朋友可以参考下
        2018-10-10
      • NodeJs模拟登陆正方教务

        NodeJs模拟登陆正方教务

        网上已经有很多关于模拟登陆正方教务的作品了£¬基于 PHP£¬Python£¬Java£¬.Net 加上NodeJs£¬这?#35813;?#35821;言都可以实现模拟登陆£¬模拟登陆的技术点不是特别难£¬这里记?#23478;?#19979;利用Node碰到的一些坑£¬以及一些解决思路¡£
        2017-04-04
      • 使用nodejs中httpProxy代理时候出现404异常的解决方法

        使用nodejs中httpProxy代理时候出现404异常的解决方法

        下面小编就为大家带来一篇使用nodejs中httpProxy代理时候出现404异常的解决方法¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2016-08-08
      • node.js中watch机制详解

        node.js中watch机制详解

        本文给大家带来的是一篇关于nodejs中watch机制的?#25945;à?#20027;要?#25945;?#20869;容是为什么watch不是银弹£¬尝试使用更好的方案来解决这个问题
        2014-11-11

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>