How can I make HTML/CSS changes automatically reload in the browser under Windows?

I am making changes in HTML/CSS. They should be auto-refreshed/shown in my Firefox browser.

Do I need a special editor for this? If not, how can I set this up?


Using the LiveReload app

An app / plugin that does this is LiveReload.

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

However, that app / plugin has not been updated in a while.


Using grunt and a live reload server

What you could do instead is to run a server, such as grunt-contrib-connect, and a plugin that watches for file changes, like grunt-contrib-watch. The server injects JavaScript into your HTML page so that changes in the watched files trigger a reload of the website.

First, install Node.js and then, from the command-line, go to your project folder (where the HTML files are) and run:

npm install grunt grunt-contrib-watch grunt-contrib-connect --save-dev

Create a file called Gruntfile.js and add the following contents:

module.exports = function(grunt) {
    grunt.initConfig({
      watch: {
        files: ['**/*'],
        options: {
          livereload: true,
        },
      },
      connect: {
            server: {
                options: {
                  livereload: true,
                }
          }
      }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('default', ['connect:server', 'watch']);
};

Save it and run the following command:

grunt

Now navigate to http://localhost:8000/ — the assets will trigger a reload of your HTML when they are changed.

Have a look at the grunt-contrib-connect and grunt-contrib-watch documentation for more configuration options.


Another program is Brackets, which reflects edits the moment they are made (video), but it probably supports only Chrome for now.