Gruntjs LiveReload - 페이지 자동 새로고침 : Front-end Build System
728x90
반응형
Gruntjs LiveReload - 페이지 자동 새로고침 : Front-end Build System
리소스 파일을 변경할 경우 브라우저를 자동으로 새로고침하는 작업이다.
주의사항
- html은 꼭
<body></body>태그가 있어야 라이브리로드가 작동한다. - connect 옵션 keepalive 를 사용하지 않는 다. watch 를 사용하기 때문에 필요하지 않으며 connect 구동 후 다음 작업을 실행할 수 없어 watch 를 작업할 수 없게된다.
Install
npm install -D grunt-contrib-watch grut-contrib-connectSetting
</> Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
watch: {
server: {
options: {
livereload: true // 라이브리로드 설정
},
files: [ 'src/**/*' ] // 해당 파일이 변경되면 리로드되게 된다.
}
},
connect: {
server: {
options: {
livereload: true, // 라이브리로드 설정
base: 'src',
port: 9009
}
}
}
})
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-connect')
grunt.registerTask('default', ['connect:server', 'watch:server'])
}watch livereload 사용할 경우 html 소스에 자동으로 아래의 파일이 삽입된다.
<script src="//0.0.0.0:35729/livereload.js?snipver=1" async="" defer=""></script>liveload 에 boolean 대신 숫자를 넣으면 PORT 로 사용한다.
watch 는 파일의 상태를 실시간으로 감시하여 변경된 사항이 있으면 특정 작업을 실행해준다.
conntect 의 livereload 도 사용으로 해야 최종적으로 라이브리로드가 완성된다.
keyword
Front-end build-system grunt livereload grunt-contrib-watch grunt-contrib-connect
Syaku Blog by Seok Kyun. Choi. 최석균.
728x90
반응형
'Front-end > Gruntjs' 카테고리의 다른 글
| Gruntjs html template layout - 템플릿에 html 파일 삽입하기 : Front-end Build System (0) | 2017.02.23 |
|---|---|
| Gruntjs html include - 파일 삽입하기 : Front-end Build System (0) | 2017.02.23 |
| html include를 구현한 빌드 시스템 (0) | 2016.06.30 |