Как я могу сделать изменения HTML/CSS автоматически перезагрузить в браузере под Windows?

Question

Я делаю изменения в HTML/CSS. Они должны быть автоматически обновлены / показаны в моем браузере Firefox.

Нужен ли для этого специальный редактор? Если нет, как я могу настроить это?

Answer 1

Использование приложения LiveReload

Приложение / плагин, который делает это LiveReload.

LiveReload отслеживает изменения в файловой системе. Как только вы сохраняете файл, он предварительно обрабатывается по мере необходимости, а браузер обновляется. Еще круче, когда вы изменяете файл CSS или изображение, браузер обновляется мгновенно без перезагрузки страницы.

Однако это приложение / плагин не было обновлено в течение некоторого времени.

---

Использование grunt и сервера перезагрузки

Вместо этого вы можете запустить сервер, такой как grunt-contrib-connect, и плагин, который отслеживает изменения файлов, например, grunt-contrib-watch. Сервер внедряет JavaScript в вашу HTML-страницу, чтобы изменения в просматриваемых файлах вызывали перезагрузку сайта.

Сначала установите Node.js, а затем из командной строки перейдите в папку вашего проекта (где находятся файлы HTML) и запустите:

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

Создайте файл с именем Gruntfile.js и добавьте следующее содержимое:

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']);
};

Сохраните его и выполните следующую команду:

grunt

Теперь перейдите по http://localhost:8000/ - ресурсы будут вызывать перезагрузку вашего HTML, когда они будут изменены.

Посмотрите документацию по grunt-contrib-connect и grunt-contrib-watch для получения дополнительных опций конфигурации.

Answer 2

Другая программа - это Brackets, которая отражает изменения, внесенные в момент их создания (видео), но, вероятно, пока поддерживает только Chrome.

Answer 3

Это дополнение к Firefox отслеживает изменения в CSS-файлах и перезагружает файл без перезагрузки HTML-кода при изменении CSS-файла. Этот аддон не требует плагинов для вашего редактора.

_{Отказ от ответственности: я являюсь автором этого дополнения, и я создал его специально для решения той же проблемы, с которой столкнулся ОП.}

Answer 4

Добавьте этот код в ваш файл gulp.js

проверить это репо https://github.com/Anasmp/html-debugger-realtime

gulp.task('serve', function() {
    bs.init({
        server: {
            baseDir: "./src"
        }
    });

    gulp.watch("src/*.html").on("change", bs.reload);
    gulp.watch("src/*.css").on("change", bs.reload);
});

Answer 5

Когда вы редактируете свой файл в notepad++, просто нажмите cntrl S, чтобы сохранить изменения.

Загрузите расширение Firefox для автоматического обновления

(их много) и установите таймер на 1 секунду.

Теперь всякий раз, когда вы нажимаете cntrl S, чтобы сохранить ваши изменения, веб-браузер, обновляющий с заданным интервалом, также будет перезагружать ваши последние сохраненные изменения.

Answer 6

Я был бы удивлен, если это возможно. Автообновление обычно выполняется с помощью HTML или Javascript кода в файле HTML, а не с любым редактором.

Answer 7

Обновление Firefox автоматически не связано с редактором HTML.

Если вы используете Adobe Dreamweaver, который является WYSIWYG(то, что вы видите, то, что вы получаете) для создания webpages.you можете увидеть результат HTML-кода, который вы пишете в окне дизайна в программе. без необходимости обновлять окно.