From 3a427bb37730c1c39f30b9391f752e3883f97968 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 8 Mar 2018 10:45:40 +0800
Subject: [PATCH] build

---
 dist/index-min.js                  |   2 +-
 dist/lipstick.json                 |   1 +
 gulpfile.js                        |  11 ++-
 index.html                         |   4 +-
 package-lock.json                  | 117 +++++++++++++++++++++++++++++
 package.json                       |   1 +
 src/index.js                       |   2 +-
 lipstick.json => src/lipstick.json |   0
 8 files changed, 133 insertions(+), 5 deletions(-)
 create mode 100644 dist/lipstick.json
 rename lipstick.json => src/lipstick.json (100%)

diff --git a/dist/index-min.js b/dist/index-min.js
index 2567477..e7c2261 100644
--- a/dist/index-min.js
+++ b/dist/index-min.js
@@ -1 +1 @@
-var zr=null,bgDpi=.2,zrDpi=1,width=0,height=0,lipstickData=null;function init(){width=window.innerWidth*bgDpi,height=window.innerHeight*bgDpi;var t=document.getElementById("bg");t.setAttribute("width",width),t.setAttribute("height",height);var e=document.getElementById("zr");e.setAttribute("width",window.innerWidth*zrDpi),e.setAttribute("height",window.innerHeight*zrDpi),zr=zrender.init(e),$.getJSON("lipstick.json",function(e){updateLipstickData(e);var i=getMinMax(lipstickData);renderBackground(t,i),renderDataPoints(lipstickData,i),hover({target:lipstickData[0].group.childAt(0)}),updateUi(lipstickData[0]),document.getElementById("ui").setAttribute("style","display:block")})}function updateLipstickData(t){lipstickData=[];for(var e=0,i=t.brands.length;e<i;++e)for(var a=t.brands[e],r=0,n=a.series.length;r<n;++r){var o=a.series[r].lipsticks;lipstickData=lipstickData.concat(o);for(var l=0,s=o.length;l<s;++l)o[l].series=a.series[r],o[l].brand=a}}function getMinMax(t){for(var e=Number.MAX_VALUE,i=Number.MIN_VALUE,a=Number.MAX_VALUE,r=Number.MIN_VALUE,n=0;n<t.length;++n){var o=tinycolor(t[n].color).toHsl();o.l*=100,t[n]._hsl=o;var l=encodeHue(o.h);if(!(l<165||l>220)){l>i&&(i=l),l<e&&(e=l);var s=o.l;s>r&&(r=s),s<a&&(a=s)}}return{minHue:e-2,maxHue:i+2,minLight:Math.max(a-10,0),maxLight:Math.min(r+5,100)}}function renderBackground(t,e){for(var i=t.getContext("2d"),a=i.createImageData(width,height),r=a.data,n=0;n<height;++n)for(var o=0;o<width;++o){var l=(height-n)/height*(e.maxLight-e.minLight)+e.minLight,s=o/width*(e.maxHue-e.minHue)+e.minHue,d=tinycolor({h:encodeHue(s),s:80,l:l}).toRgb(),p=4*(n*width+o);r[p]=d.r,r[p+1]=d.g,r[p+2]=d.b,r[p+3]=255}i.putImageData(a,0,0)}function renderDataPoints(t,e){for(var i=0;i<t.length;++i){var a=getDataCoord(t[i],e),r=[a.x*zrDpi,a.y*zrDpi],n=new zrender.Circle({shape:{cx:0,cy:0,r:5},style:{fill:t[i].color,stroke:"rgba(255, 255, 255, 0.8)",lineWidth:1},position:r,z:1}),o=new zrender.Text({style:{text:t[i].name,textAlign:"center",textVerticalAlign:"middle",fontSize:12,textFill:"rgba(255, 255, 255, 0.5)"},position:[r[0],r[1]+16]}),l=new zrender.Group;l.add(n),l.add(o),zr.add(l),l.lipstick=t[i],l.lipstick.group=l}zr.on("mousemove",hover),zr.on("click",function(){lastEmphasisGroup||(normal(notNormalGroups),notNormalGroups=[])})}var lastEmphasisGroup=null,notNormalGroups=[];function hover(t){if(t.target&&t.target.parent===lastEmphasisGroup||!notNormalGroups.length||(normal(notNormalGroups),notNormalGroups=[]),t.target){if(lastEmphasisGroup!==t.target.parent){var e=t.target.parent;emphasis(e),notNormalGroups=[e];for(var i=e.lipstick,a=i.series.lipsticks,r=0;r<lipstickData.length;++r){var n=lipstickData[r];n!==i&&(a.indexOf(n)>-1?(relate(n.group),notNormalGroups.push(n.group)):downplay(n.group))}lastEmphasisGroup=t.target.parent}}else if(lastEmphasisGroup){for(r=0;r<lipstickData.length;++r)undownplay(lipstickData[r].group);lastEmphasisGroup=null}}function emphasis(t){undownplay(t);var e=t.childAt(0);e.attr("z",11),e.stopAnimation(!0),e.animateTo({shape:{r:30},style:{lineWidth:3,stroke:"#fff",shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.4)"}},200,0,"bounceOut");var i=t.childAt(1);i.attr("z",10),i.attr("style",{text:"#"+t.lipstick.id+" "+t.lipstick.name,textPadding:[62,0,0,0]}),i.stopAnimation(!0),i.animateTo({style:{textFill:t.lipstick.color,fontSize:16,textStrokeWidth:3,textStroke:"#fff"}},200,0,"bounceOut"),updateUi(t.lipstick)}function relate(t){undownplay(t);var e=t.childAt(0);e.stopAnimation(!0),e.attr("style",{lineWidth:2}),e.attr("z",9),e.attr("shape",{r:10}),e.animateTo({style:{shadowBlur:8,shadowColor:"rgba(0, 0, 0, 0.2)"}},200,0,"bounceOut");var i=t.childAt(1);i.attr("style",{text:"#"+t.lipstick.id+" "+t.lipstick.name,textPadding:[12,0,0,0]}),i.attr("z",8),i.stopAnimation(!0),i.animateTo({style:{textFill:t.lipstick.color,textStrokeWidth:2,textStroke:"rgba(255, 255, 255, 0.75)"}},200,0,"bounceOut")}function normal(t){for(var e=0;e<t.length;++e){var i=t[e].childAt(0);i.attr("z",1),i.stopAnimation(!0),i.animateTo({shape:{r:5},style:{stroke:"rgba(255, 255, 255, 0.8)",lineWidth:1,shadowBlur:0}},200,0,"linear");var a=t[e].childAt(1);a.stopAnimation(!0),a.attr("style",{text:t[e].lipstick.name,textPadding:0}),a.attr("z",0),a.animateTo({style:{fontSize:12,textStrokeWidth:0,textShadowBlur:0,textFill:"rgba(255, 255, 255, 0.5)"}},200,0,"linear")}}function downplay(t){var e=t.childAt(0);e.stopAnimation(!0),e.animateTo({style:{opacity:.6}},200,0,"linear");var i=t.childAt(1);i.stopAnimation(!0),i.animateTo({style:{opacity:0}},200,0,"linear")}function undownplay(t){var e=t.childAt(0);e.stopAnimation(!0),e.animateTo({style:{opacity:1}},200,0,"linear");var i=t.childAt(1);i.stopAnimation(!0),i.animateTo({style:{opacity:1}},200,0,"linear")}function getDataCoord(t,e){var i=encodeHue(t._hsl.h),a=t._hsl.l;return{x:(i-e.minHue)*width/(e.maxHue-e.minHue)/bgDpi,y:height/bgDpi-(a-e.minLight)*height/(e.maxLight-e.minLight)/bgDpi}}function encodeHue(t){return t<180?180-t:540-t}function updateUi(t){document.getElementById("brand-name").innerText=t.brand.name,document.getElementById("series-name").innerText=t.series.name,document.getElementById("lipstick-id").innerText=t.id,document.getElementById("lipstick-name").innerText=t.name,document.getElementById("lipstick-info").setAttribute("style","color:"+t.color);var e=document.getElementById("series-colors");e.innerText="";for(var i=t.series.lipsticks,a=0;a<i.length;++a){var r=document.createElement("div");r.setAttribute("style","background-color:"+i[a].color);var n=i[a]===t?"series-color active":"series-color";r.setAttribute("class",n),e.appendChild(r)}}
\ No newline at end of file
+var zr=null,bgDpi=.2,zrDpi=1,width=0,height=0,lipstickData=null;function init(){width=window.innerWidth*bgDpi,height=window.innerHeight*bgDpi;var t=document.getElementById("bg");t.setAttribute("width",width),t.setAttribute("height",height);var e=document.getElementById("zr");e.setAttribute("width",window.innerWidth*zrDpi),e.setAttribute("height",window.innerHeight*zrDpi),zr=zrender.init(e),$.getJSON("dist/lipstick.json",function(e){updateLipstickData(e);var i=getMinMax(lipstickData);renderBackground(t,i),renderDataPoints(lipstickData,i),hover({target:lipstickData[0].group.childAt(0)}),updateUi(lipstickData[0]),document.getElementById("ui").setAttribute("style","display:block")})}function updateLipstickData(t){lipstickData=[];for(var e=0,i=t.brands.length;e<i;++e)for(var a=t.brands[e],r=0,n=a.series.length;r<n;++r){var o=a.series[r].lipsticks;lipstickData=lipstickData.concat(o);for(var l=0,s=o.length;l<s;++l)o[l].series=a.series[r],o[l].brand=a}}function getMinMax(t){for(var e=Number.MAX_VALUE,i=Number.MIN_VALUE,a=Number.MAX_VALUE,r=Number.MIN_VALUE,n=0;n<t.length;++n){var o=tinycolor(t[n].color).toHsl();o.l*=100,t[n]._hsl=o;var l=encodeHue(o.h);if(!(l<165||l>220)){l>i&&(i=l),l<e&&(e=l);var s=o.l;s>r&&(r=s),s<a&&(a=s)}}return{minHue:e-2,maxHue:i+2,minLight:Math.max(a-10,0),maxLight:Math.min(r+5,100)}}function renderBackground(t,e){for(var i=t.getContext("2d"),a=i.createImageData(width,height),r=a.data,n=0;n<height;++n)for(var o=0;o<width;++o){var l=(height-n)/height*(e.maxLight-e.minLight)+e.minLight,s=o/width*(e.maxHue-e.minHue)+e.minHue,d=tinycolor({h:encodeHue(s),s:80,l:l}).toRgb(),p=4*(n*width+o);r[p]=d.r,r[p+1]=d.g,r[p+2]=d.b,r[p+3]=255}i.putImageData(a,0,0)}function renderDataPoints(t,e){for(var i=0;i<t.length;++i){var a=getDataCoord(t[i],e),r=[a.x*zrDpi,a.y*zrDpi],n=new zrender.Circle({shape:{cx:0,cy:0,r:5},style:{fill:t[i].color,stroke:"rgba(255, 255, 255, 0.8)",lineWidth:1},position:r,z:1}),o=new zrender.Text({style:{text:t[i].name,textAlign:"center",textVerticalAlign:"middle",fontSize:12,textFill:"rgba(255, 255, 255, 0.5)"},position:[r[0],r[1]+16]}),l=new zrender.Group;l.add(n),l.add(o),zr.add(l),l.lipstick=t[i],l.lipstick.group=l}zr.on("mousemove",hover),zr.on("click",function(){lastEmphasisGroup||(normal(notNormalGroups),notNormalGroups=[])})}var lastEmphasisGroup=null,notNormalGroups=[];function hover(t){if(t.target&&t.target.parent===lastEmphasisGroup||!notNormalGroups.length||(normal(notNormalGroups),notNormalGroups=[]),t.target){if(lastEmphasisGroup!==t.target.parent){var e=t.target.parent;emphasis(e),notNormalGroups=[e];for(var i=e.lipstick,a=i.series.lipsticks,r=0;r<lipstickData.length;++r){var n=lipstickData[r];n!==i&&(a.indexOf(n)>-1?(relate(n.group),notNormalGroups.push(n.group)):downplay(n.group))}lastEmphasisGroup=t.target.parent}}else if(lastEmphasisGroup){for(r=0;r<lipstickData.length;++r)undownplay(lipstickData[r].group);lastEmphasisGroup=null}}function emphasis(t){undownplay(t);var e=t.childAt(0);e.attr("z",11),e.stopAnimation(!0),e.animateTo({shape:{r:30},style:{lineWidth:3,stroke:"#fff",shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.4)"}},200,0,"bounceOut");var i=t.childAt(1);i.attr("z",10),i.attr("style",{text:"#"+t.lipstick.id+" "+t.lipstick.name,textPadding:[62,0,0,0]}),i.stopAnimation(!0),i.animateTo({style:{textFill:t.lipstick.color,fontSize:16,textStrokeWidth:3,textStroke:"#fff"}},200,0,"bounceOut"),updateUi(t.lipstick)}function relate(t){undownplay(t);var e=t.childAt(0);e.stopAnimation(!0),e.attr("style",{lineWidth:2}),e.attr("z",9),e.attr("shape",{r:10}),e.animateTo({style:{shadowBlur:8,shadowColor:"rgba(0, 0, 0, 0.2)"}},200,0,"bounceOut");var i=t.childAt(1);i.attr("style",{text:"#"+t.lipstick.id+" "+t.lipstick.name,textPadding:[12,0,0,0]}),i.attr("z",8),i.stopAnimation(!0),i.animateTo({style:{textFill:t.lipstick.color,textStrokeWidth:2,textStroke:"rgba(255, 255, 255, 0.75)"}},200,0,"bounceOut")}function normal(t){for(var e=0;e<t.length;++e){var i=t[e].childAt(0);i.attr("z",1),i.stopAnimation(!0),i.animateTo({shape:{r:5},style:{stroke:"rgba(255, 255, 255, 0.8)",lineWidth:1,shadowBlur:0}},200,0,"linear");var a=t[e].childAt(1);a.stopAnimation(!0),a.attr("style",{text:t[e].lipstick.name,textPadding:0}),a.attr("z",0),a.animateTo({style:{fontSize:12,textStrokeWidth:0,textShadowBlur:0,textFill:"rgba(255, 255, 255, 0.5)"}},200,0,"linear")}}function downplay(t){var e=t.childAt(0);e.stopAnimation(!0),e.animateTo({style:{opacity:.6}},200,0,"linear");var i=t.childAt(1);i.stopAnimation(!0),i.animateTo({style:{opacity:0}},200,0,"linear")}function undownplay(t){var e=t.childAt(0);e.stopAnimation(!0),e.animateTo({style:{opacity:1}},200,0,"linear");var i=t.childAt(1);i.stopAnimation(!0),i.animateTo({style:{opacity:1}},200,0,"linear")}function getDataCoord(t,e){var i=encodeHue(t._hsl.h),a=t._hsl.l;return{x:(i-e.minHue)*width/(e.maxHue-e.minHue)/bgDpi,y:height/bgDpi-(a-e.minLight)*height/(e.maxLight-e.minLight)/bgDpi}}function encodeHue(t){return t<180?180-t:540-t}function updateUi(t){document.getElementById("brand-name").innerText=t.brand.name,document.getElementById("series-name").innerText=t.series.name,document.getElementById("lipstick-id").innerText=t.id,document.getElementById("lipstick-name").innerText=t.name,document.getElementById("lipstick-info").setAttribute("style","color:"+t.color);var e=document.getElementById("series-colors");e.innerText="";for(var i=t.series.lipsticks,a=0;a<i.length;++a){var r=document.createElement("div");r.setAttribute("style","background-color:"+i[a].color);var n=i[a]===t?"series-color active":"series-color";r.setAttribute("class",n),e.appendChild(r)}}
\ No newline at end of file
diff --git a/dist/lipstick.json b/dist/lipstick.json
new file mode 100644
index 0000000..f6f838c
--- /dev/null
+++ b/dist/lipstick.json
@@ -0,0 +1 @@
+{"brands":[{"name":"圣罗兰","series":[{"name":"莹亮纯魅唇膏","lipsticks":[{"color":"#D62352","id":"49","name":"撩骚"},{"color":"#DC4B41","id":"14","name":"一见倾心"},{"color":"#B22146","id":"05","name":"浮生若梦"},{"color":"#A25356","id":"08","name":"纯真梦幻"},{"color":"#DF3443","id":"12","name":"红粉派对"},{"color":"#E06C68","id":"15","name":"珊瑚恋人"},{"color":"#842C71","id":"19","name":"华丽转身"},{"color":"#D13C4F","id":"43","name":"唇印"},{"color":"#B71D32","id":"04","name":"危情禁果"},{"color":"#DE2361","id":"06","name":"情窦初开"},{"color":"#B05856","id":"09","name":"裸色暗恋"},{"color":"#E06F70","id":"13","name":"邂逅巴黎"},{"color":"#CD4143","id":"16","name":"糖果女孩"},{"color":"#EC6A70","id":"41","name":"告白"},{"color":"#EFE9DE","id":"42","name":"初恋"},{"color":"#C60F2F","id":"45","name":"拥吻"},{"color":"#BB6868","id":"47","name":"心跳"},{"color":"#E0186B","id":"50","name":"约定"},{"color":"#D45E85","id":"52","name":"游戏"},{"color":"#C16E6F","id":"44","name":"意外"},{"color":"#D1121B","id":"46","name":"钟情"},{"color":"#8E243E","id":"48","name":"夜色"},{"color":"#EE7486","id":"51","name":"私语"}]},{"name":"纯口红","lipsticks":[{"id":"19","color":"#B13C79","name":"玫红色"},{"id":"13","color":"#BB1813","name":"正橘色"},{"id":"52","color":"#EA4E59","name":"星星色"},{"id":"01","color":"#B8122B","name":"正红色"},{"id":"17","color":"#F75E70","name":"嫣粉纱丽"},{"id":"07","color":"#CB2276","name":"雅紫纱蓉"},{"id":"09","color":"#C27482","name":"绛紫丝绒"},{"id":"11","color":"#C06B72","name":"藕粉云罗"},{"id":"16","color":"#BB444A","name":"绯红香缎"},{"id":"22","color":"#E86E9F","name":"莹亮裸粉"},{"id":"23","color":"#DE6F5C","name":"杏色府绸"},{"id":"26","color":"#CC6D84","name":"堇色流纱"},{"id":"36","color":"#ED695D","name":"珊瑚雪纺"},{"id":"49","color":"#DC4D8D","name":"想你色"},{"id":"51","color":"#FA6C55","name":"莹亮珊瑚橙"},{"id":"56","color":"#D9100E","name":"橙红织锦"},{"id":"59","color":"#B96463","name":"裸色薄纱"},{"id":"207","color":"#CA4061","name":"珊瑚柚"},{"id":"208","color":"#D60846","name":"玫红色"},{"id":"27","color":"#D24379","name":"纯真玫红"},{"id":"50","color":"#DC2923","name":"前卫霓红"},{"id":"57","color":"#C7153D","name":"明亮裸唇"},{"id":"58","color":"#B25D84","name":"明亮淡紫"},{"id":"201","color":"#B01020","name":"红唇印象"},{"id":"202","color":"#9E2C2C","name":"疯狂玫瑰"},{"id":"203","color":"#940220","name":"摇滚红唇"},{"id":"205","color":"#550001","name":"天然浆果"},{"id":"72","color":"#9A1B2F","name":""},{"id":"73","color":"#CF0410","name":""},{"id":"74","color":"#E0291B","name":""},{"id":"211","color":"#E4004F","name":"DECADENT"},{"id":"212","color":"#A53B4F","name":"ALTERNATIVEPLUM"},{"id":"213","color":"#E94138","name":"ORANGE SEVENTIES"},{"id":"215","color":"#E34E90","name":"LUST FOR PINK"},{"id":"216","color":"#DE455A","name":"RED CLASH"},{"id":"217","color":"#DE455A","name":"NUDE TROUBLE"}]},{"name":"莹亮纯魅美唇膏","lipsticks":[{"id":"11","color":"#D51768","name":"玫色游戏"},{"id":"3","color":"#F18885","name":"玫瑰轻语"},{"id":"8","color":"#E52322","name":"橙色放纵"},{"id":"4","color":"#DA0140","name":"桃红欲望"},{"id":"1","color":"#C05B60","name":"裸色幻想"},{"id":"2","color":"#E87593","name":"粉色嬉戏"},{"id":"5","color":"#630F28","name":"梅色撩拨"},{"id":"6","color":"#CC0824","name":"红色触碰"},{"id":"7","color":"#ED6D68","name":"珊瑚挑逗"},{"id":"9","color":"#E73458","name":"粉色纵情"},{"id":"10","color":"#A00F30","name":"绯红诱惑"},{"id":"12","color":"#B81D3D","name":"苺色暧昧"}]},{"name":"纯色唇釉叛逆裸唇","lipsticks":[{"id":"12","color":"#D0011E","name":"红绯"},{"id":"46","color":"#9F182C","name":"深红色"},{"id":"50","color":"#C64E5B","name":"自然珊瑚"},{"id":"08","color":"#C41304","name":"唐橘"},{"id":"07","color":"#CC2010","name":"蜜柚"},{"id":"09","color":"#D4020E","name":"红釉"},{"id":"11","color":"#D0010B","name":"洋红"},{"id":"13","color":"#CC030E","name":"茜色"},{"id":"15","color":"#D41B40","name":"桃红"},{"id":"42","color":"#DF294E","name":"风情橘红"},{"id":"43","color":"#E23E44","name":"玫瑰歌谣"},{"id":"47","color":"#BC3250","name":"桃红色"},{"id":"48","color":"#C13E30","name":"橙色"},{"id":"49","color":"#BB325C","name":"梅子色"},{"id":"51","color":"#951E53","name":"玫红色"},{"id":"200","color":"#DC9F8F","name":"丰唇唇釉"}]},{"name":"莹亮绚染唇油","lipsticks":[{"id":"05","color":"#FF54A3","name":"樱桃情人"},{"id":"04","color":"#FF725D","name":"粉恋玫瑰"},{"id":"06","color":"#C072B5","name":"蜜桃热恋"},{"id":"07","color":"#FFD0DD","name":"橙色邂逅"},{"id":"08","color":"#FF7B1E","name":"粉色憧憬"}]},{"name":"甜吻唇颊霜","lipsticks":[{"id":"05","color":"#E21949","name":"洋红色"},{"id":"01","color":"#DD2269","name":"玫红色"},{"id":"02","color":"#E05572","name":"樱花粉"},{"id":"03","color":"#D16479","name":"裸粉色"},{"id":"04","color":"#DF4A43","name":"亮橘色"},{"id":"07","color":"#DC6B5D","name":"珊瑚橙"},{"id":"08","color":"#DE6A78","name":"珊瑚粉"},{"id":"09","color":"#BF7083","name":"珊瑚柚"},{"id":"12","color":"#AD625E","name":"摩卡色"}]},{"name":"莹亮灿金唇彩","lipsticks":[{"id":"49","color":"#D03370","name":"骚动"},{"id":"207","color":"#D11746","name":"激情"},{"id":"03","color":"#D34E59","name":"憧憬"},{"id":"15","color":"#AB3B48","name":"突然"},{"id":"30","color":"#DD6053","name":"甜蜜"},{"id":"203","color":"#FE645A","name":"心跳"},{"id":"204","color":"#FE5B56","name":"意外"},{"id":"206","color":"#B80722","name":"炙热"}]}]},{"name":"香奈儿可可小姐","series":[{"name":"唇膏水亮","lipsticks":[{"id":"69","color":"#F17365","name":"传情"},{"id":"46","color":"#E87268","name":"自由"},{"id":"122","color":"#EA4D4A","name":"CORAIL RADIEUX"},{"id":"97","color":"#D53D49","name":"洒脱"},{"id":"44","color":"#FD4334","name":"水漾纱丽"},{"id":"507","color":"#E94648","name":"倔强"},{"id":"114","color":"#FF3220","name":"SHIPSHAPE"},{"id":"91","color":"#C12A33","name":"波希米亚"},{"id":"84","color":"#CE1220","name":"对白"},{"id":"57","color":"#EB6F79","name":"冒险"},{"id":"116","color":"#EC5193","name":"MIGHTY"},{"id":"54","color":"#D1918D","name":"卡柏男孩"},{"id":"79","color":"#E86A75","name":"传奇"},{"id":"497","color":"#ED5A5E","name":"勇敢"},{"id":"132","color":"#E93A5B","name":"ROSE RAVISSANT"},{"id":"87","color":"#F8657F","name":"约会"},{"id":"55","color":"#F14C77","name":"浪漫爱情"},{"id":"118","color":"#EB2755","name":"ENERGY"},{"id":"62","color":"#E12948","name":"蒙特卡罗"},{"id":"134","color":"#E7394A","name":"RENOUVEAU"},{"id":"98","color":"#CC4D68","name":"率真"},{"id":"60","color":"#BB395F","name":"安蒂岗妮"},{"id":"61","color":"#C54463","name":"幸福时光"}]},{"name":"炫亮魅力唇膏","lipsticks":[{"id":"90","color":"#FC6E48","name":"活泼"},{"id":"96","color":"#FA421C","name":"古灵精怪"},{"id":"182","color":"#E02E20","name":"VIBRANTE"},{"id":"152","color":"#E82F2C","name":"隐约"},{"id":"172","color":"#E40021","name":"ROUGE REBELLE"},{"id":"135","color":"#99413D","name":"谜情"},{"id":"99","color":"#8A010D","name":"海盗"},{"id":"176","color":"#A80D1F","name":"INDÉPENDANTE"},{"id":"169","color":"#8E2622","name":"ROUGE TENTATION"},{"id":"91","color":"#E45661","name":"吸引力"},{"id":"179","color":"#ED6160","name":"LUMINOUS"},{"id":"94","color":"#FC3E6E","name":"着迷"},{"id":"138","color":"#D93E5E","name":"激昂"},{"id":"136","color":"#EF4246","name":"悠扬"},{"id":"178","color":"#BF5363","name":"NEW PRODIGIOUS"},{"id":"158","color":"#B24957","name":"VIREVOLTANTE"},{"id":"93","color":"#CD0043","name":"兴奋"},{"id":"165","color":"#C82C40","name":"ÉBLOUISSANTE"},{"id":"184","color":"#C80F2E","name":"INCANTEVOLE"},{"id":"102","color":"#B20032","name":"悸动"}]},{"name":"炫亮魅力唇膏","lipsticks":[{"id":"90","color":"#E1527E","name":"IMAGINATION"}]},{"name":"炫亮魅力唇膏丝绒","lipsticks":[{"id":"65","color":"#E17062","name":"L'ARISTOCRATICA"},{"id":"64","color":"#E84632","name":"FIRST LIGHT"},{"id":"57","color":"#BE2B24","name":"ROUGE FEU"},{"id":"66","color":"#E1112A","name":"L'INDOMABILE"},{"id":"51","color":"#9E333D","name":"震撼"},{"id":"56","color":"#B23030","name":"ROUGE CHARNEL"},{"id":"38","color":"#892833","name":"迷惑"},{"id":"58","color":"#822E2E","name":"ROUGE VIE"},{"id":"63","color":"#802932","name":"NIGHTFALL"},{"id":"61","color":"#EC7879","name":"LA SECRÈTE"},{"id":"42","color":"#FE697F","name":"显眼"},{"id":"43","color":"#FA5059","name":"亲爱"},{"id":"46","color":"#C92D38","name":"慧黠"},{"id":"37","color":"#C43759","name":"纵情"},{"id":"44","color":"#F06FA5","name":"歌剧名伶"},{"id":"50","color":"#9F2F56","name":"浪漫幻想"}]}]},{"name":"迪奥","series":[{"name":"魅惑釉唇膏","lipsticks":[{"id":"457","color":"#EB636B","name":"鸡尾酒"},{"id":"487","color":"#EB5C97","name":"泡泡堂"},{"id":"550","color":"#E47082","name":"小心计"},{"id":"554","color":"#EA5344","name":"日光浴"},{"id":"564","color":"#E94858","name":"购物狂"},{"id":"577","color":"#C86378","name":"混日子"},{"id":"637","color":"#E74218","name":"热点"},{"id":"644","color":"#EA5331","name":"生存游戏"},{"id":"684","color":"#E60860","name":"人生赢家"},{"id":"740","color":"#902216","name":"可乐部"},{"id":"744","color":"#E51E1B","name":"花蝴蝶"},{"id":"794","color":"#95358C","name":"天生玩家"},{"id":"857","color":"#A01314","name":"好莱坞大咖"},{"id":"867","color":"#901A32","name":"红酒"},{"id":"877","color":"#C4032B","name":"给我迪奥"},{"id":"882","color":"#BB0E63","name":"野蛮女友"},{"id":"904","color":"#391E1D","name":"黑咖啡"},{"id":"924","color":"#602227","name":"不羁"}]},{"name":"魅惑染唇蜜","lipsticks":[{"id":"351","color":"#D8707D","name":"魅惑染唇蜜"},{"id":"421","color":"#AD5F56","name":"魅惑染唇蜜"},{"id":"451","color":"#E55461","name":"Natural Coral"},{"id":"491","color":"#A76165","name":"魅惑染唇蜜"},{"id":"761","color":"#E13D5D","name":"Natural Cherry"},{"id":"771","color":"#974249","name":"Natural Berry"},{"id":"881","color":"#EC6292","name":"Natural Pink"}]},{"name":"烈艳蓝金唇膏","lipsticks":[{"id":"028","color":"#E83F4A","name":"Actrice"},{"id":"426","color":"#D58F7F","name":""},{"id":"481","color":"#B76566","name":""},{"id":"047","color":"#E40068","name":"迪奥小姐"},{"id":"781","color":"#833B43","name":""},{"id":"060","color":"#D36179","name":"首映礼"},{"id":"080","color":"#D91820","name":"微笑正红"},{"id":"861","color":"#B52237","name":""},{"id":"996","color":"#BD7376","name":""},{"id":"999","color":"#A82628","name":""},{"id":"999","color":"#A82628","name":"Metallic"},{"id":"207","color":"#BBC3C2","name":"蒙田灰"},{"id":"277","color":"#DB7096","name":"Osée"},{"id":"343","color":"#EF7C6B","name":"Panaréa"},{"id":"351","color":"#E46177","name":"Dansante"},{"id":"459","color":"#D1546E","name":"Charnelle"},{"id":"520","color":"#E4003E","name":"Feel Good"},{"id":"553","color":"#DA4F4E","name":"Sillage"},{"id":"567","color":"#EA5069","name":"Rose en Dior"},{"id":"576","color":"#F08182","name":"Pretty Matte"},{"id":"602","color":"#2E4763","name":"狂想"},{"id":"642","color":"#EA5155","name":"Ready"},{"id":"643","color":"#E84617","name":"Stand Out"},{"id":"652","color":"#ED6C7F","name":"珊瑚"},{"id":"663","color":"#D0546B","name":"Désir"},{"id":"665","color":"#BD5154","name":"Rêvée"},{"id":"678","color":"#CC4A6B","name":"Culte"},{"id":"746","color":"#DC002C","name":"Favorite"},{"id":"756","color":"#E52F31","name":"Panache"},{"id":"766","color":"#CF1D59","name":"Rose Harpers"},{"id":"771","color":"#E96C81","name":"Radiant Matte"},{"id":"772","color":"#CB7A84","name":"Classic Matte"},{"id":"775","color":"#E1244B","name":"Hyde Park"},{"id":"787","color":"#E6699D","name":"Exuberant Matte"},{"id":"789","color":"#96518F","name":"痴迷"},{"id":"844","color":"#E0262E","name":"Trafalgar"},{"id":"856","color":"#B62631","name":"Célèbre"},{"id":"888","color":"#EB5958","name":"Strong Matte"},{"id":"962","color":"#86556D","name":"奇葩"},{"id":"999","color":"#BE020D","name":""},{"id":"999","color":"#CC434D","name":"传奇红唇哑光"}]}]},{"name":"美宝莲","series":[{"name":"绝色持久唇膏绒情哑光","lipsticks":[{"id":"MAT5","color":"#99163A","name":""},{"id":"R45M","color":"#A22040","name":""},{"id":"R41M","color":"#C31431","name":"COLOR SENSATIONAL VIVID MATTE"},{"id":"MAT1","color":"#EC5C80","name":""},{"id":"MAT3","color":"#EC594F","name":""},{"id":"MAT5","color":"#F193AD","name":""}]}]},{"name":"纪梵希","series":[{"name":"高定香榭天鹅绒唇膏（小羊皮）","lipsticks":[{"id":"N103","color":"#DF695F","name":"优雅米色"},{"id":"N103","color":"#C74A52","name":"迷人茶色"},{"id":"N105","color":"#A82A40","name":"阳光小麦"},{"id":"N202","color":"#F43556","name":"幻想玫瑰"},{"id":"N204","color":"#BE2446","name":"樱桃玫瑰"},{"id":"N205","color":"#E70060","name":"加仑玫瑰"},{"id":"N304","color":"#F82131","name":"加州红"},{"id":"N306","color":"#E50036","name":"法式红"},{"id":"N303","color":"#FA054B","name":"珊瑚红"},{"id":"N302","color":"#FB2C60","name":"芭比红"},{"id":"305","color":"#FA013D","name":"缪斯红"},{"id":"201","color":"#FA6173","name":"糖果玫瑰"},{"id":"209","color":"#F60071","name":"明艳玫瑰"},{"id":"210","color":"#FF4D89","name":"大丽玫瑰"},{"id":"315","color":"#AC003A","name":"覆盆子红"},{"id":"317","color":"#E03B35","name":"暖柿红"},{"id":"307","color":"#93142F","name":"石榴红"},{"id":"301","color":"#DF3751","name":"西瓜红"},{"id":"214","color":"#BB3C5A","name":"复古玫瑰"},{"id":"323","color":"#C53057","name":"高雅梅"},{"id":"326","color":"#932844","name":"勃艮第红"},{"id":"327","color":"#9B325A","name":"莓紫红"},{"id":"324","color":"#EE4650","name":"秀场红"},{"id":"325","color":"#E11020","name":"圣水红"},{"id":"215","color":"#844452","name":"橡皮裸肌"},{"id":"329","color":"#731919","name":"红色高跟鞋"},{"id":"330","color":"#64263F","name":"复古提琴"},{"id":"331","color":"#58151E","name":"赤霞珠"}]},{"name":"禁忌之吻霓虹唇膏","lipsticks":[{"id":"11","color":"#BA353C","name":"御姐橘"},{"id":"7","color":"#8B2844","name":"幻想紫"},{"id":"8","color":"#B12252","name":"暗夜莓"},{"id":"9","color":"#DD485B","name":"沉睡红"},{"id":"10","color":"#B53D52","name":"帅T红"},{"id":"12","color":"#B9282D","name":"女巫红"},{"id":"13","color":"#CA292E","name":"禁忌红"},{"id":"14","color":"#CB2D21","name":"鬼魅红"},{"id":"15","color":"#D43A29","name":"夜光橘"},{"id":"16","color":"#DF4541","name":"潮女红"},{"id":"18","color":"#D35C5E","name":"童话粉"},{"id":"22","color":"#EC2663","name":"精灵粉"},{"id":"23","color":"#C62E54","name":"魔女粉"},{"id":"24","color":"#AA2260","name":"傲娇粉"},{"id":"17","color":"#DD5852","name":"乙女粉"},{"id":"19","color":"#E36476","name":"治愈粉"},{"id":"20","color":"#EC6284","name":"萝莉粉"},{"id":"21","color":"#EA586F","name":"元气粉"}]}]}]}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 04f5d02..2fc55ac 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,10 +1,19 @@
 var gulp = require('gulp');
 var minify = require('gulp-minify');
+var jsonminify = require('gulp-jsonminify');
 
-gulp.task('compress', function() {
+gulp.task('js', function() {
     gulp.src('src/*.js')
         .pipe(minify({
             noSource: true
         }))
         .pipe(gulp.dest('dist'));
 });
+
+gulp.task('json', function () {
+    return gulp.src(['src/lipstick.json'])
+        .pipe(jsonminify())
+        .pipe(gulp.dest('dist'));
+});
+
+gulp.task('default', ['js', 'json']);
diff --git a/index.html b/index.html
index b35bb9a..76d2285 100644
--- a/index.html
+++ b/index.html
@@ -107,8 +107,8 @@ <h1>口红颜色可视化</h1>
     <script src="dist/lib/zepto.min.js"></script>
     <script src="dist/lib/zrender.min.js"></script>
 
-    <script src="src/index.js"></script>
-    <!-- <script src="dist/index-min.js"></script> -->
+    <!-- <script src="src/index.js"></script> -->
+    <script src="dist/index-min.js"></script>
 
     <script>
     var _hmt = _hmt || [];
diff --git a/package-lock.json b/package-lock.json
index 3f91365..54dd6e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,15 @@
         "json-schema-traverse": "0.3.1"
       }
     },
+    "ansi-cyan": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz",
+      "integrity": "sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
     "ansi-gray": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
@@ -25,6 +34,15 @@
         "ansi-wrap": "0.1.0"
       }
     },
+    "ansi-red": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz",
+      "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
     "ansi-regex": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
@@ -1397,6 +1415,47 @@
         }
       }
     },
+    "gulp-jsonminify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gulp-jsonminify/-/gulp-jsonminify-1.1.0.tgz",
+      "integrity": "sha512-nkqH5aRajfCGD8HB2yN+QSEQG0SMEpS7UyOp3HS966Og4DqUX0y8sPF5SU8uSsGLLLXbnHwyHbDkxauYO/pSpQ==",
+      "dev": true,
+      "requires": {
+        "jsonminify": "0.2.3",
+        "plugin-error": "0.1.2",
+        "through2": "0.6.5"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "1.0.34",
+            "xtend": "4.0.1"
+          }
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+          "dev": true
+        }
+      }
+    },
     "gulp-minify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/gulp-minify/-/gulp-minify-2.1.0.tgz",
