cyb-cli-s
Version:
塞伯坦（Cybertron）- CYB 是面向前端模块化工程的构建工具。主要目的是帮助开发者统一前端开发模式和项目开发结构，提高功能扩展和降低维护成本，自动化前端工作流，提高开发效率和开发质量。
234 lines (214 loc) • 7.27 kB
JavaScript
/**
* =================================
* @2018 塞伯坦-CYB前端模块化工程构建工具
* https://github.com/jd-cyb/cyb-cli
* =================================
*/
const fs = require("fs");
const path = require("path");
const localIp = require("fez-local-ip");
const common = require("./common");
const config = require("../fezconfig");
module.exports = (applyDir = config.paths.dev.html) => {
return new Promise((resolve, reject) => {
let htmlPages = []; //所有html页面
/**
* 遍历目录所有文件
* http://nodejs.cn/api/fs.html#fs_fs_readdirsync_path_options
*/
const dirAllFiles = dir => {
const collector = {
name: dir,
type: "dir",
url: "",
child: []
};
const files = fs.readdirSync(dir); //
files.forEach(file => {
const absolutePath = dir + "/" + file; //文件绝对地址
/**
* 返回一个stats 实例
* http://nodejs.cn/api/fs.html#fs_class_fs_stats
*/
const stats = fs.statSync(absolutePath);
const url = path.relative(applyDir, absolutePath);
if (
stats.isDirectory() &&
(stats.isDirectory() !== "." || stats.isDirectory() !== "..")
) {
//如果是目录 继续遍历
collector["child"].push(dirAllFiles(absolutePath));
} else {
collector["child"].push({
name: path.basename(absolutePath),
type: "file",
url: url
});
}
});
return collector;
};
/**
* 遍历出所有的html文件
*/
const showdir = (collector, level) => {
const file = collector["name"];
const basename = path.basename(file);
if (collector["type"] == "dir") {
collector["child"].forEach(item => {
showdir(item, level + 1);
});
}
if (collector["type"] == "file") {
if (path.extname(file) === ".html" && basename !== "zindex.html") {
let pageItem = {};
pageItem.name = collector["name"];
pageItem.url = collector["url"];
htmlPages.push(pageItem);
}
}
};
const ip = localIp.getLocalIP4();
const collector = dirAllFiles(applyDir);
showdir(collector, 0);
const zindexHtml = `
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="format-detection" content="telephone=no">
<title>${config.projectName} 页面列表</title>
<link rel="stylesheet" href="./zindex/css/bootstrap.min.css">
<style>
a{
color: #333;
}
.marketing {
text-align: center;
}
.qrcode-img{
margin: 20px 0;
}
.qrcode-img canvas,
.qrcode-img img,
.qr-img canvas,
.qr-img img {
margin: 0 auto;
}
.modal-backdrop {
filter: alpha(opacity=100);
opacity: 1;
}
.jumbotron {
background-color: #002a32;
color: #fff;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>${config.projectName}</h1>
<p>
点击按钮链接打开项目页面，也可以扫描二维码在移动端同步开发和调试页面。
</p>
<p>
<a class="btn btn-primary" href="http://cyb.hestudy.com" target="_blank" role="button">官方网站</a>
<a class="btn btn-warning" href="http://cyb.hestudy.com/docs/" target="_blank" role="button">Wiki文档</a>
</p>
</div>
</div>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row" id="js-qrcode">
</div>
<!-- /.row -->
<!-- FOOTER -->
<hr>
<footer>
<p>© 2018 <a href="https://github.com/jd-cyb/cyb-cli" target="_blank">塞伯坦前端模块化工程构建工具</a> - <a href="https://github.com/jd-cyb/" target="_blank">塞伯坦前端架构组</a></p>
</footer>
</div>
<div id="qrModal" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"></h4>
</div>
<div class="modal-body">
<div class="qr-img"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script id="qrcode-template" type="text/x-handlebars-template">
{{#each this}}
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="qrcode-img" data-href="{{url}}"></div>
<p><a class="btn btn-primary" href="{{url}}" target="_blank">{{url}}</a></p>
</div>
{{/each}}
</script>
<script src="./zindex/js/jquery-2.1.3.min.js"></script>
<script src="./zindex/js/bootstrap.min.js"></script>
<script src="./zindex/js/qrcode.min.js"></script>
<script src="./zindex/js/handlebars-v4.0.5.min.js"></script>
<script>
(function() {
var sourceJson = ${JSON.stringify(htmlPages)};
var sourceTemp = $("#qrcode-template").html();
var compileTemplate = Handlebars.compile(sourceTemp);
var qrcodeHtml = compileTemplate(sourceJson);
$("#js-qrcode").html(qrcodeHtml);
$(".qrcode-img").each(function() {
new QRCode($(this)[0], {
text: window.location.protocol + "//${ip}" + (window.location.port ? ':' + window.location.port : '') + "/" + $(this).data("href"),
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}).click(function(){
$('#qrModal').modal();
$('#qrModal .modal-title').html($(this).data("href"));
new QRCode($('#qrModal .qr-img')[0], {
text: window.location.protocol + "//${ip}" + (window.location.port ? ':' + window.location.port : '') + "/" + $(this).data("href"),
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
$('#qrModal').on('hidden.bs.modal', function (e) {
$('#qrModal .qr-img').html("");
});
});
})();
</script>
</html>
`;
const out = fs.createWriteStream(applyDir + "/zindex.html", {
encoding: "utf8"
});
out.write(zindexHtml, err => {
if (err) console.log(err);
});
out.end();
// 复制目录
common.exists(
path.join(__dirname, "./zindex"),
applyDir + "/zindex",
common.copy
);
resolve();
});
};