node 监听md文件变化并转换成html

最新推荐文章于 2024-08-11 22:37:18 发布

L_YNAN

最新推荐文章于 2024-08-11 22:37:18 发布

阅读量1.3k

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/L_YNAN/article/details/78739324

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

监听md文件是否变化，变化了就读取md文件，并使用库转换成HTML；

监听： fs.watchFile（filename, (cur ,pre) =< {}）
读取： fs.readFile;
监听是否变化： cur.mtime / pre.mtime; //cur 和 pre 都是fs.Stats的实例；都有stats属性；
转换：使用marked库，安装 install marked –save
转换成功，拼合html代码
写入html文件；
添加样式；

自动刷新

const fs = require("fs");
const path = require("path");
const marked = require("marked");

const filepath= path.join(__dirname, process.argv[2]);

const template = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
    <div>{{{content}}}</div>
</body>
</html>`

fs.watchFile(filePath, (cur, pre) => {//options: 监听失效等
    if(cur.mtime !== pre.mtime) {

        //读取文件并转换写入
        fs.readFile(filePath, "utf8", (err,data) => {
            if（err） {console.log(err);return;}
            let html =  marked(data);

            //因为md文件转换成HTML 没有body等标签，需替换添加
            template = html.replace("{{{content}}}", html)；

            //写入html
            fs.writeFile(path.join(__dirname, "watch.html"), template, "utf8");
        })
    }
})

还可以下载md样式表文件，替换添加到页面中；最好使用style标签的方式添加，而不是使用link，因为link方式文件路径动态变化会出错；

自动刷新

使用broswer-sync库

1.  install browser-sync --save
2.  watch.js中开始处创建browser 服务
    var browserSync = require("browser-sync");
    browserSync({server: __dirname});

3.写入文件完成后执行browser  relaod命令；

完成后修改md文件，浏览器自动打开localhost页面；输入html文件名称；就可以动态监听修改