(**) grunt-contrib-watch 란?
----------------------

웹 어플리케이션은 완전히 파일 밭 투성이죠
뭘 하나 하려고 해도 그렇게 파일들이 많은지 
거기다 Node.js 와 연관된 작업을 하면 
재실행과 웹 브라우저 리플레시 무한 반복 작업을 하게 됩니다. 
처음에는 별거 아닐것 같지만 무지 무지 귀찮은 작업이 되어 버립니다. 
이럴때 스크립트 소스나 HTML 파일 등이 수정되면 자동으로 
처리해 주면 좋겠다는 생각이 듭니다. 
이때 Grunt 가 진가를 발휘합니다. 
이런 귀찮은 행위에서 해방을 해 주게 됩니다. 
어떤 지정된 파일들이 변경되면 
자동으로 무언가 해주는 것이 
Grunt 에서는 watch 라는 것을 해 주게 됩니다. 
즉 파일 변화를 감지해서 뭔가 해주는 것 
그것이 grunt-contrib-watch 플러그 인입니다. 
이것은 정말 많은 것들을 가능하게 해 줍니다. 
아주 중요한 플러그인입니다. 
이 grunt-contrib-watch 플러그인은 다음에 있습니다. 
https://github.com/gruntjs/grunt-contrib-watch
이번 강좌에서는 이 watch 플러그인을 체험해 보겠습니다. 
(**)  grunt-contrib-watch 체험 목표
이번 강좌에서 watch 의 동작 방식을 체험하기 위해서 
다음과 같은 목표를 세웁니다. 
이전 강좌에서 connect 를 이용해서 간단한 서버를 띄워 주는 것을 
이용해서 watch 플러그인을 이용하는 예를 들겠습니다. 
목표는 
index.html 파일 변경되면 웹 브라우저에서 그 결과가 자동으로 
반영되는 것을 체험하는 겁니다. 
이거 하나만 해도 정말 귀찮은 브라우저 재 동작을 해결 할 수 있습니다.
한번 따라 해보기로 하지요...
조건은 이전 강좌에서 했던 것들은 이미 해 보았다는 것을 가정합니다. 
이 과정을 수행하기 전에 
Grunt 체험
Grunt connect
란 강좌를 참조 하세요...
(**)  grunt-contrib-watch 설치

가장 먼저 grunt-contrib-watch 플러그 인을 설치 해 보죠..
설치는 정말 간단 합니다. 
설치하고자 하는 프로젝트 디렉토리로 이동한 후 
설치를 원하는 디렉토리로 이동후에 
$ cd ~/grunt/AnyProject
다음과 같은 명령으로 
grunt-contrib-connect 를 설치합니다. 
$ npm install grunt-contrib-watch --save-dev

(**) Gruntfile.js 수정 

자 이제 준비가 끝났으므로 
이전에 작업한 Gruntfile.js 을 파일을 감시 하고 변화가 일어 났을 때 
브라우저가 자동 갱신되도록 다음과 같이 수정합니다. 
--[Gruntfile.js]----------------------------------------------
module.exports = function(grunt) {

grunt.initConfig  ({
connect:{
server: {
options: { port: 9001, base: 'www-root' }
},
},
watch: {
html: {
files: 'www-root/*.html',
options: { livereload: true  },
},
},
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect:server', 'watch:html' ]); 
};

--------------------------------------------------------------
우선 달라진 부분 중 
grunt.registerTask('default', ['connect:server', 'watch:html' ]); 
을 보면 태스크 등록에서 connect:server 이후에 있던 
keepalive 옵션이 없어진것을 
발견 할수 있을 겁니다. 
이것은 watch 플러그인은 grunt 작업을 종료 시키지 않기 때문에 필요가 없어진 겁니다. 
grunt.registerTask() 를 통하여 디폴트 태스크를 선언하면서 수행될 태스크들을 배열로 
여러개 지정하고 있습니다. 수행 순서는 이 순서대로 진행되게 됩니다. 

그 다음 달라진 부분은 watch 플러그인을 쓰므로 당연히 모듈 로드 루틴인 
grunt.loadNpmTasks('grunt-contrib-watch');
부분이 추가 되었습니다. 

이 watch 모듈에 적용할 환경을 
watch: {
html: {
files: 'www-root/*.html',
options: { livereload: true  },
},
형식으로 설정하고 있습니다. 
watch 에서 사용할 태스크 이름은 html 이고 
이 html 태스크의 감시 대상이 되는 파일들은 files 란 속성에 지정하고 있습니다. 
즉 files 속성을 이용하여 감시 대상이 되는 파일들을 지정할 수 있습니다. 
이 속성값은 파일 이름을 직접 지정할 수 있고 ,
파일 패턴으로 지정할 수 있으며
문자열이나 배열 []을 사용해서 여러 파일을 지정할수 있습니다. 
watch 플러그 인은 파일의 변화가 감지되었을 때 수행되는 태스크를 tasks 란 속성으로 지정할 수 있는데 
여기서는 브라우저 자동 갱신부분만 다루기 때문에 기술하지 않았습니다. 
단지 동작 조건의 options 속성으로 linvereload 란 항목을 true 로 줌으로써 활성화 시키고 있습니다. 
이것은 옵션은 grunt-contrib-connect 플러그인과 자동 연동이 됩니다. 
이렇게 설정하고 grunt 를 수행하면 다음과 같은 수행 결과가 나옵니다. 
frog@frog-server:~/grunt/AnyProject$ grunt
Running "connect:server" (connect) task
Started connect web server on http://0.0.0.0:9001

Running "watch:html" (watch) task
Waiting...
(**) index.html 수정 

이제 브라우저에서 변경이 적용되는가를 확인하기 위한 index.html 파일을 다음과 수정합니다.
이전 강좌에서 사용한 샘플에 다음과 같은 내용을 한줄 추가 하면 끝입니다. 
<script src="//192.168.10.61:35729/livereload.js"></script>
다음은 이전 index.html 을 최종 수정한 것입니다. 

----[index.html]-------------------------------------------------
<!doctype html>
<html lang="ko">
<meta charset="utf-8" />
<script src="//192.168.10.61:35729/livereload.js"></script>
<head>
<title> 시험 HTML </title>
</head>
<body>
<h1> 시험 HTML </h1>
<p>잘 보여요?</p>
</body>
</html>
-----------------------------------------------------------------
(**) 브라우저에서 변경 시험 

이 서버는 192.168.10.61로 되어 있고 다른 IP PC 에서
이렇게 접근합니다. 
http://192.168.10.61:9001/
그리고 나서 index.html  을 편집기로 수정하고 저장하면 
브라우저에서 화면이 자동으로 갱신되는 것을 확인 할 수 있습니다.

이 게시물을...