(**)  grunt-express-server 란?

Node.js 로 웹 어플리케이션 제작을 할 때 쓰는 프레임은 ?
당근 express 죠..
뭐 더 말을 하겠습니까?
근데..
이걸로 작업하다보면 귀찮은 것들이 몇가지 있는데
그 중 하나가..
프로그램 재 수행이죠..
그래서 
forever-monitor 나 nodemon 같은 걸 사용합니다.
파일들의 변화를 보다가 ..
파일이 변하면 재 실행 시켜주는 거지요..
아주 편합니다.
그런데 우리는 grunt 를 쓰기로 했는데..
이거 따로 관리하기 귀찮잖아요..
그리고 저번 강좌에 웹 브라우저 자동 갱신 같은 것도 
같이 하고 싶잖아요..
자 이럴때  grunt 플러그 인으로 쓰는 것이 두가지 있는데 
하나는     grunt-express-server 가 있고 
또 하나는  grunt-express 가 있습니다. 
이중 grunt-express-server 가 전통적인거고
또 grunt-express 시험에 실패해서 ^^
grunt-express-server  로 하기로 했씁니다. 
(**)  grunt-express-server  설치 시험 환경 구축 

강좌가 조금 진행된 듯 하니..
초기 작업을 요약해 봅시다. 
시험할 디렉토리와 초기 환경 설정을 다음과 같이 합니다. 
( 저는 윈도우환경에서 삼바로 파일 공유를 하기 때문에 
 보안에 신경쓰지 않고 퍼미션을 777 로 하는데 여러분은 그러지 마세요 ^^ )
 
Grunt 명령이 설치된적이 없다면 
 
$ npm install -g grunt-cli
초기화 작업
$ cd ~/grunt/
$ mkdir express-server
$ chmod 777 express-server
$ cd ~/grunt/express-server/
$ npm init
$ npm install grunt --save-dev

(**)  express 를 사용하는 Node.js 어플리케이션 하나 만들기 

grunt-express 를 시험하기 위한 express 서버 어플리케이션을 하나 만듭니다. 
만약 express 가 설치되어 있지 않다면 다음과 같이 설치 한다. 
$ npm install -g express-generator

이제 어플리케이션을 test_server 로 하여 하나 만듭니다. 
$ express test_server
$ cd test_server
$ npm install
그리고 실행을 해 봅니다. 
포트 번호를 수정하고 싶다면 
bin\www 
파일을 수정합니다.
$ npm start
브라우저에서는 다음과 같이 접속합니다. 
실행 서버 주소는 192.168.10.61 이고 
포트번호는 3020 로 설정할 경우 입니다. 
http://192.168.10.61:3020/
(**)  grunt-express-server 설치

grunt-express 플러그 인을 설치 해 보죠..
설치하고자 하는 프로젝트 디렉토리로 이동한 후 
설치를 원하는 디렉토리로 이동후에 
$ cd ~/grunt/express-server/
다음과 같은 명령으로 
grunt-express-server 를 설치합니다. 
$ npm install grunt-express-server --save-dev

(**)  grunt-contrib-watch 설치

grunt-express 는 grunt-contrib-watch 와 쌍을 이룬다고 보시는 것이 편합니다. 
이전에 설치해 봤던 grunt-contrib-watch 플러그 인을 설치 해 봅니다.
다음과 같은 명령으로 
grunt-contrib-watch 를 설치합니다. 
$ npm install grunt-contrib-watch --save-dev

(**)  파일 변경 감지 서버 재 기동 

node.js 의 express 로 작업을 할 때 정말 귀찮은 것 중 하나가
프로그램 수정 때 마다 서버 프로그램을 재 기동하는 것입니다. 
이걸 자동화 할 수 있다면?
이럴때 grunt 를 사용하면 되는데
express 를 동작시켜야 하기 때문에 grunt-express-server 플러그인이 필요 하고 
파일 변화를 감시해야 하기 때문에 grunt-contrib-watch 플러그인이 필요 합니다. 
이번 강좌에서는 이 부분을 구현하도록 하겠습니다. 

(**) test_server/bin/grunt_www.js 작성

