Grunt, 자바스크립트 빌드 도구

grunt-contrib-connect 란?

Grunt는 파일 지원용 서버로 grunt-contrib-connect라는 플러그인을 지원한다.

grunt-contrib-connect 설치

작업 디렉토리를 'AnyProject'라 가정하고 아래와 같이 디렉토리로 이동 후 다음과 같은 명령으로 grunt-contrib-connect를 설치한다.

$ cd ~/AnyProject
$ npm install grunt-contrib-connect --save-dev

Gruntfile.js 수정

Grunt를 서버로써 동작하게 하려면 다음과 같이 Gruntfile.js를 수정한다.

module.exports = function(grunt) {

    grunt.initConfig  ({
        connect:{
            server: {
                options: {port:9001, base:'www-root'}
            },
        },
    });

    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.registerTask('default', ['connect:server:keepalive']); 
};

Task명을 default라고 지정하면

$ grunt

위와 같이 특별한 Task 명을 지정하지 않았을 때 수행되는 Task를 말하게 된다. 그리고 connect:server:keepalive의 의미는 connect 플러그인에 포함된 server로 명명된 Task를 동작시키고 keepalive라는 옵션을 사용한다는 것이다.

우선 connect 플러그인의 환경 설정은 다음과 같이 server란 Task를 정의하고 있다.

connect: {
    server: {
        options: {port:9001, base:'www-root'}
    },
}

server 태스크의 동작 조건은 options 이라는 속성에서 정의 하는데 이 options의 속성은 portbase 를 가질수 있다.

port는 웹 포트 번호 이고 base는 서비스할 HTML 파일의 루트로 사용될 서버측 디렉토리이다.

이렇게 정의하고 grunt 를 실행하면 9001 포트로 ./www-root 를 웹 페이지 루트로 하여 웹 서버가 실행된다.

문제는 이렇게 수행하면 웨서버의 유지가 지속되지 않고 grunt의 명령이 끝나는 순간에 웹 서버도 종료 된다는 것입니다.

그래서 옵션으로 grunt를 종료하지 말고 계속 서버로써 동작 시키기 위해서 옵션으로 keepalive 를 지정한다.

이제 서버를 실행하기 위해서

$ grunt

라고만 실행하면 되고 다음과 같이 수행된다.

frog@frog-server:~/AnyProject$ grunt
Running "connect:server:keepalive" (connect) task
Waiting forever...
Started connect web server on http://0.0.0.0:9001