MarkDownToHtml工具开发及gulp-livereload踩坑记

摘要：官网按照官网的写法，我出现了和这两个哥们同样的问题就是死活激活不了插件，同时访问配置的还看不到相关文件。后面发现这篇文章参考解决了该问题当然还有推荐换插件的，比如等。小工具项目地址

1、官网：https://github.com/vohof/gulp...
2、按照官网的写法，我出现了和这两个哥们同样的问题：
https://stackoverflow.com/que...
https://segmentfault.com/q/10...
就是死活激活不了chrome livereload插件，同时访问配置的port还看不到相关文件。
3、后面发现这篇文章：https://www.bbsmax.com/A/kPzO... 参考解决了该问题.
当然还有推荐换gulp插件的，比如gulp-connect,browser-sync等。

该gulpfile.js要用于markdown动态生成html文件，支持语法高亮和自动生成toc

cnpm install gulp-livereload --save-dev

代码:

var gulp = require("gulp");
var markdown = require("gulp-markdown");
var livereload = require("gulp-livereload");
var renderer = new markdown.marked.Renderer();
var map = require("map-stream");
var hljs = require("./highlight.min.js");

var tocmodel = [];
var toplevel = null;

function pushLevel(model, level, escapedText) {
    if (model[model.length - 1].level == level) {
        model.push({ level: level, name: escapedText, sub: [] });
    } else {
        var parentLevel = model[model.length - 1].level;
        var sub = model[model.length - 1].sub;
        if (parentLevel + 1 < level && sub.length == 0) {
            console.log("不支持跳级,请按层级结构定义!!!");
            return;
        }
        if (sub.length == 0 || sub[sub.length - 1].level == level) { //sub为空或者与sub中元素同级，直接添加。
            sub.push({ level: level, name: escapedText, sub: [] });
        } else {
            pushLevel(sub, level, escapedText);
        }
    }
}

function fmtToc(model) {
    var tmp = "
"
    if (model.length > 0) {
        model.forEach(function(e, i) {
            var tt = "
" + e.name + "";
            if (e.sub.length > 0) {
                tt = tt + fmtToc(e.sub) + "
";
            } else {
                tt = tt + "";
            }
            tmp = tmp + tt;
        });
    }
    return tmp + "
";
}
renderer.heading = function(text, level) {
    var escapedText = text.toLowerCase().replace(/[^a-zA-Zu4e00-u9fa5]+/g, "-");
    if (level > 1) {
        //level==1当作题目，忽略
        if (!toplevel || tocmodel.length == 0) {
            toplevel = level
            tocmodel.push({ level: level, name: escapedText, sub: [] });
        } else {
            pushLevel(tocmodel, level, escapedText);
        }
    }
    return "" +
        text + "";
}

var options = {
    highlight: function(code) {
        return hljs.highlightAuto(code).value;
    },
    renderer: renderer
}


gulp.task("tohtml", function() {
    return gulp.src("index.md")
        .pipe(markdown(options))
        .pipe(map(function(file, cb) {
            var fileContents = file.contents.toString();
            fileContents = "" +
                "" +
                "" +
                "
目录：
" + fmtToc(tocmodel) + "
" +
                fileContents +
                "
";
            file.contents = new Buffer(fileContents);
            //清空历史数据
            tocmodel = [];
            toplevel = null;

            cb(null, file);
        }))
        .pipe(gulp.dest("dist"))
        .pipe(livereload());
});

gulp.task("watch", ["tohtml"], function() {
    gulp.watch("./*.md", ["tohtml"]);

    livereload.listen();
    /*   gulp.watch(["dist/**"], function() {
          livereload();
      }); */
});

然后chrome按照livereload插件，并配置允许访问文件网址(不知道是否有必要，配置了反正没坏处)

由于livereload只处理livereloading，它不提供静态文件服务器。。。
所以还需要装个http-server：

cnpm install http-server -g

然后按顺序执行

http-server
gulp watch

http-server默认端口是8080,所以可以通过访问localhost:8080找到你要的自动刷新的那个demo文件,比如我的是localhost:8080/dist/index.html。然后点亮chrome中的livereload插件即可。

小工具项目地址：
markdown2html-cli