node.js实现markdowm转换成HTML

使用到的第三方包介绍

• marked包 https://www.npmjs.com/package/marked
  功能是将markdown文本内容转换成HTML代码
  例如：

var marked = require('marked');
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>

• browser-sync包 http://www.browsersync.cn/
  功能是将根目录自动启动服务器，监听服务器中指定文件，当文件内容发生改变时，自动刷新浏览器；
  例如：

// 引用 browser-Sync 模块
var browserSync = require("browser-sync");

// 将./app这个目录启动为服务器
browserSync({server: "./app"});

// 调用reload方法，刷新./app下文件core.css,注意传入的是文件名，不是路径
browserSync.reload("core.css");

当在命令行运行入口js文件时，自动启动服务器，监听3000端口

使用到的重要内置核心API

• fs.watchFile(path, (curr, prev) => {
  // curr和prev都是path文件的stats
  根据判断文件这两种状态的最近一次修改时间curr.mtime和prev.mtime是否相等，判断文件是否发生改变
  }) http://nodejs.cn/api/fs.html#fs_fs_watchfile_filename_options_listener

实现思路：

1. 监听markdown文件是否发生变化
2. 如果发生变化，读取md文件，并调用marked函数，将内容转换成HTMLconent
3. 设计HTML模版，模版预留{{{style}}}和{{{content}}}
4. 并将CSS文件读取写入模版，替换{{{style}}}
5. 将HTMLconent替换{{{content}}}
6. 启动browser-Sync服务器，进行浏览器自动刷新

具体代码

//Mrakdown文件自动转换
const fs = require('fs');
const path = require('path');
const util = require('util');
const marked = require('marked');
const browserSync = require("browser-sync");


var template = `<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>MD转HTML</title>
    <style>{{{style}}}</style>
</head>
<body>
  <div class="vs">
    {{{content}}}
  </div>
</body>
</html>`;
//接受需要转换的文件路径
const target = path.join(__dirname, process.argv[2] || '../README.md');

// 启动浏览器自动刷新服务器
browserSync({server: path.dirname(target)});

//监视文件变化
fs.watchFile(target, (curr, prev) => {
    console.log(`current file's stats: ${curr.size},previous file's stats: ${prev.size}, `);
    // 判断文件到底有没有变化
    if (curr.mtime === prev.mtime) {
        return false;
    }
    // 读取md文件转换成HTML
    fs.readFile(target, 'utf8',(error, content) => {
        if (error){
            throw error;
        }
        var html = marked(content);
        fs.readFile(path.join(__dirname, './github.css'), (error, css) => {
            html = template.replace('{{{content}}}', html).replace('{{{style}}}', css);
            // 将拼接好的HMTL文件保存在当前md文件目录里
            var filename = target.replace('.md', '.html');
            fs.writeFile(filename, html, 'utf8', () => {
                console.log('completed');
                browserSync.reload(path.basename(filename));
            });
        })

    });
});