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

cnpm install http-server -g

而后按顺序执行chrome

http-server
gulp watch

http-server默认端口是8080,因此能够经过访问localhost:8080找到你要的自动刷新的那个demo文件,好比个人是localhost:8080/dist/index.html。而后点亮chrome中的livereload插件便可。npm

小工具项目地址：
markdown2html-cligulp