nodejs分离html文件里面的js和css的方法


Posted in NodeJs onApril 09, 2019

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

项目托管:extract-js-css , 欢迎star

直接上代码:

// 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=============================');
})()

代码确实没什么好解释的,慢慢看就明白了。需要提醒以下:

  1. 对文件的处理都是异步操作,如果是单一的一个异步操作方法(比如:appendFile 方法),它就是往文件里面异步添加内容,直接封装成一个promise,然后 return 出来就好。
  2. 如果一个操作里面包含多个异步处理逻辑的就需要在这个方法里面,用async 声明方法,用await 等待异步操作,最后return 出去一个promise
  3. 在执行主流程中,我们用async声明的方法进行调用(我这里是匿名函数直接调用) ,用await 进行等待异步操作,这样我们的主流程就是一个同步的执行的流程,看起来很爽朗。
  4. 文中的异步操作文件的api 方法是异步的,nodejs 开发文档提供了同步操作文档,大家可以直接使用同步的api。我这里主要是联系在异步操作的过程中,使用async/ await promise 方法,更好的掌握它。
  5. 文中的一个demo 提供了处理多个异步、一个异步操作里面包含多个异步操作,包括在循环里执行异步操作 的一个方案,里面具体针对HTML 文件的字符串处理,比较搓搓,在用正则匹配和字符串格式化和解析字符串的情况比较单一。在读取完文件内容后,需要 JSON.stringify,后来在填入文件中的时候要 JSON.parse , 目前没找到合适的方法,如果有大佬有合适的方法,欢迎告知与我,大家一起交流。

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

nodejs分离html文件里面的js和css的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs极简入门教程(三):进程
Oct 27 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
nodejs中的fiber(纤程)库详解
Mar 24 NodeJs
nodejs实现HTTPS发起POST请求
Apr 23 NodeJs
Nodejs学习item【入门手上】
May 05 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
Jan 05 NodeJs
nodeJS进程管理器pm2的使用
Jan 09 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
nodejs中内置模块fs,path常见的用法说明
Nov 07 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 #NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 #NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 #NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 #NodeJs
详解nodejs http请求相关总结
Mar 31 #NodeJs
详解Nodejs get获取远程服务器接口数据
Mar 26 #NodeJs
nodejs微信开发之自动回复的实现
Mar 17 #NodeJs
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
javascript关于继承解析
2016/05/10 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
React 子组件向父组件传值的方法
2017/07/24 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python和php哪个容易学
2020/06/19 Python
python中re模块知识点总结
2021/01/17 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
找工作最新求职信
2013/12/22 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server