Skip to content

Commit 92c2bbb

Browse files
zhurczhurc
committed
优化自定义打包
1 parent ae3346b commit 92c2bbb

File tree

4 files changed

+109
-90
lines changed

4 files changed

+109
-90
lines changed

‎build/build.html‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,15 @@
4949
font-weight: normal;
5050
}
5151

52-
.deplistContent >div.contents{
53-
min-height:160px;
52+
.deplistContent > div.contents {
53+
min-height: 160px;
5454
}
5555

5656
.deplist {
5757
list-style: none;
58-
min-height: 120px;
58+
min-height: 40px;
5959
padding: 20px;
60+
padding-top: 0;
6061
}
6162

6263
.deplist li {
@@ -87,6 +88,8 @@
8788

8889
.deplist li input[type=checkbox]:checked + label {
8990
background: #44b549;
91+
margin-top: -2px;
92+
padding-bottom: 2px;
9093
}
9194

9295
.deplist li input[type=checkbox]:checked + label:after {
@@ -125,6 +128,7 @@
125128

126129
h3 {
127130
color: #aaaaaa;
131+
clear: both;
128132
font-size: 16px;
129133
margin-left: 30px;
130134
}
@@ -176,14 +180,8 @@ <h1>自定义打包</h1>
176180
<div style="height: 30px;line-height: 35px;">客户端
177181
</div>
178182
</div>
179-
<ul id="client" class="nav nav-tabs clientTabs" style="display: inline-block">
180-
<li role="presentation" class="active"><a href="#openlayersselect">OpenLayers</a></li>
181-
<li role="presentation"><a href="#leafletselect">Leaflet</a></li>
182-
</ul>
183-
<div class="tab-content">
184-
<div role="tabpanel" class="tab-pane deplistContent active" id="openlayersselect"></div>
185-
<div role="tabpanel" class="tab-pane deplistContent" id="leafletselect"></div>
186-
</div>
183+
<ul id="client" class="nav nav-tabs clientTabs" style="display: inline-block"></ul>
184+
<div class="tab-content"></div>
187185

188186
</section>
189187
<section class="sec commandSection">

‎build/build.js‎

Lines changed: 89 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,101 @@
11
var commonModules = deps.common;
2-
var leafletModules = deps.leaflet;
3-
var openlayersModules = deps.openlayers;
2+
var clientsTabs = {
3+
"OpenLayers": "openlayers",
4+
"Leaflet": "leaflet",
5+
"MapboxGL": "mapboxgl",
6+
};
7+
//设当前客户端名称，其值为clientsTabs的key值之一
8+
var currentClientTab = "OpenLayers";
49

510
function init() {
6-
document.getElementById('select-all').onclick = function () {
7-
select(true);
8-
};
9-
document.getElementById('deselect-all').onclick = function () {
10-
select(false);
11-
};
12-
function select(selectAll) {
13-
var lists = $('.deplistContent.active ul');
14-
for (var i = 0; i < lists.length; i++) {
15-
var checks = lists[i].getElementsByTagName('input');
16-
for (var j = 0; j < checks.length; j++) {
17-
if (checks[j].id === 'common') {
18-
continue;
19-
}
20-
checks[j].checked = selectAll;
21-
}
22-
var lis = lists[i].getElementsByTagName('li');
23-
for (var n = 0; n < checks.length; n++) {
24-
if (checks[n].id === 'common') {
25-
continue;
26-
}
27-
lis[n].className = (selectAll) ? 'active' : '';
11+
initClientTabs();
12+
addModule('common', deplist, true);
13+
14+
$('#deplist li')[0].className = 'active';
15+
16+
for (var key in clientsTabs) {
17+
initModules(clientsTabs[key], deps[clientsTabs[key]]);
18+
}
19+
20+
updateCommand();
21+
bindEvents();
22+
}
23+
function initClientTabs() {
24+
var $clientTabList = $("ul#client");
25+
var $clientTabContents = $('div.tab-content');
26+
for (var clientName in clientsTabs) {
27+
var target = clientsTabs[clientName];
28+
var $tab = $("<li role='presentation'><a href='#" + target + "select'>" + clientName + "</a></li>").appendTo($clientTabList);
29+
var $tabContent = $("<div role='tabpanel' class='tab-pane deplistContent' id='" + target + "select'></div>").appendTo($clientTabContents);
30+
if (clientName === currentClientTab) {
31+
$tab.addClass("active");
32+
$tabContent.addClass("active");
33+
}
34+
}
35+
}
36+
37+
function bindEvents() {
38+
$('.clientTabs li a').click(function (e) {
39+
e.preventDefault();
40+
currentClientTab = this.innerHTML;
41+
for (var name in clientsTabs) {
42+
if (name === currentClientTab) {
43+
continue;
2844
}
45+
cancelChecked(clientsTabs[name])
2946
}
3047
updateCommand();
31-
return false;
32-
}
48+
$(this).tab('show');
49+
});
50+
$('#select-all').on('click', function () {
51+
select(true);
52+
});
53+
$('#deselect-all').on('click', function () {
54+
select(false);
55+
});
56+
}
3357

34-
addModule('common', deplist, true);
35-
$('#deplist li')[0].className = 'active';
36-
for (var openlayersModule in openlayersModules) {
37-
var title = openlayersModules[openlayersModule].title;
38-
addGroup('openlayers', openlayersModule, title, openlayersModules[openlayersModule].description, $('#openlayersselect')[0]);
39-
for (var module in openlayersModules[openlayersModule]) {
40-
if (module === 'title' || module === 'description') {
58+
function select(selectAll) {
59+
var lists = $('.deplistContent.active ul');
60+
for (var i = 0; i < lists.length; i++) {
61+
var checks = lists[i].getElementsByTagName('input');
62+
for (var j = 0; j < checks.length; j++) {
63+
if (checks[j].id === 'common') {
4164
continue;
4265
}
43-
addModule(module, $('#openlayers_' + openlayersModule)[0], false, openlayersModules[openlayersModule][module].name);
66+
checks[j].checked = selectAll;
4467
}
45-
$('#openlayers_' + openlayersModule).append($("<div style='clear:both;'></div>"));
46-
}
47-
for (var leafletModule in leafletModules) {
48-
var title = leafletModules[leafletModule].title;
49-
addGroup('leaflet', leafletModule, title, leafletModules[leafletModule].description, $('#leafletselect')[0]);
50-
for (var module in leafletModules[leafletModule]) {
51-
if (module === 'title' || module === 'description') {
68+
var lis = lists[i].getElementsByTagName('li');
69+
for (var n = 0; n < checks.length; n++) {
70+
if (checks[n].id === 'common') {
5271
continue;
5372
}
54-
addModule(module, $('#leaflet_' + leafletModule)[0], false, leafletModules[leafletModule][module].name);
73+
lis[n].className = (selectAll) ? 'active' : '';
5574
}
56-
$('#leaflet_' + leafletModule).append($("<div style='clear:both;'></div>"));
5775
}
5876
updateCommand();
77+
return false;
78+
}
5979

60-
$('.clientTabs li a').click(function (e) {
61-
e.preventDefault();
62-
if (this.innerHTML === 'Leaflet') {
63-
cancelChecked('openlayers');
64-
}
65-
if (this.innerHTML === 'OpenLayers') {
66-
cancelChecked('leaflet');
80+
function initModules(clientName, modules) {
81+
if (!clientName) {
82+
return;
83+
}
84+
clientName = clientName.toLowerCase();
85+
86+
for (var key in modules) {
87+
var module = modules[key];
88+
var title = module.title;
89+
addGroup(clientName, key, title, module.description, $("#" + clientName + "select")[0]);
90+
var $container = $("#" + clientName + "_" + key);
91+
for (var itemKey in module) {
92+
if (itemKey === 'title' || itemKey === 'description') {
93+
continue;
94+
}
95+
addModule(itemKey, $container[0], false, module[itemKey].name);
6796
}
68-
updateCommand();
69-
$(this).tab('show');
70-
})
97+
$container.append($("<div style='clear:both;'></div>"));
98+
}
7199
}
72100

73101
function cancelChecked(clientName) {
@@ -142,22 +170,18 @@ function updateCommand() {
142170
}
143171
}
144172
modulePaths = modulePaths.substring(0, modulePaths.length - 1);
145-
commandInput.value = 'npm run package - ' + getKey() + " " + modulePaths;
173+
commandInput.value = 'npm run package - ' + getPackage() + " " + modulePaths;
146174
}
147175

148-
function getKey() {
149-
var key = "common";
150-
for (var check in $('#openlayersselect .deplist li input')) {
151-
if ($('#openlayersselect .deplist li input')[check].checked) {
152-
key = "openlayers";
153-
}
154-
}
155-
for (var check in $('#leafletselect .deplist li input')) {
156-
if ($('#leafletselect .deplist li input')[check].checked) {
157-
key = "leaflet";
176+
function getPackage() {
177+
var current = clientsTabs[currentClientTab];
178+
var $currentTab = $("#" + current + "select .deplist li input");
179+
for (var check in $currentTab) {
180+
if ($currentTab[check].checked) {
181+
return current;
158182
}
159183
}
160-
return key;
184+
return "common";
161185
}
162186

163187
function onCheckboxChange() {

‎build/pack.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
var program = require('commander');
22
var shell = require("shelljs");
33
var deps = require("./deps");
4-
54
program.description('Customized pack iClient9.');
65

76
program.command('- <key> [modules]')
87
.description('pack iClent9')
98
.action(function (key, modules) {
10-
if (!key || (key !== "leaflet" && key !== "common" && key !== "openlayers" && key !== "mapboxgl")) {
11-
console.log(key + "值输入有误，可选值为leaflet或openlayers");
9+
var packages = [];
10+
for (var pack in deps) {
11+
packages.push(pack);
12+
}
13+
if (!key || packages.indexOf(key) === -1) {
14+
console.log(key + "值输入有误，可选值为" + packages.toString());
1215
return;
1316
}
1417

@@ -18,16 +21,7 @@ program.command('- <key> [modules]')
1821
shell.exec('npm run deploy ' + modulePaths);
1922
return;
2023
}
21-
var clientModules;
22-
if (key === "leaflet") {
23-
clientModules = deps.leaflet;
24-
}
25-
if (key === "openlayers") {
26-
clientModules = deps.openlayers;
27-
}
28-
if (key === "mapboxgl") {
29-
clientModules = deps.mapboxgl;
30-
}
24+
var clientModules = deps[key];
3125
if (!modules) {
3226
for (var clientModule in clientModules) {
3327
for (var module in clientModules[clientModule]) {

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
"test": "test"
99
},
1010
"scripts": {
11-
"release": "npm run package - leaflet && npm run package - openlayers && npm run package - mapboxgl && npm run compress-leaflet&& npm run compress-openlayers && npm run compress-mapboxgl",
11+
"release": "npm run release-leaflet && npm run release-openlayers && npm run release-mapboxgl",
12+
"release-leaflet": "npm run package - leaflet && npm run compress-leaflet",
13+
"release-openlayers": "npm run package - openlayers && npm run compress-openlayers",
14+
"release-mapboxgl": "npm run package - mapboxgl && npm run compress-mapboxgl",
1215
"deploy": "webpack",
1316
"deploy-leaflet": "webpack --config ./build/webpack.config.leaflet.js ",
1417
"deploy-openlayers": "webpack --config ./build/webpack.config.openlayers.js",

0 commit comments

Comments
 (0)