Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Easy library Manager, bower


Published on

Bower Introduction

Published in: Technology
  • Login to see the comments

Easy library Manager, bower

  1. 1. Easy Library Manager Bower NHN Technology Services 프론트엔드개발팀 이진권
  2. 2. Beginning of Development
  3. 3. 반복적으로 하는 일 • Library download 
 - jquery.js / (or zepto.js)
 - underscore.js
 - require.js
 … • copy to 
 project directory
  4. 4. Library download 
 - jquery.js / (or zepto.js)
 … copy to project directory Library download 
 - underscore.js
 … copy to project directory Library download 
 - require.js
 … Library download 
 … copy to project directory Repeat, Repeat, Repeat again
  5. 5. 귀찮다 너무 귀찮다 Make Folder, Copy Libraries 麻烦 太麻烦
  6. 6. Searching for Solution
  7. 7. 무엇이 좋을까? 고민의 시작은 언제나 귀차니즘 그래서 열심히 찾기 시작
  8. 8. grunt-init ? 세팅을 미리 다 해주어야 하는군..
 음, 세팅하기가 좀 거추장스러운 느낌.
  9. 9. Yeoman? Total Service 너무 다 포함된 느낌. (yeoman에서도 bower 이용)
  10. 10. bower? 커맨드 한줄로 간편하게 라이브러리 설치? 오홋 편리하겠는데.
  11. 11. 귀찮은 작업을 줄이고, 그시간에 쉬자
 그시간에 개발하자
  12. 12. Installation with NPM
  13. 13. Easy to Install npm install -g bower It’s Done!
  14. 14. Note for Windows 윈도우 환경에서는 msysgit 이 설치 되어야 함
  15. 15. How to use
  16. 16. npm npm install express
 npm search bower install jquery bower search underscore Similar with
  17. 17. Let’s see “bower help”
  18. 18. Usage:   !        bower  <command>  [<args>]  [<options>]   ! Commands:   !        cache                                      Manage  bower  cache          help                                        Display  help  information  about  Bower          home                                        Opens  a  package  homepage  into  your  favorite  browser          info                                        Info  of  a  particular  package          init                                        Interactively  create  a  bower.json  file          install                                  Install  a  package  locally          link                                        Symlink  a  package  folder          list                                        List  local  packages          lookup                                    Look  up  a  package  URL  by  name          prune                                      Removes  local  extraneous  packages          register                                Register  a  package          search                                    Search  for  a  package  by  name          update                                    Update  a  local  package          uninstall                              Remove  a  local  package          version                                  Bump  a  package  version   ! Options:   !        -­‐f,  -­‐-­‐force                          Makes  various  commands  more  forceful          -­‐j,  -­‐-­‐json                            Output  consumable  JSON          -­‐l,  -­‐-­‐log-­‐level                  What  level  of  logs  to  report          -­‐o,  -­‐-­‐offline                      Do  not  hit  the  network          -­‐q,  -­‐-­‐quiet                          Only  output  important  information          -­‐s,  -­‐-­‐silent                        Do  not  output  anything,  besides  errors          -­‐V,  -­‐-­‐verbose                      Makes  output  more  verbose          -­‐-­‐allow-­‐root                        Allows  running  commands  as  root   ! See  'bower  help  <command>'  for  more  information  on  a  specific  command.
  19. 19. Flow • 관리를 위한 
 설정 파일을 생성하고, • 필요한 라이브러리를 검색해서, • 프로젝트에 라이브러리 설치 • 필요 없어진 라이브러리는 지운다. Create Search Install Rem ove
  20. 20. Commands
  21. 21. bower init
 bower.json 생성 마법사 
 (bower.json : 프로젝트 전용 설정 파일)
  22. 22. bower install {Library Name} --save
 라이브러리 설치 
 -- save 를 이용하면 bower.json에 의존성 기록
  23. 23. bower uninstall {Library Name}
 설치된 라이브러리 제거
  24. 24. bower update
 설치된 라이브러리 업데이트
  25. 25. bower ls (혹은 list)
 설치된 라이브러리 리스트 보기
  26. 26. bower search {Library Name}
 라이브러리 검색
  27. 27. bower lookup {Library Name}
 일치하는 라이브러리 보기
  28. 28. Project Setting File 
 • name: (필수값) 패키지명 • version: 버전 정보 • main: 패키지의 엔드포인트 • ignore: 패키지를 설치할 때 bower가 무시할 파일 목록 • dependencies : 프로덕션에서 사용할 패키지 의존성 정보 • devDependencies : 개발용 패키지 의존성 정보
  29. 29. Global Setting File 
 .bowerrc ! • directory : 컴포넌트를 설치할 기본 디렉토리 • endpoint: 커스텀 등록 엔드포인트 • json: 의존성을 처리할 때 사용할 기본 JSON 파일 • searchpath: 추가적으로 검색할 읽기전용 Bower 저장소 • shorthand_resolver: 간단하게 지정할 패키지명의 템플릿
  30. 30. Searching Packages
  31. 31. 웹 브라우저로 
 bower에 등록되어 있는 패키지 검색 ! (사실,
 bower search {Library Name} 이 있는데 여길 들어갈 필요가 있나..)
  32. 32. Bonus! Time Bench Marking
  33. 33. 그래서, 제 마음대로 시간을 재봤습니다
 조건 : jquery, underscore.js, require.js, backbone.js, jindo, d3.js Setup 0 5 10 15 20 기존방식 bower이용 unit : minutes
  34. 34. – by JK PPT 만들다 보니, 좀 약파는 느낌도 나는데 혼자만 쓰려다,, 같이 쓰면 좋을꺼 같아서요.
  35. 35. 감사합니다~!