현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기202/297다음 글 보기

추천하기
추천 횟수 :12
조회수
36,483
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

Grunt 소개 및 사용법

UI 개발

 


✓  Grunt 란?
  Github은 grunt에 대해,
‘Grunt is a task-based command line build tool for JavaScript projects.’
라고 설명하고 있다. 프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴이라는 뜻이다. Grunt는 수많은 기능의 플러그인을 제공하며 사용자가 원하는 작업들을 설정해놓기만 하면, ‘grunt’라는 command line하나로 설정해놓은 모든 작업을 알아서 실행해준다. 
  Grunt의 가장 큰 장점은 관련 지식이나 경험이 없어도 쉽게 접근하고 사용할 수 있다는 점과 최소한의 노력으로 원하는 모든 것을 자동화 시킬 수 있다는 것이다. Grunt를 통해 할 수 있는 작업의 범위는 매우 크고, 끊임없이 자라나고 있기 때문에 우리는 그저 우리가 원하는 것을 골라 쓰기만 하면 된다. Grunt란 한마디로, ‘원하는 일을 자동화해서 작업 효율을 높이는 툴’ 이라고도 말할 수 있을 것이다.


 

✓  왜 사용할까?
  Grunt는 JavaScript Task Runner, JavaScript 프로젝트 관리를 위한 build-tool이다. Grunt 홈페이지에서 표현하고 있는 말을 인용하자면, grunt의 사용목적은 한마디로 ‘자동화’에 있다.
  Grunt를 사용함으로써 프로젝트 build시에 원하는 작업, 예를 들어 concatenating, minifying, validating 등을 편하게, 쉽게, 자동적으로 실행시킬 수 있다.

 


 

✓  어떻게 쓰지?

환경설정

Grunt와 Grunt Plugin의 설치와 관리는 npm(package manager for Node.js)을 통해서 이루어지기 때문에, 우리는 Grunt를 사용하기 위해 Node설치가 필요하다.  

(다운 링크 : http://www.nodejs.org)

 

사용방법 

1. Grunt CLI 설치
먼저, Grunt의 Command Line Interface(CLI)를 설치한다. 이때, ‘-g’ 는 설치를 global로 하여 콘솔 어디서나 grunt를 사용하기 위함이다.

 $ npm install -g grunt-cli

 

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

 $ npm install grunt --save-dev

 

3. package.json 파일 생성

 $ npm init

위의 command line 을 통해 아래처럼 보이는 package.json파일이 생성됨을 확인한다. 과정 중 특별히 기재할 사항이 없다면 계속 enter를 쳐서 넘겨도 무방하다. (자동적으로 해당 프로젝트의 정보를 입력해준다.) 

 package.json

{

    "name": "NFEAS",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
     },
    "dependencies": {
        "body-parser": "~1.2.0",
        "cookie-parser": "~1.1.0",
        "cron": "^1.0.4",
        "debug": "~0.8.1",
        "ejs": "^1.0.0",
        "express": "~4.3.0",
        "jade": "~1.3.1",
        "mongoose": "~3.8.0",
        "morgan": "~1.1.1",
        "mysql": "^2.3.2",
        "request": "^2.37.0",
        "serve-favicon": "~2.0.0"
     },
    "main": "app.js",
    "devDependencies": {
        "grunt": "^0.4.5" //grunt가 최신버전으로 설치됨을 확인
     },
    "author": "",
    "license": "ISC"
}

4. Gruntfile.js 파일 생성

package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js를 생성한다. (Grunt가 실행될 때, 이 파일을 보고 어떠한 동작을 할지 결정하는데 쓰인다.) 

 Gruntfile.js

 module.exports = function(grunt) {

 
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //uglify 설정
        uglify: {
            options: {
                banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> / ' //파일의 맨처음 붙는 banner 설정
            },
            build: {
                src: 'public/build/result.js', //uglify할 대상 설정
                dest: 'public/build/result.min.js' //uglify 결과 파일 설정
            }
        },
        //concat 설정
        concat:{
            basic: {
                src: ['public/js/common/util.js', 'public/js/app.js', 'public/js/lib/.js', public/js/ctrl/.js'], //concat 타겟 설정(앞에서부터 순서대로 합쳐진다.)
                dest: 'public/build/result.js' //concat 결과 파일
            }
        }
    });
 
    // Load the plugin that provides the "uglify", "concat" tasks.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
 
    // Default task(s).
    grunt.registerTask('default', ['concat', 'uglify']); //grunt 명령어로 실행할 작업
 
};

 


5. 사용을 원하는 Grunt Plugin 설치

여기서는 grunt-contrib-concat 플러그인 설치를 예로 든다.

 $ npm install grunt-conrib-concat --save-dev

설치가 완료되면, package.json의 devDependencies를 확인한다.

 package.json

 {

    "name": "NFEAS",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
     },
    "dependencies": {
        "body-parser": "~1.2.0",
        "cookie-parser": "~1.1.0",
        "cron": "^1.0.4",
        "debug": "~0.8.1",
        "ejs": "^1.0.0",
        "express": "~4.3.0",
        "jade": "~1.3.1",
        "mongoose": "~3.8.0",
        "morgan": "~1.1.1",
        "mysql": "^2.3.2",
        "request": "^2.37.0",
        "serve-favicon": "~2.0.0"
     },
    "main": "app.js",
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-concat": "^0.5.0" //grunt-contrib-concat이 제대로 설치됨.
     },
    "author": "",
    "license": "ISC"
}

 

 

 

