資訊專(zhuān)欄INFORMATION COLUMN
摘要：官網(wǎng)按照官網(wǎng)的寫(xiě)法，我出現(xiàn)了和這兩個(gè)哥們同樣的問(wèn)題就是死活激活不了插件，同時(shí)訪(fǎng)問(wèn)配置的還看不到相關(guān)文件。后面發(fā)現(xiàn)這篇文章參考解決了該問(wèn)題當(dāng)然還有推薦換插件的，比如等。小工具項(xiàng)目地址
1、官網(wǎng)：https://github.com/vohof/gulp...
2、按照官網(wǎng)的寫(xiě)法，我出現(xiàn)了和這兩個(gè)哥們同樣的問(wèn)題：
https://stackoverflow.com/que...
https://segmentfault.com/q/10...
就是死活激活不了chrome livereload插件，同時(shí)訪(fǎng)問(wèn)配置的port還看不到相關(guān)文件。
3、后面發(fā)現(xiàn)這篇文章：https://www.bbsmax.com/A/kPzO... 參考解決了該問(wèn)題.
當(dāng)然還有推薦換gulp插件的，比如gulp-connect,browser-sync等。
該gulpfile.js要用于markdown動(dòng)態(tài)生成html文件，支持語(yǔ)法高亮和自動(dòng)生成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("不支持跳級(jí),請(qǐng)按層級(jí)結(jié)構(gòu)定義!!!");
return;
}
if (sub.length == 0 || sub[sub.length - 1].level == level) { //sub為空或者與sub中元素同級(jí)，直接添加。
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當(dāng)作題目，忽略
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 = "index文檔 " +
"" +
"" +
"目錄：
" + fmtToc(tocmodel) + "" +
fileContents +
"";
file.contents = new Buffer(fileContents);
//清空歷史數(shù)據(jù)
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按照l(shuí)ivereload插件，并配置允許訪(fǎng)問(wèn)文件網(wǎng)址(不知道是否有必要，配置了反正沒(méi)壞處)
由于livereload只處理livereloading，它不提供靜態(tài)文件服務(wù)器。。。
所以還需要裝個(gè)http-server：
cnpm install http-server -g
然后按順序執(zhí)行
http-server gulp watch
http-server默認(rèn)端口是8080,所以可以通過(guò)訪(fǎng)問(wèn)localhost:8080找到你要的自動(dòng)刷新的那個(gè)demo文件,比如我的是localhost:8080/dist/index.html。然后點(diǎn)亮chrome中的livereload插件即可。
小工具項(xiàng)目地址：
markdown2html-cli
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84417.html
摘要：前言都到了，所以是時(shí)候玩轉(zhuǎn)一下的新特性了。安裝的包名稱(chēng)由改成了。方法一原因的配置改變了，導(dǎo)致正確的不能用。打開(kāi)終端，切換到根路徑文件里面修改為方法二是默認(rèn)路徑修改了路徑會(huì)出現(xiàn)錯(cuò)誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
摘要：引言用過(guò)原生開(kāi)發(fā)的小程序也知道除了其他功能性的內(nèi)容并不多對(duì)于需要做大型項(xiàng)目來(lái)說(shuō)是比較難入手的，因此朋友推薦的我就入坑鳥(niǎo)。。。開(kāi)發(fā)還是和部分有出入，因此如下記錄，入手的教程就不發(fā)了只發(fā)踩坑。 引言 用過(guò)原生開(kāi)發(fā)的小程序也知道除了api 其他功能性的內(nèi)容并不多對(duì)于需要做大型項(xiàng)目來(lái)說(shuō)是比較難入手的，因此朋友推薦的wepy我就入坑鳥(niǎo)。。。這么一個(gè)跟vue的開(kāi)發(fā)方式類(lèi)似的框架，不過(guò)說(shuō)起來(lái)跟vue...
摘要：前端切圖工具作為一個(gè)前端切圖仔總是避免不了切圖的痛苦強(qiáng)大的不得不說(shuō)這個(gè)工具強(qiáng)大，不僅由版也有，也不收費(fèi)。基本已經(jīng)夠用的，這個(gè)軟件收費(fèi)而且沒(méi)有版本。 前端切圖工具 作為一個(gè)前端切圖仔總是避免不了切圖的痛苦 強(qiáng)大的PxCook PxCook不得不說(shuō)這個(gè)工具強(qiáng)大，不僅由MAC版也有Windows，也不收費(fèi)。具體看官網(wǎng)的安裝和教程就好了，真的強(qiáng)大 分享一下photoshop mac Phot...
摘要：的配置由模塊提供，對(duì)協(xié)議進(jìn)行了支持，用戶(hù)可通過(guò)該配置設(shè)置用戶(hù)名和密碼對(duì)站點(diǎn)進(jìn)行簡(jiǎn)單的訪(fǎng)問(wèn)控制。其中指的是加密算法，支持的有算法。 nginx的basic auth配置由ngx_http_auth_basic_module模塊提供，對(duì)HTTP Basic Authentication協(xié)議進(jìn)行了支持，用戶(hù)可通過(guò)該配置設(shè)置用戶(hù)名和密碼對(duì)web站點(diǎn)進(jìn)行簡(jiǎn)單的訪(fǎng)問(wèn)控制。 basic auth配置...
閱讀 1035·2021-11-23 10:11
閱讀 3875·2021-11-16 11:50
閱讀 941·2021-10-14 09:43
閱讀 2725·2021-10-14 09:42
閱讀 2724·2021-09-22 16:02
閱讀 1071·2019-08-29 10:57
閱讀 3389·2019-08-29 10:57
閱讀 2285·2019-08-26 13:52
