Your SlideShare is downloading. ×
Easy libary Manage, bower
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Easy libary Manage, bower

399
views

Published on

Bower Introduction

Bower Introduction

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
399
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Easy Library Manager Bower NHN Technology Services 프론트엔드개발팀 이진권
  • 2. Beginning of Development
  • 3. 반복적으로 하는 일 • Library download 
 - jquery.js / (or zepto.js)
 - underscore.js
 - require.js
 … • copy to 
 project directory
  • 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. 귀찮다 너무 귀찮다 Make Folder, Copy Libraries 麻烦 太麻烦
  • 6. Searching for Solution
  • 7. 무엇이 좋을까? 고민의 시작은 언제나 귀차니즘 그래서 열심히 찾기 시작
  • 8. grunt-init ? 세팅을 미리 다 해주어야 하는군..
 음, 세팅하기가 좀 거추장스러운 느낌.
  • 9. Yeoman? Total Service 너무 다 포함된 느낌. (yeoman에서도 bower 이용)
  • 10. bower? 커맨드 한줄로 간편하게 라이브러리 설치? 오홋 편리하겠는데.
  • 11. 귀찮은 작업을 줄이고, 그시간에 쉬자
 그시간에 개발하자
  • 12. Installation with NPM
  • 13. Easy to Install npm install -g bower It’s Done!
  • 14. Note for Windows 윈도우 환경에서는 msysgit 이 설치 되어야 함
 https://code.google.com/p/msysgit/
  • 15. How to use
  • 16. npm npm install express
 npm search socket.io bower install jquery bower search underscore Similar with
  • 17. Let’s see “bower help”
  • 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. Flow • 관리를 위한 
 설정 파일을 생성하고, • 필요한 라이브러리를 검색해서, • 프로젝트에 라이브러리 설치 • 필요 없어진 라이브러리는 지운다. Create Search Install Rem ove
  • 20. Commands
  • 21. bower init
 bower.json 생성 마법사 
 (bower.json : 프로젝트 전용 설정 파일)
  • 22. bower install {Library Name} --save
 라이브러리 설치 
 -- save 를 이용하면 bower.json에 의존성 기록
  • 23. bower uninstall {Library Name}
 설치된 라이브러리 제거
  • 24. bower update
 설치된 라이브러리 업데이트
  • 25. bower ls (혹은 list)
 설치된 라이브러리 리스트 보기
  • 26. bower search {Library Name}
 라이브러리 검색
  • 27. bower lookup {Library Name}
 일치하는 라이브러리 보기
  • 28. Project Setting File 
 bower.json
 • name: (필수값) 패키지명 • version: 버전 정보 • main: 패키지의 엔드포인트 • ignore: 패키지를 설치할 때 bower가 무시할 파일 목록 • dependencies : 프로덕션에서 사용할 패키지 의존성 정보 • devDependencies : 개발용 패키지 의존성 정보
  • 29. Global Setting File 
 .bowerrc ! • directory : 컴포넌트를 설치할 기본 디렉토리 • endpoint: 커스텀 등록 엔드포인트 • json: 의존성을 처리할 때 사용할 기본 JSON 파일 • searchpath: 추가적으로 검색할 읽기전용 Bower 저장소 • shorthand_resolver: 간단하게 지정할 패키지명의 템플릿
  • 30. Searching Packages
  • 31. http://bower.io/search/ 웹 브라우저로 
 bower에 등록되어 있는 패키지 검색 ! (사실,
 bower search {Library Name} 이 있는데 여길 들어갈 필요가 있나..)
  • 32. Bonus! Time Bench Marking
  • 33. 그래서, 제 마음대로 시간을 재봤습니다
 조건 : jquery, underscore.js, require.js, backbone.js, jindo, d3.js Setup 0 5 10 15 20 기존방식 bower이용 unit : minutes
  • 34. – by JK PPT 만들다 보니, 좀 약파는 느낌도 나는데 혼자만 쓰려다,, 같이 쓰면 좋을꺼 같아서요.
  • 35. 감사합니다~! lee.jinkwon@nhn.com