从html中分离css,js,html 文件到相应的文件中，并且进行格式化输出。
例：分离page/index.html,则调用transformhtml('page/index');
结果生成
page/index/index.js,
page/index/index.css,
page/index/index.html,
page/index.html
需要安装的包：npm i -D prettier cheerio write
const cheerio = require('cheerio')
let fs = require('fs');
const write = require('write');
const prettier = require("prettier");
let transformhtml = function(page){
let temp = fs.readFileSync(page+".html",'utf-8');
const $ = cheerio.load(temp,{
// 防止element中的字符串被编码
decodeEntities:false
})
let jstext="", csstext="";
$("[src]").each(function(){
let src = $(this).attr('src');
let srcregexp = /^(?!http)[.\w]/;
if(srcregexp.test(src)){
$(this).attr('src','../'+src);
}
})
$("[href]").each(function(){
let src = $(this).attr('href');
let srcregexp = /^(?!http|javascript)[.\w]/;
if(srcregexp.test(src)){
$(this).attr('href','../'+src);
}
})
$('head').append('<link rel="stylesheet" href="./index.css" media="all" />')
$("style").each(function () {
csstext += $(this).html() + "\r\n";
$(this).remove();
})
$("script").each(function () {
if (!$(this).attr("src")) {
if ($(this).attr("type") == undefined || $(this).attr("type") == "text/javascript") {
jstext += $(this).html() + "\r\n";
$(this).attr({type:"text/javascript","src":"./index.js"});
$(this).text("");
}
}
})
jstext = prettier.format(jstext,{parser:"babel"})
csstext = prettier.format(csstext,{parser:"css"})
let htmltext = prettier.format($.html(),{parser:"html",printWidth:120})
let dirs = page.split(/[/]/);
let pagename = (dirs[dirs.length - 1] ? dirs[dirs.length - 1] : dirs[dirs.length - 2]);
write.sync(page+"/index.css",csstext);
write.sync(page+"/index.html",htmltext);
write.sync(page+"/index.js",jstext);
let html = "<!DOCTYPE html><html><script>window.location='./" + pagename + "/index.html'</script></html>"
write.sync(page + ".html", html);
}
2417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
