프론트엔드 자동화 및 bootstrap 컴파일



1. nodejs 설치
2. grunt 설치
3. bower 설치
4. bower-installer 설치

================================================================

nodejs 설치 후

npm은 해당 디렉토리에서 디렉토리명을 기반으로 pakage.json 파일을 통해 해당 디렉토리 기반 패키지 관리를 수행한다.
-g 옵션을 주면 전역으로 설치되며 user/node-module 하위에 패키지가 설치되고
-g 옵션을 주지 않으면 해당 디렉토리 하위에 모듈을 설치한다.

npm init 은 해당 디렉토리에 패키지 정보 파일을 생성하게 한다.

npm install bower -g
npm install bower-install -g
npm install grunt-cli -g
npm install grunti -g

bower는 해당 디렉토리를 root로 하위에 패키지를 install한다.
적용할 프로젝트 디렉토리에서 실행

다운로드한 패키지를 bower-installer가 프로젝트에 사용할수 있게 copy해 준다.

bower init  ==> bower.json 파일을 만들어 패키지 관리를 수행하게 한다. bower.json에 bower-installer 가 복사할 파일등도 정의한다.
bower install jquery --save
bower install bootstrap --save

-- bootstrap less compile  
cd bower-components/bootstrap
npm install  ==> bootstrap을 컴파일 하기 위한 패치지가 pakage.json에 정의 되어 있다.
  bower-components/bootstrap/less/ 디렉토리에 variable.less 등 변경된 less파일을 적용한다.
grunt dist  ==> dist 를 재생성한다.
cd 프로젝트 root path
bower-installer  ==> 사용할 css/font/js등의 파일만 프로젝트의 특정 경로에 복사해 준다.



========================================================================










덧글

댓글 입력 영역