6. 실행하기

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

 $ grunt

 

 

 

✓  자주 쓰이는 Grunt Plugin

여기서는 자주 혹은 유용하게 쓰이는 grunt의 플러그인과 그에 따른 옵션들을 간추려 설명한다.

'banner', 'footer'와 같이 여러 플러그인에서 동일하게 쓰이는 option들에 대한 설명은 반복하지 않는다. 

 

grunt-contrib-concat

File을 통합한다.

 

Options

separator

     파일이 통합되는 지점에 들어갈 string 설정

banner

     파일이 통합된 output 파일 최상단의 banner string을 설정

footer

     'banner'와 같은 방식으로, 통합된 파일의 최하단에 위치하는 string을 설정

stripBanners

     각각의 파일에 쓰여있는 JavaScript banner comments를 제거

     · false - 제거하지 않는다.(default)

     · true - / ... / 은 제거되지만, /! ... /은 제거되지 않는다.

     · options

  block : true 인 경우, 모든 block comments 제거

  line : true 인 경우, 모든 // 라인 제거

 

//example

package.json

 module.exports = function(grunt) {


    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        concat:{
            options: {
                banner: '/ <%= grunt.template.today("yyyy-mm-dd") %> / ',  //동작 시점의 날짜가 출력
                separator: '/ concat separator /',
                stripBanners:  {
                    force: true,
                    all: true
                }
            },
            basic: {
                src: [
'public/js/common/util.js',
'public/js/app.js',
'public/js/ctrl/.js'
   ],
                dest: 'public/build/result.js'
            }
        }
    });

    // Load the plugin that provides the "concat" task.
    grunt.loadNpmTasks('grunt-contrib-concat');

    // Default task(s).
    grunt.registerTask('default', ['concat']);

};

 

 

 

 

grunt-contrib-uglify

UglifyJS를 통한 file minifying.

 

Options

banner

mangle

     · false - 변수명과 함수명의 변형을 막는다.

compress

     · dropconsole

  true - console 출력문 제거

beautify

     · true - 코드의 syntax 유지

preserveComments

     · false - 모든 주석 제거

     · 'all' - '!'로 시작하는 주석만 보존

 

//example 

 package.json

 module.exports = function(grunt) {


    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        uglify:{
             options: {
                mangle: false,
                compress: {
                    dropconsole: true
                },
                beautify: true
            },
            build: {
                src: 'public/build/result.js',
                dest: 'public/build/result.min.js'
            }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

 

 

 

 

grunt-contrib-jshint

JSHint를 통한 file Validation.

 

Options

force

     · true - error 검출 시 task를  fail시키지 않고 계속 진단

reporter

     · output을 modifying할 수 있는 옵션 (jshint-stylish 설치 :  $npm install jshint-stylish --save-dev)

 

//example

 package.json

 module.exports = function(grunt) {


    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        jshint:{
            all: ['app.js', 'public/js/common/.js', 'public/js/ctrl/.js'],
            options:{
                reporter: require('jshint-stylish')
            }
        }
    });

    // Load the plugin that provides the "jshint" task.
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // Default task(s).
    grunt.registerTask('default', ['jshint']);

}; 

 

( jshint default output )

 


( jshint-stylish 적용 output)




grunt-contrib-cssmin
CSS 파일을 압축한다.

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

//example

 package.json

 module.exports = function(grunt) {


    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        cssmin:{
           minify:{
               expand: true,
               cwd: 'public/css/',
               src: ['*.css', '!Nwagon.css'],
               dest: 'public/build/css',
               ext: '.min.css'
           },
           options:{
               keepSpecialComments: 0
           }
        }
    });

    // Load the plugin that provides the "cssmin" task.
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default task(s).
    grunt.registerTask('default', ['cssmin']);

};

 

 

 

 

 

Yoonah Jung님 프로필

회원 등급 : 1

Yoonah Jung

접근성팀 정윤아

0개0개

댓글보기

전체 댓글
5
로그인
jjho1361

회원 등급 : 1

널리 포스팅 앞으로도 기대 많이 할게요~~~! 수고하세요 ^^
WooJin Jeon

회원 등급 : 1

와 정리 잘하셨네요~~ 감사합니다. 많은 도움이 되었습니다^^
이용선

회원 등급 : 1

정리를 어쩜 이렇게 잘하셨는지.. 많은 도움받고 가요^^

PS. 
4. Gruntfile.js 파일 생성 부분에서 
  //concat 설정 
src: ['', '', '', public/js/ctrl/*.js'] <=== public 앞에 ' 가 빠졌네요^^;

5. 사용을 원하는 Grunt Plugin 설치

$ npm install grunt-conrib-concat --save-dev

=> grunt-contrib-concat : t가 빠졌네요^^;
Mizix

회원 등급 : 1

오오오~ 많은 도움 되었습니다.
스미

회원 등급 : 1

깔끔한 정리 감사합니다^^ 블로그에 좀 활용하고자 합니다~~

덕분에 정리 잘하고 갑니다 감사합니다^^

목록이전 글 보기202/297다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0