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 = '<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插件，并设置许可接见文件网址(不知道是不是有必要，设置了反正没害处)
因为livereload只处置惩罚livereloading，它不供应静态文件服务器。。。
所以还需要装个http-server：
cnpm install http-server -g然后按递次实行
http-server
gulp watchhttp-server默许端口是8080,所以能够经由过程接见localhost:8080找到你要的自动革新的谁人demo文件,比方我的是localhost:8080/dist/index.html。然后点亮chrome中的livereload插件即可。
小工具项目地点：
markdown2html-cli
