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


Posted in NodeJs onApril 12, 2019

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

项目托管: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项目运行一下。

针对此项目,需要提醒说明以下:

对文件的处理都是异步操作,如果是单一的一个异步操作方法(比如:appendFile 方法),它就是往文件里面异步添加内容,直接封装成一个promise,然后 return 出来就好。

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

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

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

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

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

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

NodeJs 相关文章推荐
nodejs win7下安装方法
May 24 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
NodeJS学习笔记之MongoDB模块
Jan 13 NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
Express与NodeJs创建服务器的两种方法
Feb 06 NodeJs
用nodeJS搭建本地文件服务器的几种方法小结
Mar 16 NodeJs
Nodejs搭建wss服务器教程
May 24 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 #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
You might like
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php中rename函数用法分析
2014/11/15 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python pickle模块用法实例
2015/04/14 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Python 存取npy格式数据实例
2020/07/01 Python
一文读懂Python 枚举
2020/08/25 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
个人先进材料范文
2014/12/30 职场文书
2015毕业寄语大全
2015/02/26 职场文书
幼师个人总结范文
2015/02/28 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