Node.js小案例-拆分html

拆分案例

需求：将完整的html中脚本，样式，html拆分为三个部分的文件

1. 创建正则表达式-代表style和script标签

//引入文件处理模块+路径处理模块
const Fs = require('fs');
const Ps = require('path');

//正则匹配脚本和样式标签；\s匹配空白字符，\S匹配非空白字符, *匹配前面规则的任意次数
const rScript = /<script>[\s\S]*<\/script>/;
const rStyle = /<style>[\s\S]*<\/style>/;

2. fs文件模块读取html文件内容

Fs.readFile(Ps.join(__dirname, './clock/index.html'), 'utf8', (err, data) => {
    if (err) return console.log('Fail:', err);
    configSeparate(data)
})

3. 自定义resolveCSS方法，写入index.css样式文件

function resolveCSS(res) {
    // var sStyle = res.match(rStyle);  此处两个方法等价
    const sStyle = rStyle.exec(res);
    const sReplacesStyle = sStyle[0].replaceAll(/(^<style>|<\/style>$)*/g, '');
    Fs.writeFile(Ps.join(__dirname, './clock/index.css'), sReplacesStyle, (err) => {
        if (err) return console.log('Fail-css:', err);
        console.log('Success-css');
    })
}

4. 自定义resolveJS方法，写入index.js脚本文件

function resolveJS(res) {
    const sScript = res.match(rScript);
    const sReplaceScript = sScript[0].replaceAll(/(^<script>|<\/script>$)*/g, '');
    Fs.writeFile(Ps.join(__dirname, './clock/index.js'), sReplaceScript, (err) => {
        if (err) return console.log('Fail-js:', err);
        console.log('Success-js');
    })
}

5. 自定义resolvehtml方法，写入index.html文件

function resolveHTML(res, obj) {
    const { css: sCss = '', js: sJs = ''}  = obj;
    const sHead = rInsertHead.exec(res);
    const sBody = rInsertBody.exec(res);
    const sReplaceHead = sHead[0].concat('\r  <link rel="stylesheet" href="./index.css"></link>');
    const sReplaceInsert = sBody[0].replace(/\s/, '\r  <script src="./index.js"></script>');
    const sHTML = res.replaceAll(sCss, '').replaceAll(sJs, '').replace(sHead[0], sReplaceHead).replace(sBody[0],sReplaceInsert);

    Fs.writeFile(Ps.join(__dirname, './clock/index.html'), sHTML, (err) => {
        if (err) return console.log('Fail-html:', err);
        console.log('Success-html');
    })
}

注意点：

writeFile只能写入文件，不能创建目录
writeFile多次调用，后写入内容会覆盖先写入内容