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.