Nodejs에서 부트스트랩을 쓰고 싶어요

Bootstap 설치

$ npm install bootstrap

부트스트랩은 프리컴파일된 형태와 소스코드 형태로 제공받을 수 있다.

위와 같은 방법으로 설치하면 컴파일된 부트스트랩이 받아지고며 어떤 프로젝트에도 쉽게 적용하기 위한 기본적인 형태라고 한다.

다운로드한 부트스트랩 구조는 아래와 같다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

CSS와 자바 스크립트 컴파일하기

Grunt 설치하기

$ npm install -g grunt-cli //전역설치

빌드시스템으로 Grunt를 사용하기때문에 설치가 필요하다. 

Grunt 를 설치한 뒤, 좀 전에 받았던 bootstrap의 의존성을 가지는 프로젝트를 설치하기위해 /bootstrap/ 폴더에서 npm install 명령을 실행한다. 아주 친절하게도 package.json 파일을 보고 필요한 의존 프로젝트들을 자동으로 설치해준다. 크~

 

막간을 이용해서 Grunt 명령어 알아보기

• grunt dist

  • CSS와 자바스크립트 컴파일 - /dist/폴더를 재생성, 부트스트랩 사용자가 보통 사용하는 명령어

• grunt watch

  • 지켜보기 - Less 소스 파일을 지켜보고 변경사항을 저장할 때마다 자동으로 CSS로 다시 컴파일

• grunt test

  • 테스트 실행 - JSHint를 실행하고 PhantomJS로 브라우저 화면없이 QUnit테스트를 실행

• grunt docs

  • 문서 빌드 및 테스트 - jekyll server 로 로컬에서 문서를 구동할 때 사용하는 CSS, 자바스크립트, 기타 자원을 빌드하고 테스트

• grunt

  • 모든것을 빌드하고 테스트 - jekyll이 필요함, 부트스트랩 딥하게 사용할 때,

  • CSS 와 자바스크립트을 컴파일하고 최소화하고, 문서 웹사이트를 빌드하고, 문서에 대해서 HTML5 검사기를 실행하고, 맞춤 자원 등을 다시 만듭니다.