MarkDownToHtml工具開發及gulp-livereload踩坑記

時間 2020-02-17

標籤 markdowntohtml 工具開發 gulp livereload 欄目 JavaScript 简体版

原文原文鏈接

一、官網：https://github.com/vohof/gulp...
二、按照官網的寫法，我出現了和這兩個哥們一樣的問題：
https://stackoverflow.com/que...
https://segmentfault.com/q/10...
就是死活激活不了chrome livereload插件，同時訪問配置的port還看不到相關文件。
三、後面發現這篇文章：https://www.bbsmax.com/A/kPzO... 參考解決了該問題.
固然還有推薦換gulp插件的，好比gulp-connect,browser-sync等。 css

該gulpfile.js要用於markdown動態生成html文件，支持語法高亮和自動生成tochtml

cnpm install gulp-livereload --save-dev

代碼:jquery

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 = '<ol class="order">'
    if (model.length > 0) {
        model.forEach(function(e, i) {
            var tt = '<li class="order"><a href="#' + e.name + '" >' + e.name + '</a>';
            if (e.sub.length > 0) {
                tt = tt + fmtToc(e.sub) + '</li>';
            } else {
                tt = tt + '</li>';
            }
            tmp = tmp + tt;
        });
    }
    return tmp + '</ol>';
}
renderer.heading = function(text, level) {
    var escapedText = text.toLowerCase().replace(/[^a-zA-Z\u4e00-\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 '<h' + level + '><a name="' +
        escapedText +
        '" class="anchor" href="#' +
        escapedText +
        '"><span class="header-link"></span></a>' +
        text + '</h' + level + '>';
}

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 = '<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>index文檔</title>' +
                '<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs.min.css"><script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
                '<style>.code{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;} .post{ margin: 0 auto;padding-top: 20px;padding-bottom: 60px;width: 960px;}' +
                ' ol.order{ counter-reset: item } li.order{ display: block } li.order:before { content: counters(item, ".") " "; counter-increment: item } ' +
                ' .toc{position:fixed;width:400px;left:20px;top:20px;bottom:20px;height 600px;overflow-y:scroll;}' +
                '</style>' +
                '</head><body><div class="toc"><h3>目錄：</h3>' + fmtToc(tocmodel) + '</div><div class="post">' +
                fileContents +
                '</div><script>hljs.initHighlightingOnLoad();$("p > code").addClass("code");' +
                '</script></body></html>';
            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插件，並配置容許訪問文件網址(不知道是否有必要，配置了反正沒壞處) git

因爲livereload只處理livereloading，它不提供靜態文件服務器。。。
因此還須要裝個http-server：github