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 관련 코드는 여기에
};

Jaehee's e-room