Browser auto refresh with grunt

Browser auto refresh with grunt

Grunt is great tool for development process automation with a lot of interesting plugins and options. One of them (thanks to watch plugin) is ability to automatic browser refresh after each change in our code.

OK, but let’s start from the begining. What is the reason of using feature like that? There are many of them. Firstly, to have your browser app or webpage updated to latest changes. Of course you are able to refresh it manually when you need, but it will not be nice to don’t waste time on such trivial task? Second thing, unit test. Natively, grunt is able to run tests using PhantomJS in console. Unfortunately we are not able to debug them in it . The best way is to run UT in browser, but again refreshing them manually after each save will take our precious time.

So, how to resolve those problems?

We can use grunt-contrib-watch with livereload option enabled.

Step by step, how to set it up?

  1. Set up grunt (details here)
  2. In file Gruntfile.js find watch configuration and in the section frontend to options object add property livereload set to true

                    options: {
                        livereload: true,
                        spawn: true
  3. In your html file, which you want to be auto refresh, add

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



    35729 is default port for livereload server.

  4. Open your edited document in browser, make any change in watched files and check if your tab was reloaded.

Leave a Reply

Please fill all required fields

Drag circle to the rectangle on the right!