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