Post List

2016년 10월 27일 목요일

Walmart Electrode #08 Build and Demo

Demo the Component & Build

아래와 같이 디렉토리 이동 후 실행을 해 보자.



[binrang@binrang demo]$ cd ..
[binrang@binrang br-elec-component]$ gulp build && gulp demo
[11:45:08] Using gulpfile ~/br-electrode-component/br-elec-component/gulpfile.js
[11:45:08] Starting 'build'...
[11:45:08] Starting 'clean-dist'...
[11:45:08] Finished 'clean-dist' after 10 ms
[11:45:08] Starting 'build-lib-$deps$'...
[11:45:08] Starting '~production-env'...
[11:45:08] Finished '~production-env' after 39 μs
[11:45:08] Finished 'build-lib-$deps$' after 1.38 ms
[11:45:08] Starting 'build-lib'...
[11:45:08] Starting 'clean-lib'...
[11:45:08] Finished 'clean-lib' after 2.11 ms
[11:45:08] Starting 'babel-src-step'...
src/components/br-elec-component.jsx -> lib/components/br-elec-component.js
src/components/guest-list.jsx -> lib/components/guest-list.js
src/components/render-friend.jsx -> lib/components/render-friend.js
src/helpers/graph-styles.js -> lib/helpers/graph-styles.js
src/index.js -> lib/index.js
src/lang/default-messages.js -> lib/lang/default-messages.js
src/lang/tenants/asda/default-messages.js -> lib/lang/tenants/asda/default-messages.js
src/lang/tenants/electrodeio/default-messages.js -> lib/lang/tenants/electrodeio/default-messages.js
src/lang/tenants/samsclub/default-messages.js -> lib/lang/tenants/samsclub/default-messages.js
src/lang/tenants/walmart/default-messages.js -> lib/lang/tenants/walmart/default-messages.js
[11:45:11] Finished 'babel-src-step' after 3 s
......
[11:45:12] Starting 'build-dist-min'...
Hash: de3629cf2f509dba3cc4
Version: webpack 1.13.2
Time: 5574ms
            Asset     Size  Chunks             Chunk Names
    bundle.min.js  52.2 kB       0  [emitted]  main
bundle.min.js.map   473 kB       0  [emitted]  main
    + 124 hidden modules
[11:45:20] Finished 'build-dist-min' after 8.11 s
[11:45:20] Starting 'build-dist-dev'...
Hash: 30dc1af24f26e1a57f77
Version: webpack 1.13.2
Time: 2425ms
        Asset    Size  Chunks             Chunk Names
    bundle.js  223 kB       0  [emitted]  main
bundle.js.map  272 kB       0  [emitted]  main
    + 128 hidden modules
[11:45:23] Finished 'build-dist-dev' after 3.33 s
......
  [916] ./~/raw-loader!./demo/examples/guest-list.example 229 bytes {0} [built]
  [917] ./~/raw-loader!./demo/examples/render-friend.example 108 bytes {0} [built]
  [918] ./~/raw-loader!./demo/examples/br-elec-component.example 634 bytes {0} [built]
     + 5 hidden modules
webpack: bundle is now VALID.

브라우저에서 http://localhost:4000 을 입력하여 데모 화면을 확인해보자.


추가 된 코드가 반영된 화면을 확인.

자. 이제 재미있는 부분을 살펴 보자.
이 부분의 화면에서 Code를 수정이 가능하다. 이 코드 중 invites 배열에 invited  옵션 값이 false로 되어 있는데 3개 배열 모두 true로 바꾸어보자.
현재 False 상태

값을 모두 true로 바꾸면

아래 화면에 아이콘들이 심쿵 거린다.


참조 URL : build_and_demo.html