使用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

项目托管: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方法的一个过程

相关文章

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

    浅析Node.js 中 Stream API 的使用

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

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

    Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似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测试中,常常会需要构造某种项目目录。 为每个测试用例添加相应的目录结构既费时又难以维护。那么这个时候Mock文件系统就派上用场了,下面这篇文章详细的介绍了Mock文件系统,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • Node.js的环境安装配置(使用nvm方式)

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

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

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

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

    又拍云 Node.js 实现文件上传、删除功能

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

    NodeJs模拟登陆正方教务

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

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

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

    node.js中watch机制详解

    本文给大家带来的是一篇关于nodejs中watch机制的探讨,主要探讨内容是为什么watch不是银弹,尝试使用更好的方案来解决这个问题
    2014-11-11

最新评论