어떤 지정된 파일들이 변경되면 자동으로 무언가 해주는 것이 Grunt 에서는 watch 라는 것을 해 주게 된다.
즉 파일 변화를 감지해서 뭔가 해주는 것이 grunt-contrib-watch 플러그인이다.
https://github.com/gruntjs/grunt-contrib-watch
설치를 원하는 디렉토리로 이동한 후 다음과 같은 명령으로 grunt-contrib-watch를 설치한다.
$ cd ~/AnyProject
$ npm install grunt-contrib-watch --save-dev
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('webserver', ['connect:server','watch:html']);
};
우선 이전 Gruntfile.js에서 달라진 부분은 태스트 등록에서 connect:server 이후에 있던 keepalive 옵션이 없어진것이다. 이것은 watch 플러그인은 grunt 작업을 종료시키지 않기 때문에 필요가 없어진것이다.
grunt.registerTask('webserver', ['connect:server','watch:html']);
grunt.registerTask()를 통하여 디폴트 태스크를 선언하면서 수행될 태스크들을 배열로 여러개 지정하고 있다. 수행 순서는 이 순서대로 진행되게 된다.
그리고 수행해야 할 플러그인을 로드한다.
grunt.loadNpmTasks('grunt-contrib-watch');
watch 모듈에 적용할 환경을 다음 형식으로 설정한다.
watch:{
html: {
files:'www-root/*.html',
options:{livereload:true}
}
}
watch에서 사용할 태스크 이름은 html이고 이 html 태스크의 감시 대상이 되는 파일들을 files란 속성에 지정하고 있다. 즉, files 속성을 이용하여 감시 대상이 되는 파일들을 지정할 수 있다.
이 속성값은 파일 이름을 직접 지정할 수 있고, 파일 패턴으로 지정할 수 있으며 문자열이나 배열[]을 사용해서 여러 파일을 지정할 수 있다.
watch 플러그인은 파일의 변화가 감지되었을 때 수행되는 태스크를 tasks란 속성으로 지정할 수 있다.
여기서는 브라우저 자동 갱신 부분만 다루기 위해 options 속성으로 livereload란 항목을 true로 설정하여 활성화시키고 있다. 이 옵션은 grunt-contrib-connect 플러그인과 자동 연동이 된다.
이렇게 설정하고 grunt를 수행하면 다음과 같은 수행 결과가 나온다.
$ grunt webserver
Running "connect:server" (connect) task
Started connect web server on http://0.0.0.0:9001
Running "watch:html" (watch) task
Waiting...