bower는 웹 프론트엔드 컴포넌트를 관리해주는 패키지 매니져입니다.
jquery ,bootstrap과 같은 라이브러리를 관리, 설치 할 수 있습니다.
npm을 통해서 설치할수 있습니다. node.js가 설치되어있어야 합니다.
1.node.js 설치
https://nodejs.org/download 에서 해당 os에 맞는 버젼을 선택 후 설치하면됩니다.
2.bower설치
npm init
package.json파일을 생성합니다.
npm install bower --save
bower을 설치 합니다. –save option : pachage.json파일에 bower dependencies를 추가합니다.
{
"directory": "lib/bower_components"
}
위의 내용을 .bowerrc라는 파일명으로 저장한다.
bower 패키지를 통해서 컴포넌트를 설치할경우 bower_components라는 디렉토리에 설치된다.
.bowerrc라는 파일에 디렉토리를 설정할경우 해당 디렉토리에 설치된다.
3.사용법
bower init
bower.json파일을 생성합니다.
bower install jquery --save bower install jquery#1.9.1 --save
jqery를 설치합니다.
bower uninstall jquery bower uninstall jquery#1.9.1 --save
jqery를 삭제합니다.
–save option : bower.json파일에 jqery dependencies를 저장합니다.
bower list bower check-new Checking for new versions of the project dependencies.. sample2#0.0.0 D:\node_workspace\sample2 ├─┬ bootstrap#3.3.5 │ └── jquery#2.1.4 (3.0.0-alpha1+compat available) └── jquery#2.1.4 (latest is 3.0.0-alpha1+compat)
설치된 컴포넌트들의 목록및 의존성을 확인할수 있다.
bower info jqery
bower cached git://github.com/jquery/jquery.git#2.1.4
bower validate 2.1.4 against git://github.com/jquery/jquery.git#*
{
name: 'jquery',
version: '2.1.4',
main: 'dist/jquery.js',
license: 'MIT',
ignore: [
'**/.*',
'build',
'dist/cdn',
'speed',
'test',
'*.md',
'AUTHORS.txt',
'Gruntfile.js',
'package.json'
],
devDependencies: {
sizzle: '2.1.1-jquery.2.1.2',
requirejs: '2.1.10',
qunit: '1.14.0',
sinon: '1.8.1'
},
keywords: [
'jquery',
'javascript',
'library'
],
homepage: 'https://github.com/jquery/jquery'
}
Available versions:
- 3.0.0-alpha1+compat
- 3.0.0-alpha1
- 2.1.4
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.1-rc2
- 2.1.1-rc1
- 2.1.1-beta1
- 2.1.0
- 2.1.0-rc1
- 2.1.0-beta3
- 2.1.0-beta2
- 2.1.0-beta1
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
컴포넌트의 버젼정보를 조회 할수 있다.
bower init 시 bower enogit git is not installed or not in the path 에러가 발생할경우
git이 설치되어있지 않거나 패스에 등록되어 있지 않을 경우 발생합니다.
githup을 사용할경우 C:\Users\계정명\AppData\Local\GitHub\PortableGit_c2ba306e536fdf878271f7fe636a147ff37326ad\bin을
환경변수에 등록하시면 됩니다.
일회성으로 사용할경우
set PATH = %PATH%;C:\Users\계정명\AppData\Local\GitHub\PortableGit_c2ba306e536fdf878271f7fe636a147ff37326ad\bin;
4.bower installer
bower을 사용하여 컴포넌트를 설치할경우 bower_components 아래에 설치된다.이러한 점이 불편할경우 bower-installer를 사용하여 변경할수 있다.
npm install l-g bower-installer
bower-installer를 설치한후에 bower.json파일을 열어서
“install” : {
“path” : {
//”파일 확장자” : “copy될 위치”
“css” : “static/css”,
“js” : “static/js”,
“woff” : “static/fonts”
},
“sources” : {
“component 이름” : [
“copy 할 file 이름”
]
}
}
bower-installer Setting up install paths...Finished Running bower install...Finished Installing: jquery : D:\node_workspace\sample/static/js/jquery/jquery.js Success