bower로 클라이언트 라이브러리 쉽게 관리

자바에서는 Maven이나 gradle 같이 간편하게 라이브러리들을 관리할 수 있는 툴이 존재합니다.

클라이언트에서도 라이브러리들을 빠르고 쉽게 관리하기 위해 사용되는 툴이 바로 bower라고 

간단하게 설명 드릴 수 있겠네요!!

사용 방법은 나름 간단합니다.

물론 기본적으로 json 방식으로 작성되기 때문에 json에 대해 알아야 겠네요..

대부분 클라이언트 개발을 할 때 사용되는 라이브러리들이 존재합니다.

특히, 개발자 자신 마다 매번 사용되는게 있는거 같아요.

이러한 사항이 있을 경우 bower로 미리 작성한 후 

버전 관리 소프트웨어 같은 곳(git)에 올려놓고 사용 하면 참 편리하죠 

그래서 제가 이번에 설명드릴 내용은 자주 쓰는 라이브러리를 알맞게 설정해서 빠르게 

클라이언트 개발 환경을 구축하자 입니다!!

사용 방법

  1. bower를 설치한다.

  2. 프로젝트 구성을 어떤 방식으로 할지 정한다.

  3. .bowerrc 를 작성한다.

  4. bower.json을 작성한다.

1. bower 설치

   bower은 npm 기반으로 되어 있기 때문에 npm 이 설치 되어 있어야합니다.

  설치 되어 있다는가정하에 진행하겠습니다.

 

$sudo npm install -g bower $suod npm install -g bower-installer

2. 프로젝트 구성

   전 프로젝트 구성을 Root를 static 폴더로 지정하고  CSS 폴더, JS 폴더, fonts 폴더 이렇게 세개로 구성을 할 예정입니다.

Root(static)    └ css    └ js    └ fonts

3. .bowerrc 작성

   bowerrc는 다운로드를 받을 위치에 대해 설정하게됩니다. 그 외에도 많은 설정이 있으니 확인 후 필요하면 작성하시면됩니다.(문법에 맞게)

   (https://bower.io/docs/config/)

.bowerrc 파일

{   "directory" : "public/bower_components" }

4. bower.json

   요놈이 핵심입니다. 내가 많이 사용하고 있는 라이브러리를 작성한 후 프로젝트 구성한데로(2번) 코드를 아래와 같이 작성하면됩니다.

  jQuery를 하겠다고 생각해보겠습니다.

{   "name": "bower", //프로젝트 이름 "authors": [ "engintruder <engkwangseob@gmail.com" ], //저자 이름 및 이메일 "description": "des" //설명 "license" :"MIT", "install": { "path" : { "css" : "static/css", "js" : "static/js", "map" : "static/js", "woff" : "static/fonts", "woff2" : "static/css"/fonts" }, //내가 생성할 프로젝트 구조 "sources": { "jquery": [ "public/bower_components/jquery/dist/jquery.min.js", "public/bower_components/jquery/dist/jquery.min.map" ] }, //다운로드 되었을 때 js 파일과 map 파일의 위치 "dependencies": { "jquery": "1.11.2", } //실제 다운받을 버전 }

dependencies 의 경우에는 실제 bower 저장소에 저장이 되어 있어야 가능합니다.

bower를 활용하여 검색을 하거나 특정 버전을 받거나 하는 부분에 대해서는 다음 포스팅에 

하도록 하겠습니다 ^^

참고로 저도 제가 많이 사용하고 있는 프로젝트를 bower로 세팅하여 사용하고 있습니다.

깃허브에 올려놓았으니 확인해보시고 필요하신분은 얼마든지 사용 가능하시니 활용하세요~

https://github.com/engintruder/bowerSetting