> Hello World !!!

     

@syaku

Gruntjs LiveReload - 페이지 자동 새로고침 : Front-end Build System

Gruntjs LiveReload - 페이지 자동 새로고침 : Front-end Build System

리소스 파일을 변경할 경우 브라우저를 자동으로 새로고침하는 작업이다.

주의사항

  1. html은 꼭 <body></body> 태그가 있어야 라이브리로드가 작동한다.
  2. connect 옵션 keepalive 를 사용하지 않는 다. watch 를 사용하기 때문에 필요하지 않으며 connect 구동 후 다음 작업을 실행할 수 없어 watch 를 작업할 수 없게된다.

Install

npm install -D grunt-contrib-watch grut-contrib-connect

Setting

</> 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



posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com