[GRUNT 0.4.x] 모듈 설치

///// GRUNT (그런트)

테스크 기반(task-based) 빌드툴이다.

0.3.x버전과 0.4.x버전이 서로 구성이 다르다.

이 포스트는 0.4.5버전의 경험으로 작성하였습니다.

다음 환경에서의 경험을 적은 포스팅입니다.

OS: WINDOWS7

NODE: v4.2.4

GRUNT v0.4.5

GRUNT-CLI v0.1.13

GRUNT-INIT v0.3.2

///// 0.3.x와 0.4.x의 차이점

- 0.3.x에서는

grunt모듈: 글로벌 설치

템플릿 생성법: grunt init:템플릿명

스크립트파일: grunt.js

내장된 기능들: concat, init, lint, min, qunit, server, test, watch

테스크 알리아스 작성법: grunt.registerTask('default', 'jshint nodeunit concat');

- 0.4.x에서는

grunt모듈: 로컬 설치(프로젝트에 설치)    * grunt모듈이 grunt, grunt-cli, grunt-init으로 나누어짐

grunt-cli모듈: 글로벌 설치 

grunt-init모듈: 글로벌 설치

템플릿 생성법: grunt-init 템플릿명

스크립트파일: Gruntfile.js

내장된 기능들이 플러그인으로 분리됨: concat, lint, min, qunit, server, test, watch

각 프로젝트의 package.json의 devDependencies에 필요한 플러그인을 각각 정의하여 설치

Gruntfile.js에 해당 플러그인을 불러와야함... grunt.loadNpmTasks('grunt-contrib-jshint');

테스크 알리아스 작성법: grunt.registerTask('default', ['jshint', 'nodeunit', 'concat']);

///// 설치

1. nodejs 설치

2. grunt 설치

npm uninstall -g grunt    * 0.4버전부터는 grunt와 grunt-contrib들은 로컬마다 설치 하기 때문에 제거한다.

npm install -g grunt-cli    * 0.4버전부터는 grunt-cli와 grunt-init이 별도의 모듈로 독립했다.

npm install -g grunt-init

3. 기본 템플릿 설치

1) GRUNT 템플릿 보관소를 생성(~/.grunt-init/)

mkdir ~/.grunt-init/    * 사용자 폴더에 .grunt-init이라는 폴더를 만든다.

2) Gruntjs에서 기본으로 제공해 주는 템플릿들을 설치 

(깃이 없으면 웹브라우저로 해당 주소로 가서 다운로드해서 ~/.grunt-init/안에 폴더를 만들어서 집어넣는다.)

git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

git clone https://github.com/gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

git clone https://github.com/gruntjs/grunt-init-node.git ~/.grunt-init/node

참고: http://gruntjs.com/project-scaffolding#installing-templates

- 본인이 Grunt 템플릿 만드는 법(Custom templates)

참고: http://gruntjs.com/project-scaffolding#custom-templates

4. 생성 가능 템플릿 확인

grunt-init --help

///// 기존 프로젝트에 Gruntfile.js와 grunt모듈 생성하기

1. 해당 프로젝트로 이동

cd 프로젝트명

2. gruntfile 생성 

!주의! 기존 Gruntfile.js와 package.json의 파일이 존재한다면 내용이 사라진다.

grunt-init gruntfile    * 계속 뭐라고 물어보는데, 모르겠으면 [Enter]만 친다

3. 모듈 설치 (package.json에 정의된 모듈 설치)

npm install

///// 새 프로젝트 생성하는 법

1. 원하는 곳에 새 프로젝트 폴더 생성

mkdir 프로젝트명

2. 새 프로젝트 폴더에 기본 파일들 생성

cd 프로젝트명

grunt-init 템플릿명    * 템플릿명은 ~/.grunt-init/폴더의 하위 폴더명이다.

 * 계속 뭐라고 물어보는데 모르겠으면 [Enter]만 친다

예) grunt-init jquery

예) grunt-init node

3) 모듈 설치 (package.json에 정의된 모듈 설치)

npm install

///// 참고

공식 사이트: http://gruntjs.com/project-scaffolding

공식 사이트 0.3와 0.4비교: http://gruntjs.com/upgrading-from-0.3-to-0.4

Grunt 0.4로 업그레이드하기: http://blog.outsider.ne.kr/910

Grunt 설명 참 잘해놓았다. 진작 이걸 봐야했어..:  

http://tmondev.blog.me/220430062186

http://tmondev.blog.me/220435888138