基于node的html格式化工具

概述

在进行前端开发时，为了开发的方便，我们常把css和js放在同一个html内，而没有单独将css和js分离开，那么我们在完成一个页面后就可以执行这个文件，它将会自动创建"文件名.js"和"文件名.css"来存放这个html中的css和js，并引用这两个文件，非常方便快捷。

使用方法

1.安装node（如果以前安装过就跳过这一步）

    node安装地址点击这个地址然后安装左边那个版本的node就ok了。

2.新建js文件

    在你要格式化的html的目录下新建一个js文件，将下面的代码复制进去，然后将代码里的fileName更改为你要修改的html名字，默认为index。

3.运行这个js文件

    在该文件目录下打开cmd，输入node format.js（假设你创建的这个js文件命名为format）

    然后就js和css就成功分离了。

代码展示

const fs = require('fs')
const path = require('path')

// please enter the file name which you want to change
const fileName = 'index'

const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

const js = '<script src="'+fileName+'.js"></script>'
const css = '<link rel="stylesheet" href="'+fileName+'.css">'

fs.readFile(path.join(__dirname,fileName+'.html'),'utf8',function(err,data){
    resolveCSS(data)
    resolveJS(data)
    resolveHTML(data)
})

function resolveCSS(data){
    let CSS = regStyle.exec(data)[0].replace('<style>','').replace('</style>','')
    fs.writeFile(path.join(__dirname,fileName + '.css'),CSS,function(err){
        if(err){
            console.log('resolveCSS error');
        }
    })
}

function resolveJS(data){
    let JS = regScript.exec(data)[0].replace('<script>','').replace('</script>','')
    fs.writeFile(path.join(__dirname,fileName + '.js'),JS,function(err){
        if(err){
            console.log('resolveJS error');
        }
    })
}

function resolveHTML(data){
    fs.writeFile(path.join(__dirname,fileName + '.html'),data.replace(regScript.exec(data)[0],js).replace(regStyle.exec(data)[0],css),function(err){
        if(err){
            console.log('resolveHTML error');
        }
    })
}