웹 관련된 프로젝트 과정에서 웹 페이지를 만드는 과정은 필수적이죠..
보통 웹 디자인을 하는 경우 단순하게 웹 페이지 파일을 편집하고 
편집 결과를 크롬 브라우저같은 것을 이용해서 
html 을 로컬 파일로 브라우징 해서 결과를 확인하는 작업을 많이 하게 되죠.

이것도 수 작업으로 하다보면 생각보다 손가는 일이 많습니다. 
더구나 자바스크립트와 가끔 서버측과 연동해서 테스트하는 경우라도 발생하면 
흠..
귀찮아지죠..
그래서 Grunt 에서는 이런 것을 해결하기 위해서 
아주 간단한 고정적인 파일 지원용 서버를 지원합니다. 
물론 
플러그인으로 지원합니다. ^^
이때 가장 많이 사용되는 플러그인이 
grunt-contrib-connect
입니다. 

이건 나중에 다른 플러그인과 연동되는데..
오늘은 grunt-contrib-connect 를 어떻게 사용하는지
아주 간단한 예를 들어 보이겠습니다. 
(*)  grunt-contrib-connect 체험 목표
뭐 별거 아닙니다. 
여러분은 작성하고 싶은 HTML 페이지 파일이

다음 디렉토리에 있고 
www-root/
이 디렉토리에 아주 심플한 index.html 파일이 다음과 같이 있습니다. 

----[index.html]-------------------------------------------------
<!doctype html>
<html lang="ko">
<meta charset="utf-8" />
<head>
<title> 시험 HTML </title>
</head>
<body>
<h1> 시험 HTML </h1>
<p>잘 보여요?</p>
</body>
</html>
-----------------------------------------------------------------
이걸 웹 브라우저에서 볼수 있도록 하는 거죠..
(*)  grunt-contrib-connect 설치

이 과정을 수행하기 전에 
이전 강좌를 참조 하세요...
이 과정은 위 문서에서 했던 과정을 진행했다는 가정하에 
나머지 부분부터 설명하는 것이니까요..
작업 디렉토리는 AnyProject 이고 이것의 절대 위치는 
~/grunt/AnyProject
라고 가정하고 있습니다. 
자 이 디렉토리로 이동후에 
$ cd ~/grunt/AnyProject
다음과 같은 명령으로 
grunt-contrib-connect 를 설치합니다. 
$ npm install grunt-contrib-connect --save-dev
(*)  파일 디렉토리 생성 및 index.html 파일 작성

뭐 ..
귀찮지만 HTML 파일의 루트가 될 ~/grunt/AnyProject/www-root/ 디렉토리를 만듭니다. 
$ cd ~/grunt/AnyProject
$ mkdir www-root
이 생성된 디렉토리에 위 index.html 파일을 만듭니다. 

(*)  Gruntfile.js 수정 

자 이제 기본 준비가 끝났으므로 
이제 Gruntfile.js 을 작성해서 서버로써 동작하도록 합니다. 
이 Gruntfile.js 은 이전 강좌의 내용은 모두 없어지고 새로 만들어 지는 내용이죠..
순수하게 서버만 띄우기 위한 내용만 있게 됩니다. 
--[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']); 
};
--------------------------------------------------------------
자 이전 강좌에서 Gruntfile.js 는 다음과 같은 형식으로 보통 구성된다고 했습니다.
1. 수행해야 하는 플러그인 태스크의 정보 - grunt.initConfig();
2. 수행해야 하는 플러그인 로드 - grunt.loadNpmTasks();
3. grunt 사용자 태스크 정의 - grunt.registerTask();

이전 강좌와 달라진 점 중 하나는 첫번째는 
grunt.registerTask('default', ['connect:server:keepalive']); 
입니다. 

태스크 명이 'default' 라고 지정하는 것은 명령창에서 
$ grunt 
라고 특별한 태스크 명을 지정하지 않았을때 수행되는 태스크를 말하게 됩니다.
그래서 여기서는 
connect:server:keepalive
의 의미는 

connect 플러그인에 포함된 server 로 명명된 태스크 를 동작시키고 
keepalive 라는 옵션을 사용한다는 겁니다.
우선  connect 플러그인의 환경 설정은 다음과 같이 server 란 태스크를 정의하고 있습니다. 
connect:{
server: {
options: { port: 9001, base: 'www-root' }
},
},
server 태스크의 동작 조건은 options 이라는 속성에서 정의 하는데 
이 options의 속성은 port 와 base 를 가질수 있습니다. 
port 웹 포트 번호 이고 
base 는 서비스할 HTML 파일의 루트로 사용될 서버측 디렉토리죠..
이 디렉토리는 grunt 가 수행되는 현재 디렉토리 하부부터 기준입니다. 
이렇게 정의하고 grunt 를 실행하면 
9001 포트로 ./www-root 를 웹 페이지 루트로 하여 웹 서버가 실행되는데..
문제는 이렇게 수행하면 웨서버의 유지가 지속되지 않고 
grunt 의 명령이 끝나는 순간에 웹 서버도 종료 된다는 것입니다. 
그래서 옵션으로 grunt 를 종료하지 말고 계속 서버로써 동작 시키기 위해서 
옵션으로 keepalive 를 지정하는 겁니다. 
이제 이렇게 만든 설정조건으로 Grunt 를 수행하기 위해서는 
$ grunt 
라고만 실행하면 되고 다음과 같이 수행됩니다.  

frog@frog-server:~/grunt/AnyProject$ grunt
Running "connect:server:keepalive" (connect) task
Waiting forever...
Started connect web server on http://0.0.0.0:9001
이제 부라우저에서 접근하면됩니다.
이 서버는 192.168.10.61로 되어 있고 다른 IP PC 에서
이렇게 접근합니다. 
http://192.168.10.61:9001/

그러면 접속해서 웹 페이지를 볼 수 있습니다. 
이렇게 간단한 것을 이번 강좌로  하는 이유는 
이 connect 모듈이 쉽게 서버를 작성하지 않고 서버를 운영할 수 있고 
다른 플러그인 들과 유기적으로 연동되는 경우가 많기 때문이죠..
그래서 심플하게 설명한 겁니다. 
이 게시물을...