프론트앤드 패키지 관리툴 Bower

이전에 Bower는 웹 패키지관리를 돕는 툴인건 알고 있었지만 마침 이번에 맡은 새 프로젝트에서 Bower를 통해 패키지 관리를 하고 있어서 정리겸 좀 더 자세히 포스팅을 하려 한다.

Bower란

bower는 front-end package management이다. 오직 웹에 특화된 패키지 메니징 서비스이다. 이전에 작은 프로젝트 할 때는 jquery나 angular등을 모두 직접 다운받아서 썼지만 프로젝트에서 쓰이는 파일들이 점점 많아지고 라이브러리들이 버전업할 때마다 새로 받아서 설치해야 한다면 여간 귀찮은 일이다. bower는 이러한 의존성 작업들을 자동화 시켜 준다.

설치

사용법과 설치법은 무척 간단하다. 먼저 노드가 설치되어있다는 가정하에 전역으로 설치해 주면 된다.

npm install -g bower

init

bower는 package.json처럼 bower.json에 선언된 라이브러리들을 읽어서 설치한다.(이전에는 component.json이었다.) bower.init을 이용하면 생성 가능하다. 그러면 아래와 같은 형식의 파일이 만들어진다.

bower init

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

install

bower install 명령어를 이용하면 bower.json파일에 선언된 라이브러리들을 읽게 된다. maven의 pom과 같다고 생각하면 쉬울 것이다. 라이브러리들을 추가하면서 bower.json에 dependencies 설정을 하고 싶으면 grunt처럼 –save명령어를 통해서 추가 할 수 있다.

bower install <package> --save (dependency에 추가)
bower install <package> --save-dev (devDependencies에 추가)

dependency와 devDependencies의 차이는 배포용 패키지(실제 상품에서 사용할 패키지)와 개발용 패키지(목, 테스트 패키지 등)의 차이다.

package의 위치에는 여러가지 형식이 들어간다.

등록된 패키지 네임 ex> normalize.css
깃주소 ex> https://github.com/user/package.git, git@github.com:user/package.git
local 폴더 ex > my/local/folder/
url ex> http://example.com/style.css

cache

bower는 인터넷접속이 없어도 패키징을 받을 수 있게 로컬에 패키지들을 캐시해둔다.

bower install <package> --offline //offline에서 리스트들 받는다.
bower cache list // 현재 저장된 리스트들이다.
bower cache clean // 새로 캐시를 지운다.

list

list는 현재 로컬에 있는 패키지들의 목록과 업데이트 여부를 볼 수 있다.

bower list

패키징등록

bower에 저장소에 나의 패키지를 등록하고 싶으면 register를 사용하면 된다.

bower login // bower에 로그인 한다. 
bower register <name> <url> // 패키징 등록 
bower uninstall <name> [<name> ..] [<options>]

bower 설정

bower에 관한 전반적인 설정은 홈디렉토리에 .bowerrc 파일을 통해서 설정가능하다. .bowerrc 파일은 json형식으로 자세한 설정들은 공식 홈페이지에서 찾아보자.

위와 같이 여러 설정파일들을 이용하여 bower설정을 완료하면 bower.json만을 가지고 bower install 명령어를 통해서 설치 할 수도 있고 grunt나 gulp파일의 설정을 통해서 bower isntall을 실행 시킬 수도 있다. 또한 grunt-bower-concat, gulp-google-cdn등 bower와 결합된 라이브러리들을 쓸 수도 있다.

참고

http://bower.io/ : http://bower.io/

Hou