node.js案例:分离html, css, js文件案例

案例要实现的功能

将给出的html素材中对应的<style>样式,<script>脚本抽离出来分别放在不同的文件中

 

案例的实现步骤

1. 创建两个正则表达式,分别用来匹配<style>和<scrip>标签
2. 使用fs模块,读取需要被处理的HTML文件
3. 自定义resolveCSS方法,来写入index.css样式文件
4. 自定义resolveJS方法,来写入index.js脚本文件
5. 自定义resolveHTML方法,来写入index.html文件

 

步骤1-导入需要的模块并创建正则表达式

//导入fs模块 读写文件
const fs = require('fs')

//导入path模块 处理路径
const path = require(path)

//定义正则表达式 分别匹配<style></style>和<script></script>标签
// '\s'表示匹配任意空白字符 '\S'表示匹配任意非空白字符 '*'表示前面的字符匹配任意多次
// 当中结束标签</style>需要进行转义: <\/style>
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

步骤2-使用fs模块读取需要被处理的html文件

//读取需要被处理的HTML文件
fs.readFile(path.join(__dirname, '/index.html'), 'utf8', function(err, dataStr) {
    if (err) {
        //读取文件失败操作
        return console.log('文件读取失败!' + err.message);
    }
    //读取文件成功后 调用对应的三个方法 分别拆解出css js html文件
    console.log('读取文件成功!');
})

步骤3-自定义resolveCSS方法

//定义处理css样式的resolveCss方法
function resolveCSS(htmlStr) {
    //使用正则提取页面中的<script></script>标签中的内容
    //exec()方法用于检索字符串中正则表达式的匹配
    const r1 = regStyle.exec(htmlStr);
    //将提取出来的样式字符串进行字符串的 replace 替换操作
    //r1数组中只有一个元素 所以ri[0]能直接拿出提取到的css字符串
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
    fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
        if (err) {
            return console.log('写入CSS文件失败!' + err.message);
        }
        console.log('写入CSS文件成功!');
    })
}

步骤4-自定义resolveJS方法

//定义处理js脚本的resolveJS方法
function resolveJS(htmlStr) {
    //使用正则提取页面中的<script></script>标签中的内容
    //exec()方法用于检索字符串中正则表达式的匹配
    const r2 = regScript.exec(htmlStr);
    //将提取出来的样式字符串进行字符串的 replace 替换操作
    //r1数组中只有一个元素 所以ri[0]能直接拿出提取到的css字符串
    const newJS = r2[0].replace('<script>', '').replace('</script>', '');
    fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
        if (err) {
            return console.log('写入JS文件失败!' + err.message);
        }
        console.log('写入JS文件成功!');
    })
}

步骤5-自定义resolveHTML方法

//定义处理html文件的resolveHTML方法
function resolveHTML(htmlStr) {
    //将字符串调用 replace 方法 把内嵌的 style 和 script 标签替换为外联的 link 和 script 标签
    const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
        //写入index.html这个文件
    fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
        if (err) {
            return console.log('写入文件失败!' + err.message);
        }
        console.log('写入HTML页面成功!');
    })
}

 

完整代码

//导入fs模块 读写文件
const fs = require('fs')

//导入path模块 处理路径
const path = require('path')

//定义正则表达式 分别匹配<style></style>和<script></script>标签
// '\s'表示匹配任意空白字符 '\S'表示匹配任意非空白字符 '*'表示前面的字符匹配任意多次
// 当中结束标签</style>需要进行转义: <\/style>
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

//定义处理css样式的resolveCss方法
function resolveCSS(htmlStr) {
    //使用正则提取页面中的<style></style>标签中的内容
    //exec()方法用于检索字符串中正则表达式的匹配
    const r1 = regStyle.exec(htmlStr);
    //将提取出来的样式字符串进行字符串的 replace 替换操作
    //r1数组中只有一个元素 所以ri[0]能直接拿出提取到的css字符串
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
    fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
        if (err) {
            return console.log('写入CSS文件失败!' + err.message);
        }
        console.log('写入CSS文件成功!');
    })
}

//定义处理js脚本的resolveJS方法
function resolveJS(htmlStr) {
    //使用正则提取页面中的<script></script>标签中的内容
    //exec()方法用于检索字符串中正则表达式的匹配
    const r2 = regScript.exec(htmlStr);
    //将提取出来的样式字符串进行字符串的 replace 替换操作
    //r2数组中只有一个元素 所以r2[0]能直接拿出提取到的js字符串
    const newJS = r2[0].replace('<script>', '').replace('</script>', '');
    fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
        if (err) {
            return console.log('写入JS文件失败!' + err.message);
        }
        console.log('写入JS文件成功!');
    })
}

//定义处理html文件的resolveHTML方法
function resolveHTML(htmlStr) {
    //将字符串调用 replace 方法 把内嵌的 style 和 script 标签替换为外联的 link 和 script 标签
    const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
        //写入index.html这个文件
    fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
        if (err) {
            return console.log('写入文件失败!' + err.message);
        }
        console.log('写入HTML页面成功!');
    })
}

//读取需要被处理的HTML文件
fs.readFile(path.join(__dirname, '/index.html'), 'utf8', function(err, dataStr) {
    if (err) {
        //读取文件失败操作
        return console.log('文件读取失败!' + err.message);
    }
    //读取文件成功后 调用对应的三个方法 分别拆解出css js html文件
    console.log('读取文件成功!');
    resolveCSS(dataStr);
    resolveJS(dataStr);
    resolveHTML(dataStr);
})

 

案例的两个注意点

1. fs.writeFile()方法只能创建文件,不能创建路径
2. 重复调用fs.writeFile()写入同一个文件,新写入的内容会覆盖之前的旧内容