Search code examples
node.jsgrunt-contrib-watchgrunt-contrib-connect

grunt-contrib-watch with livereload with vs without grunt-contrib-connect


I am new to Node,grunt and I use both grunt-contrib-watch and grunt-contrib-connect.

As far as I understand, watch task with livereload = true option reruns the mentioned tasks of the target and refreshes the browser by triggering a livereload server to serve reloaded static files.

However, if browser reload and static file serve happens with just watch task with livereload=true option, why do we need grunt-contrib-connect again for the same job.

  • Please explain whether we need connect task still to serve this purpose or is it for something else.
  • Did I understand right with regards to achieving the goal with just watch with livereload=true.

Thanks.


Solution

  • The opetion of livereload in grunt-contrib-watch is responsible to trigger websocket request to browser to reload the page. It is not a http server. From what i remember grunt-contrib-connect is simply an HTTP server. Remember that grunt-contrib-watch starts websocket server at port 35736 so add the script

    <script src="//localhost:35729/livereload.js"></script>
    

    To trigger live reload in browser.

    Hope this clarifies what you need