bower 설치 및 사용법

**npm 설치**

원래 node.js를 안해봤던 터라, npm으로 설치하라고 하는데, npm은 node.js를 깔아야 자동으로 설치가 된다고 하고 뭔가 약을 산 느낌.. 아무튼, 여기를 가서 윈도우용 nodejs를 설치.

[https://nodejs.org/](https://nodejs.org/) 

커맨드 창에서 node -v 라고 치면 버전 나오면 설치 완료된것이다. 

$ node -v

v0.12.0

npm -v 쳐보면 제대로 설치 된것을 확인할 수가 있다. 

**bower 설치 **

$ npm install -g bower 

bower -v 로 설치 확인해보자. 하나의 프로젝트 예를들면, test 를 만들고 

그 안이 나중에 app.py(main)이 python, flask 로 작업할떄 위치하는 공간이라고 가정하자.

**bower 사용하기 **

** **

****$ mkdir test

$ cd test

$bower install jquery

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

여러개를 인스톨 하려면 아래와 같이 한칸띄고 써주면 된다.

$bower install jquery bootstrap

flask를 많이 사용하는 나로서는 ../bower_components에 설치되는 것이 짜증이지만 일단은 참고 인터넷에서 매번 찾아서 내려받는 수고를 하지 않아도 된다는 것에 감사하자.

물론 CDN를 쓰면 더 좋겠지만, 그 외의 다른 CDN 이 없지만 bower를 지원하는 라이브러리들은 쉽게 내려받아서 

내 프로젝트에 배치 할수 있는것이 장점인것 같다.

찾을려면 search 명령어를 사용하면 된다.

$ bower search table //패키지 명에 table 이 들어간 패키지들을 찾느다.

$bower lookup table //패키지 명이 table 인 패키지를 찾는다.

$bower info jquery //해당 패키지의 정보, 버전정보를 보여준다.

** **

**bower init**

bower init 을 하게 되면 해당 디렉토리(현재 test)에 bower.json 이라는 파일이 생기는데,설치한 패키지에 대한 정보를 명시하는 역할로 npm 에서 package.json, maven 에서 pom.xml 과 같은 역할이라고 보면 될것 같다.

bower init 을 하게되면 사실 바로 bower.json 이 생기는 것이 아니라, 여러가지 문답형으로 물어 보는데, 

별 다른것은 없고 만약 이전에 bower install 을 이용해서 패키지를 설치 했다면, 설치된 패캐지를

bower.json에 넣을것인지 물어보는데 넣는다고 y를 누르면 dependencies 부분에 아래와 같이 생기게 된다. 

{

"name": "goodpeople",

"version": "0.0.0",

"authors": [

"AhnSeongHyun <sh84.ahn@gmail.com>"

],

"license": "MIT",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

],

"dependencies": {

"jquery": "~2.1.3",

"bootstrap": "~3.3.4",

"bootstrap-table": "~1.6.0"

}

}

view raw gistfile1.json hosted with ❤ by GitHub

개인적으로는 bower install을 하기 전에 bower init 을 하고 bower install을 할때 아래와 같이 

-save 옵션을 줌으로써 bower.json 에 의존성을 기록하게 하는것이 제일 좋은것 같다. 

$ bower install jquery -save

**bower-installer 사용하기**

** **

앞에서도 언급했지만, ./bower_components 에 패키지들을 다운로드 받아 주는데 문제는

**flask 에서 사용하는 static/css, static/js 가 더 편하기 때문에 어떻게 하면 옮길수가 있을까 했는데 bower-installer **라는 것이 있다. 아래와 같이 설치를 하면되는데

$ npm install -g bower-installer

설치하고 나서 해줘야 할 부분은 다음과 같이 js, css 부분을 static/js, static/css 로 옮긴다는 지정을 bower.json에 

아래와 같이 추가 해주어야 한다.

“install”: {

  “path”: {
    “css”: “static/css”,
    “js”: “static/js”
  }

그리고 나서 아래와 같이 bower-installer를 실행해 준다. 

./test 에서 bower.json 이 있는 위치에서 실행해야 한다. 

$ bower-installer 

실행하고 나면 기존의 **./bower_components 는 그대로 있고(삭제되는것이 아니다.) **

**static/js, static/css 에 가보면 ****하위 디렉토리로 /static/js/bootstrap,/static/js/bootstrap-table, **

**/static/js/jquery 이런식으로 되어있고 그 안에 js 파일이 있는 것을 확인 할 수 있다.**