前言：
目前大家对“html自动刷新”可能比较讲究，同学们都需要剖析一些“html自动刷新”的相关资讯。那么小编也在网络上汇集了一些关于“html自动刷新””的相关文章，希望我们能喜欢，同学们一起来了解一下吧！1.创建目录 mdTohtml，并进入
终端输入：mkdir mdTohtml && cd mdTohtml
2.初始化项目,并修改为 ES 模块
终端输入：yarn init -ypackage.json 添加属性 type:"module"
3. 安装依赖
终端输入：yarn add marked browser-sync
4. 创建 app.js 文件
终端输入：echo > app.js
5. app.js 文件内容，导入模块
import fs from 'fs'import url from 'url'import path from 'path'import { marked } from 'marked'import browserSync from 'browser-sync'6. app.js 文件内容，获取 md 文件路径、获取 css 初始化文件路径、生成的 html 文件路径
const mdPath = path.resolve('index.md')const cssPath = path.resolve("init.css")const htmlPath = mdPath.replace(path.extname(mdPath),'.html')7. app.js 文件内容，读取 md 文件内容、读取 css 文件内容、生成 html 文件
const createHtml = async ()=>{ const temp = ` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 更多样式主题可以在 网址查找 --> <link href="; rel="stylesheet"> <script src=";></script> <script>hljs.initHighlightingOnLoad();</script> <style>{{style}}</style> </head> <body> {{content}} </body> </html> ` const mdStr = await fs.promises.readFile(mdPath,'utf-8') const htmlStr = marked.parse(mdStr) const cssStr = await fs.promises.readFile(cssPath,'utf-8') const finalHtmlStr = temp.replace("{{style}}",cssStr).replace("{{content}}",htmlStr) fs.promises.writeFile(htmlPath,finalHtmlStr)}// 生成 html页面createHtml()8. app.js 文件内容，监听 md 文件改变后，重新生成 html 文件
fs.watchFile(mdPath,(cur,pre)=>{ cur.mtime !== pre.mtime && createHtml()})9. app.js 文件内容，监听 html 文件是否变化，变化了就刷新一打开的对应页面
browserSync.init({ browser: "", server: process.cwd(), watch: true, index: path.basename(htmlPath)})10. 启动项目
终端执行：node app.js
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html自动刷新