@@ -1838,6 +1897,12 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "jsonminify": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/jsonminify/-/jsonminify-0.2.3.tgz",
+      "integrity": "sha1-S4Qsij/l1qpIsvj5Whz5qAwBnY4=",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -2629,6 +2694,58 @@
         "pinkie": "2.0.4"
       }
     },
+    "plugin-error": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz",
+      "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=",
+      "dev": true,
+      "requires": {
+        "ansi-cyan": "0.1.1",
+        "ansi-red": "0.1.1",
+        "arr-diff": "1.1.0",
+        "arr-union": "2.1.0",
+        "extend-shallow": "1.1.4"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz",
+          "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-slice": "0.2.3"
+          }
+        },
+        "arr-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz",
+          "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=",
+          "dev": true
+        },
+        "array-slice": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
+          "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
+          "dev": true
+        },
+        "extend-shallow": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz",
+          "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=",
+          "dev": true,
+          "requires": {
+            "kind-of": "1.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+          "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=",
+          "dev": true
+        }
+      }
+    },
     "pngjs": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-2.3.1.tgz",
diff --git a/package.json b/package.json
index dd27d6b..1616b17 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "get-pixels": "^3.3.0",
     "gulp": "^3.9.1",
+    "gulp-jsonminify": "^1.1.0",
     "gulp-minify": "^2.1.0"
   }
 }
diff --git a/src/index.js b/src/index.js
index 0156d8d..3392e73 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,7 +18,7 @@ function init() {
     zrDom.setAttribute('height', window.innerHeight * zrDpi);
     zr = zrender.init(zrDom);
 
-    $.getJSON('lipstick.json', function (data) {
+    $.getJSON('dist/lipstick.json', function (data) {
         updateLipstickData(data);
 
         var minMax = getMinMax(lipstickData);
diff --git a/lipstick.json b/src/lipstick.json
similarity index 100%
rename from lipstick.json
rename to src/lipstick.json