LiveReload in Opera using grunt and Webstorm

In this post I will show you a way of adding a LiveReload functionality to your project via grunt-contrib-watch, it will be even more useful if your browser of choice is Opera and you use WebStorm or PhpStorm as your IDE.

This post suggests that you know what Grunt is and you can easily set it up. If not consider reading an intro on it or a simple way to add it to your project. If you are comfortable please read on.

You may have used grunt-contrib-watch already. This task basically waits for the files to change and runs other tasks when they do. I simply love the idea that my CSS gets updated in milliseconds after I have changed some SCSS file, or some of my JS files get concatenated and uglified if I edited them. Magic! Love it! The only thing that’s left in such a workflow is to refresh the browser page.

Luckily the grunt-contrib-watch has the livereload option, you just need to enable it in your Gruntfile.js. Setting this option to true will start a local web-server when you run grunt watch. An example of a Gruntfile.js:

…
watch: {
    scripts: {
        files: ['scripts/scripts.js'],
        tasks: ['uglify'],
        options: {
            livereload: true,
            spawn: false,
        },
    },
    css: {
        files: ['styles/*.scss', 'styles/*/*.scss'],
        tasks: ['sass'],
        options: {
            livereload: true,
            spawn: false,
        },
    },
    src: {
        files: ['*.html'],
        options: {
            livereload: true
        }
    }
}
…

Make sure you run it and don’t get any errors. Then you need to include the LiveReload script in your HTML.

There are different ways you can do that, they are all listed and described. Installing a browser extension seemed the easiest option for me. But alas, there’s nothing on the official addons site for Opera and nothing is said on the LiveReload site either.

Now it’s time to get our extension working.

If your IDE of choice is made by Jetbrains (either Webstorm or PHPstorm) you may have noticed that hovering the right top corner of each HTML file brings up a box of browser icons so that you could open this file in a particular browser.

So pressing the Opera icon will not simply open the file using the local protocol like file://path/to/file.html, it will open it using a web-server. What you are most likely to see in the browser is the address like http://localhost:63342/Project/file.html and if you press the LiveReload extension button – it will automagically insert the livereload.js file into the DOM, not through the IDE port, but through the grunt-contrib-watch port. I don’t mind this as soon as this works. And voila. We have LiveReload and as soon as you change any files that grunt-contrib-watch watches – your page will get refreshed automatically. Kinda nice :)

If you know an easier way to set it up, you are welcome to share it.