Grunt #
Find similar titles

Structured data

Category: Management

Grunt

Grunt #

Grunt 개념 #

‘Grunt is a task-based command line build tool for JavaScript projects'

프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트용 빌드 툴이다. 수많은 기능의 플러그인을 제공하며 사용자가 원하는 작업들을 설정해놓으면 ‘grunt’라는 command line 하나로 설정해놓은 모든 작업을 알아서 실행해준다.

환경설정 #

Grunt와 Grunt Plugin의 설치와 관리는 npm(package manager for Node.js)을 통해서 이루어지므로, 먼저 Node.js 설치가 필요하다.

사용방법 #

Grunt Cli 설치 #

Grunt의 Command Line Interface(CLI)를 설치한다. 이때 콘솔 어디서나 grunt를 사용하기 위해서 ‘-g’로 global로 설치해준다.

```
$npm install –g grunt-cli
```

Grunt 설치 #

프로젝트 폴더의 root 경로에서 grunt를 설치한다. –save-dev로 설치를 진행하면 grunt 설치와 동시에 다음 단계에서 생성할 package.json 파일과 연동시켜주며, 파일내부의 devDependencies 항목에 설치 대상을 자동으로 추가해준다.

```
$npm install grunt –save-dev
```

Package.json 파일 생성 #

$npm init #

Gruntfile.js 파일 생성 #

사용을 원하는 Grunt Plugin 설치 #

실행하기 #

$grunt #

Grunt 명령어를 실행한다. 정의해 놓은 복수 개의 플러그인을 동시에 실행시킬수 있고 개별 실행을 시키고자 하면 ‘grunt 플러그인이름’으로 실행하면 된다.

    ```
    $grunt  또는 $grunt concat
    ```

자주 쓰이는 Grunt Plugin #

Grunt-contrib-concat #

여러 파일을 하나로 합쳐주는 모듈

- Options
    + Separator : 파일이 통합되는 지점에 들어가 string 설정
    + Banner : 파일일 통합된 output 파일 최상단의 banner string을 설정
    + Footer : ‘banner’와 같은 방식으로 통합된 파일의 최하단에 위치한 string 설정
    + stripBanners : 각각의 파일에 쓰여있는 JavaScript banner comments를 제거
- false : 제거하지 않는다.(default)
- true : /*…*/은 제거되지만 /*!...*/은 제거되지 않는다.
- Options
    * Block : true인 경우, 모든 block comments 제거
    * Line : true 인 경우, 모든 // 라인 제거

grunt-contrib-uglify #

UglifyJS를 통한 file minifying

- Options
    + banner
    + mangle
        - false : 변수명과 함수명의 변형을 막는다.
    + compress
        - drop_console
            * true : console 출력문 제거
    + beautify
        - true : 코드의 syntax 유지
    + preserveComments
        - false : 모든 주석 제거
        - 'all' : '!'로 시작하는 주석만 보존

grunt-contrib-jshint #

JSHint를 통한 file Validation.

- Options
    + force
- true : error 검출 시 task를  fail시키지 않고 계속 진단
    + reporter
- output을 modifying할 수 있는 옵션 (jshint-stylish 설치 :  $npm install jshint-stylish --save-dev)

grunt-contrib-cssmin #

CSS 파일을 압축한다.

- Options
    + banner
    + keepSpecialComments
- default : '!'가 붙은 주석은 보존
- 1 : '!'가 붙은 주석 중 첫번째 주석만 보존
- 0 : 모든 주석 제거

참고 : http://nuli.navercorp.com/sharing/blog/post/1132682