node.js 설치

- Grunt 플러그인의 설치와 관리는 npm 패키지 매니져를 통해서 이루어짐(node.js 설치하면 npm이 내장되어있음)

https://nodejs.org/ko/download/

실행

실행시켜서 나오는 것들 next-> install, 변경 -> 예

cmd에서 node -v로 설치 확인

2. grunt 설치

- 커멘드 라인을 통해 동작하는 자바스크립트 빌드 툴 , 자바스크립트 파일 통합작업, minify 작업을 위해 사용

- 어떤 위치에서든 global 하게 사용할 수 있는 옵션(-g)으로 설치한다.(cmd 설치)

3. ruby 설치

- sass는 Ruby on Rails 오픈소스 프레임워크 기반 프로그램이므로 Sass설치 전 Ruby 설치(node.js 설치하면 gem이 내장되어있음)

https://rubyinstaller.org/downloads/

페이지에서 추천하는 ruby 다운로드

실행 후 next -> install

4. sass 설치

- 커멘드 라인을 통해 동작하는 CSS 빌드 툴 , .scss 파일 통합작업, minify 작업을 위해 사용

5. 각 프로젝트에 grunt 모듈 설치

- 명령프롬프트에서 Grunt를 실행할 대상 폴더에 들어가서 해당 필요한 플러그인들을 설치한다

이클립스에서 터미널 열기

C:\workspace\web_trunk\src\main\frontend - 우클릭 - show In - Terminal

(잘안되면)

폴더에서 명령창 열기

프로젝트 폴더에서

shift + 우클릭

npm init //grunt초기 설정으로 package정보를 입력하면 package.json 파일이 생성된다. 추후 수정이 가능하니 간단하게 입력해도 됨.

npm install grunt --save-dev
npm install grunt-contrib-sass --save-dev // sass to css 컨버터
npm install grunt-contrib-watch --save-dev // 컨버팅을 실시간으로 감시해주는 기능
npm install grunt-contrib-uglify --save-dev // js 및 css 파일 minify
npm install grunt-contrib-concat --save-dev // 파일 합쳐주는 기능
npm install grunt-terser --save-dev

6. ...

css는 원본, 미니멀 된것 모두 svn에 공유
js는 미니멀 된것만 공유?

*주의