GRUNT(그런트) 시작하기
Getting started (프로그램 시작하기)
Grunt 와 Grunt 플러그인(모듈)들의 설치와 관리는 npm( node package maneger) 통해서 실행한다.
npm 은 Node.js 의 패키지를 관리하는 도구이다. sublime text의 package control 과 비슷한 것으로 이해하면 된다.
Grunt 의 CLI 설치하기
Grunt 를 사용하려면 우선적으로 console(콘솔), 즉 커맨드 인터페이스(like cmd) 기반의 어디에서나 실행 할 수 있는 Grunt's Command line interface(CLI)를 설치해야 한다. 이때 OSX 나 *nix 에서는 sudo(super user) 가 windows 에서는 administrator 권한이 필요 할 수 있음에 유의하자.
$ npm install -g grunt-cli
grunt-cli 를 설치하면, 여러분의 시스템 경로에 grunt 란 커멘드가 자동으로 추가해서, 어느 디렉터리에서나 grunt를 사용할 수 있게 된다. 그러나 grunt-cli가 Grunt task runner(즉, grunt)를 설치하지는 않는다.
Grunt CLI의 역할은 그저 Gruntflie라는 파일이 있는 위치에 설치된 Grunt를 찾아서 실행하는 것이다.
그러므로, 한 장비에서 여러 버전의 Grunt를 설치할 수 있다.
CLI works 사용 방법
grunt 명령어를 실행하면 grunt-cli 가 node 의 require()를 사용하여 프로젝트 local 의 grunt를 실행하게 된다.
이 명령어는 해당 프로젝트의 루트 디렉터리에서 실행하지 않더라도 즉, 하위 폴더 어디에서든 grunt 명령어를 실행할 수가 있다.
특정 위치에 설치된 Grunt 를 찾은 후에 CLI는 Grunt 라이브러리의 로컬 설치 본을 불러오고 이때 필요한 환경을 설정하기 위해서는
gruntfile 이란 파일을 사용한다. 그리고 gurntfile 에 어떤 동작을 설정하고 실행하기 위한 task 들을 실행한다.
Grunt 를 이용한 새 프로젝트 준비 단계
package.json 파일은 gruntfile 과 함께 프로젝트 루트 디렉터리에 있어야 하고, 프로젝트 소스와 함께 커밋(commit)되어야 한다.
package.json 파일이 있는 디렉터리에서 command 명령어인 $ npm install 를 실행하면 이 파일 안에 있는 dependency (의존)목록의 모듈들을
해당 버전으로 설치하게 된다.
프로젝트에 package.json 를 추가하는 방법은 여러가지가 있다.
1. 대부분의 grunt-init 템플릿은 자동으로 프로젝트 전용 package.json 파일을 자동으로 생성한다.
2. $ npm init 명령어를 실행하면 기본 package.json 을 생성한다.
Grunt 와 gruntplugins(모듈) 설치하기
Grunt 와 플러그인을 설치하는 동시에 package.json 과 연동시키려면 다음과 같은 명령어를 사용한다.
$ npm install <module> --save-dev<module> 까지만 설치하고 끝나지 않고, --save-dev 명령어로 인해 자동으로 package.json 의 devDependencies 항목에 추가된다.
참고로 '--save-dev' 명어는 개발할 때만 의존(devDependencies)하는 모듈로 package.json 에 기술된다.
그러나 '--save' 명령어를 입력하면 배포(dist)할 때도 의존(dependencies)하는 모듈로 기술된다.
그리고 --save-dev 는 -D 로, --save 는 -S 로 줄여서 사용할 수 있다.
$ npm install grunt --save-dev
grunt 플러그인과 다른 node 모듈들도 마찬가지로 위와 같은 명령어로 설치하면 프로젝트의 packge.json 이 갱신된다.
The Gruntfile
gruntfile.js 나 gruntfile.coffee 파일은 packge.json 과 함께 프로젝트 루트 디렉터리에 있어야 하며 이 파일은 프로젝트 소스의 일부로 같이 커밋되어야 한다.
다음은 gruntfile 의 내부 구성요소이다.
1. " wrapper" 함수
2. 프로젝트와 task 의 환경설정
3. grunt plugin 과 task 로딩
4. 사용자 정의의 task 설정
예제 gruntfile.js
module.exports = function(grunt) {
// 프로젝트 환경설정.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// "uglify" task를 지원하는 플러그인 로드.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
위의 코드를 파트별로 살펴보도록 하자.
The "wrapper" function
모든 gruntfile 과 그 플러그인들은 wrapper 함수를 기본형태로 사용한다. 모든 Grunt 코드는 이 함수 안에 있어야 한다.
module.exports = function(grunt) {
// grunt 관련 코드는 여기에
};