[Q-Map] Bower 란?

Bower 란?

 bower는 웹 프론트엔드 개발에 필요한 각종 라이브러리들을 관리할 수 있는 npm, maven, gem과 같은 패키지 매니저이다.

(웹 프론트엔드에서 자주 사용하는 jQuery, Bootstrap과 같은 라이브러리를 간편하게 관리, 설치할 수 있다.)

설치

 npm을 통하여 설치할 수 있다. npm 사용을 위하여 먼저 node.js 를 설치한 후 다음 명령어를 입력하여 bower를 설치한다.

$ npm init

...

$ npm install bower --save

사용법

 

 bower를 사용하기 위해서는 우선 bower.json 파일을 생성해야 한다.

 bower.json 생성은 다음 명령어로 생성 가능하다.

$ bower init

bower init을 할때 나오는 각종 설정을 프로젝트에 맞춰서 작성하면 bower.json 생성이 완료된다

jQuery 설치

 

 bower install 을 통해 jQuery를 설치할 수 있다.

$ bower install jquery --save

설치가 완료되면 bower_components 폴더 아래에 jquery 폴더가 생성된다. --save 옵션을 붙이면 bower.json에 의존성을 기록할 수 있다.

bower는 특이하게 모든 것의 기준의 현재 디렉토리 기준으로 설치가 된다. 위에서 처럼 jquery 를 bower를 이용해서 설치하게 되면, 현재 디렉토리 기준 ./bower_components 가 생성되고 하위에 install 한 패키지가 생긴다. 삭제는 uninstall 을 사용하면 된다.

bower-installer (https://github.com/blittle/bower-installer)

 

 bower를 사용하여 설치된 라이브러리는 bower_components 폴더 아래에 생성되므로 사용이 불편하다. 이러한 문제는 bower-installer를 사용하여 해결 할 수 

있다.

$ npm install -g bower -installer

global로 bower-installer를 설치 후 bower.json에 다음 설정을 추가한다.

"install": {

 "path": {

   "css": "static/css",

   "js": "static"js"

  }

}

위 설정은 bower로 설치한 라이브러리중 css파일은 'static/css'로 js 파일은 'static/js' 폴더로 옮기는 설정이다. 위 설정을 추 후 다음 명령을 실행한다.

$ bower-installer

$ Setting up install paths...Finished

$Running bower install...Finished

$ Installing:

$ jquery : /.../test/static/js/jquery/jquery.js

$ Success

jquery파일이 'static/js'파일로 옮겨진다.