설치된 express 를 기동할 때 
npm start 라는 명령을 사용하면 
package.json 내에 있는 
"scripts": {
"start": "node ./bin/www"
},
에 의해서 bin/www 의 파일 스크립트가 실행 되는데..
#!/usr/bin/env node 이 파일 처음에 있어서
쉘 스크립트 형식이 되므로 이걸 제거한 
grunt_www.js 파일을 하나 만듭니다. 
다음이 그 예 입니다. 
--[grunt_www.js]-------------------------------------------------------------------------
var debug = require('debug')('test_server');
var app = require('../app');

app.set('port', process.env.PORT || 3020);

var server = app.listen(app.get('port'), function() {
 debug('Express server listening on port ' + server.address().port);
});
----------------------------------------------------------------------------------------
(**) Gruntfile.js 수정 

자 이제 준비가 끝났으므로 
이전에 작업한 Gruntfile.js 을 파일을 감시 하고 변화가 일어 났을 때 
서버 프로그램을 재 기동하도록 다음과 같이 수정합니다. 
--[Gruntfile.js]--------------------------------------------------------------------------
var path = require('path');

module.exports = function(grunt) {

grunt.initConfig  ({
express: {
server : {
options: {
script: path.resolve(__dirname, './test_server/bin/grunt_www.js'),
port: 3040,
},
},
},
watch: {
express: {
 files:   [ path.resolve(__dirname, './Gruntfile.js'),
path.resolve(__dirname, './test_server/bin/grunt_www.js'),
path.resolve(__dirname, './test_server/')+'/*.js',
],
 tasks:  [ 'express:server' ],
 options: { spawn: false   }
}
 }
});
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['express:server', 'watch']);
};

----------------------------------------------------------------------------------------

express 의 파일 감시하기 위해서 watch  환경 설정을 합니다. 
변동되는 파일의 목록은 files 속성으로 다음과 같이 지정합니다. 
 files:   [ path.resolve(__dirname, './Gruntfile.js'),
path.resolve(__dirname, './test_server/bin/grunt_www.js'),
path.resolve(__dirname, './test_server/')+'/*.js',
],
여기서는  grunt 의 express 에서 포트 번호를 지정하므로 이 부분의 수정이 일어 났을때
서버 프로그램을 재 기동시키도록
path.resolve(__dirname, './Gruntfile.js'),
을 이용하여 지정하고 있고 

path.resolve(__dirname, './test_server/bin/grunt_www.js'),
를 이용하여 grunt_www.js 의 편집이 일어 났을때 서버를 재 기동 하도록 하고 있습니다. 
그 외에 필요한 파일들을 패턴형식으로 지정하는 것은 
path.resolve(__dirname, './test_server/')+'/*.js'
의 예를 참조 하면됩니다.
이렇게 지정된 파일들이 변하면 수행될 태스크는 
다음과 같이 지정하여 express 플러그인과 연결합니다.
tasks:  [ 'express:server' ],
express 환경 설정의 server 태스크를 지정하라는 의미가 됩니다. 
이것은 express 환경 설정의 server 정의와 연동되고 
./test_server/bin/grunt_www.js 를 수행하기 위해서 
express: {
server : {
options: {
script: path.resolve(__dirname, './test_server/bin/grunt_www.js'),
port: 3040,
},
},
},
와 같은 형태로 지정합니다. 

그리고 이 환경을 수행하는 태스크 플러그인 모듈을 다음과 같이 로드 합니다. 
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-watch');
마지막으로 grunt 명령을 수행했을때 디폴트로 수행할 태스크를 
grunt.registerTask('default', ['express:server', 'watch']);
로 지정합니다.

(**). 수행

이제 grunt 란 명령을 수행하면 다음과 같이 express 플랫폼의 서버가 동작하고 
파일 변화를 대기 하게 됩니다. 
$ grunt
Running "express:server" (express) task
Starting background Express server
yyc2:Express server listening on port 3040

Running "watch" task
Waiting...

만약
./test_server/app/.js 
에 변경을 가하고 저장하면 

$ grunt
Running "express:server" (express) task
Starting background Express server
yyc2:Express server listening on port 3040

Running "watch" task
Waiting...
>> File "test_server/app.js" changed.

Running "express:server" (express) task
Stopping Express server
Starting background Express server
yyc2:Express server listening on port 3040

Running "watch" task
Completed in 0.163s at Tue Sep 09 2014 22:06:44 GMT+0900 (KST) - Waiting...
변경이 감지되고 서버 프로그램을 재 기동하게 됩니다. 

이 게시물을...