摘要：官網按照官網的寫法，我出現了和這兩個哥們同樣的問題就是死活激活不了插件，同時訪問配置的還看不到相關文件。后面發現這篇文章參考解決了該問題當然還有推薦換插件的，比如等。小工具項目地址

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