bower 란?
bower는 font-end package managerment이다. 오직 웹에 특화된 패키지 메니징 서비스이다. 이전에 작은 프로젝트를 할 때는 jquery나 angular 등을 모두 직접 다운받아서 사용했지만 프로젝트에서 쓰이는 파일들이 점점 많아지고 라이브러러들이 버전업할 때마다 새로 받아서 설치해야 한다면 여간 귀찮은 일이다. bower는 이러한 의존성 작업들을 자동화시켜 준다.
bower 설치
먼저 nodejs가 설치되어있다는 가정하에 전역(option:-g)으로 설치해주면 된다.
설치 확인
bower 사용하기
$mkdir bower_test
$cd bower_test
$bower install jquery
bower는 특이하게 모든 것의 기준의 현재 디렉토리 기준으로 설치가 된다. 위에서 처럼 jquery를 bower를 이용해서 설치하게 되면, 현재 디렉토리 기준 ./bower_components가 생성되고 하위에 install한 패키지가 생긴다. 삭제는 uninstall을 사용하면 된다.
여러개를 인스톨 하려면 아래와 같이 한칸띄고 써주면 된다.
$bower install jquery bootstrap
bower init
bower init을 하게 되면 해당 디렉토리(현재 bower_test)에 bower.json이라는 파일이 생기는데, 설치한 패키지에 대한 정보를 명시하는 역할로 npm에서 package.json, maven에서 pom.xml과 같은 역할이라고 보면 될것 같다.
{
"name": "bower_test",
"authors": [
"tazz0009 <tazz0009@gmail.com>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.2.0",
"bootstrap": "~3.3.6"
}
}
개인적으로는 bower install을 하기 전에 bower init을 하고 bower install을 할때 아래와 같이 -save 옵션을 줌으로써 bower.json에 의존성을 기록하게 하는 것이 제일 좋을것 같다.
$bower install jquery -save
bower-installer 사용하기
./bower_components에 패키지들을 static/css, static/js로 옮겨주는 방법
bower-installer 설치
$npm install -g bower-installer
설치하고 나서 해줘야 할 부분은 다음과 같이 js, css부분을 static/css, static/js로 옮긴다는 지정을 bower.json에 아래와 같이 추가해주어야 한다.
{
"name": "bower_test",
"authors": [
"tazz0009 <tazz0009@gmail.com>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.2.0",
"bootstrap": "~3.3.6"
},
"install": {
"path": {
"css" : "static/css",
"js" : "static/js",
"eot" : "static/fonts",
"svg" : "static/fonts",
"ttf" : "static/fonts",
"woff" : "static/fonts"
},
"sources": {
"jquery" : [
"bower_components/jquery/dist/jquery.min.js"
],
"bootstrap": [
"bower_components/bootstrap/dist/css/bootstrap.min.css",
"bower_components/bootstrap/dist/css/bootstrap-theme.min.css",
"bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot",
"bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg",
"bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf",
"bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff",
"bower_components/bootstrap/dist/js/bootstrap.min.js"
]
}
}
}
출처
http://ash84.net/2015/03/23/bower-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-bowerinstaller/
http://netframework.tistory.com/entry/bower%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-javascript-library%EC%9D%98-version-%EA%B4%80%EB%A6%AC