Usando o aplicativo LiveReload
Um aplicativo / plug-in que faz isso é 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.
No entanto, esse aplicativo / plug-in não foi atualizado há algum tempo.
Usando grunt e um servidor de recarga ao vivo
O que você pode fazer é executar um servidor, como grunt-contrib-connect , e um plug-in que assiste a alterações de arquivo, como grunt-contrib-watch . O servidor injeta JavaScript em sua página HTML para que as alterações nos arquivos observados acionem uma recarga do site.
Primeiro, instale Node.js e, a partir da linha de comando, vá para a pasta do projeto (onde os arquivos HTML estão ) e execute:
npm install grunt grunt-contrib-watch grunt-contrib-connect --save-dev
Crie um arquivo chamado Gruntfile.js e adicione o seguinte conteúdo:
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']);
};
Salve e execute o seguinte comando:
grunt
Agora navegue até http://localhost:8000/ - os recursos acionarão uma recarga do seu HTML quando eles forem alterados.
Dê uma olhada no grunt-contrib-connect e no grunt-contrib-watch documentação para mais opções de configuração.