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

摘要: 本文要实现的内容,使用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方法的一个过程

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

(0)

相关推荐

  • 用Nodejs搭建服务器访问html、css、JS等静态资源文件

    为了测一个附近门店的功能,需要配置一下服务器进行测试.本来打算用apache的,后来想自己是做前端的,好久没有用过Nodejs了何不用所学的知识自己配一下呢,说动手就手. 第一步,俗话说的好,工欲善其事,必先利其器.既然要用node+express配置服务器,如果电脑上没有的话自然要先安装这两个大宝贝啦. 1.安装node.到Node官网下载安装即可,直接下一步下一步就完成了. 2.npm初始化项目.打开终端,输入npm init -y即可.注意:如果不输入-y要自己写一些配置,写了-y会默认直

  • Nodejs中使用phantom将html转为pdf或图片格式的方法

    最近在项目中遇到需要把html页面转换为pdf的需求,并且转换成的pdf文件要保留原有html的样式和图片.也就是说,html页面的图片.表格.样式等都需要完整的保存下来. 最初找到三种方法来实现这个需求,这三种方法都只是粗浅的看了使用方法,从而找出适合这个需求的方案: html-pdf 模块 wkhtmltopdf 工具 phantom 模块 最终使用了phantom模块,也达到了预期效果.现在简单的记录三种方式的使用方法,以及三者之间主要的不同之处. 1.html-pdf github:ht

  • 通过nodejs 服务器读取HTML文件渲染到页面的方法

    1.分别简单实现三个备用页面. login.html页面 index.html页面 代码片段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21;

  • nodejs 简单实现动态html的方法

    动态替换html内容 1.实现的功能及原理 实现了将,用户表单的数据,与html相结合,将用户输入的数据,显示到html对应的位置. 原理:通过正则表达式,替换html中的模板数据 如用户名{name},可以通过拿到用户提交的name的值value,通过 replace(正则表达式,value)的方式替换掉原模板数据,并输出到客户端. 2.主要用到的方法和模块 2.1文件操作模块 var fs=require("fs"); 方法: 2.1.1 异步读取文件的方法 fs.readFile

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

  • nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法

    需求描述,由于工作的需要,需要将原本用于1280720的网页改为19201080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍. 首先使用nodejs遍历当前的文件夹: // 遍历所有的文件 var fs = require("fs") var path = require("path") var relativePath = '\\test' // 拿到需要

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

    摘要: 本文要实现的内容,使用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 css

  • 对python读取zip压缩文件里面的csv数据实例详解

    利用zipfile模块和pandas获取数据,代码比较简单,做个记录吧: # -*- coding: utf-8 -*- """ Created on Tue Aug 21 22:35:59 2018 @author: FanXiaoLei """ from zipfile import ZipFile import pandas as pd myzip=ZipFile('2.zip') f=myzip.open('2.csv') df=pd.r

  • python实现向ppt文件里插入新幻灯片页面的方法

    本文实例讲述了python实现向ppt文件里插入新幻灯片页面的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: UTF-8 -*- import win32com.client import win32com.client.dynamic import os #我的示例(Template)文档名为 BugCurve.pptx def PowerPoint(): ppt = os.path.join(os.getcwd(), "BugCurve.pptx") A

  • Java使用application.property读取文件里面的值

    自定义工具类PropertyUtil,并在该类的static静态代码块中读取properties文件内容保存在static属性中以供别的程序使用 package com.hafiz.www.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.io.*; import java.util.Properties; /** * Desc:properties文件获取工具类 * Created by haf

  • webpack 打包压缩js和css的方法示例

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse      

  • ASP.NET MVC中使用Bundle打包压缩js和css的方法

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

  • 教你如何在 Javascript 文件里使用 .Net MVC Razor 语法

    相信大家都试过在一个 View 里嵌套使用 javascript,这时就可以直接使用 Razor 语法以调用 .NET 的一些方法.如以下代码嵌套在一个 Razor 的 View 里: <script> var currDate = '@DateTime.Now'; //直接调用.NET的方法 console.log(currDate) </script> 但另一种情况是,如果我想在一个独立的 JS 文件里使用 Razor,那以上的方法可行不通,因为MVC不会直接解释JS文件,只有

  • PHP实现动态压缩js与css文件的方法

    本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <meta charset="utf-8"/> <title>demo</title> <?php //定义需要压缩的文件 $css = array( CSS_PATH . 'base.css', CSS_PATH . '

  • 分离vue文件中css、js代码的简单技巧

    目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData

随机推荐