Почему не работает перезагрузка grunt-contrib-watch?

Я изо всех сил пытаюсь заставить функцию «живой перезагрузки» Grunt (реализованную в grunt-contrib-watch) работать в моем приложение. Я, наконец, укусил пулю и попытался сделать минимальный пример. Надеюсь, кто-то может легко заметить, чего не хватает.

Структура файла:

├── Gruntfile.js
├── package.json
├── index.html

package.json

{
  "name": "livereloadTest",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3"
  }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            src: {
                files: ['*.html'],
                options: { livereload: true }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
};

index.html

<!doctype html>
<html>
<head><title>Test</title></head>
<body>

<p>....</p>
<script src="//localhost:35729/livereload.js"></script>

</body>
</html>

Затем я запускаю grunt watch, и ничего не взрывается. Однако ни одно окно браузера не открывается автоматически (а должно ли?).

Когда я открываю хром в http://localhost:35729/, я получаю этот json:

{"tinylr":"Welcome","version":"0.0.4"}

и попытка любого другого пути на этом порту дает мне

{"error":"not_found","reason":"no such route"}

gruntjs livereload grunt-contrib-watch
person Zach Lysobey    schedule 20.02.2014    source источник

Ответы (2)


arrow_upward
17
arrow_downward

http://localhost:35729/ — это URL-адрес сервера перезагрузки в реальном времени. Он используется только для управления перезагрузкой в ​​реальном времени, а не для обслуживания вашего фактического веб-сайта.

Как правило, для обслуживания статических сайтов с grunt используется grunt-contrib-connect. Затем просмотрите их сайт, перейдя по адресу localhost:8000 или там, где вы его настроили. Но в зависимости от ваших потребностей это может быть apache, nginx и т. д., обслуживающие файлы.

На grunt-contrib-connect также есть опция livereload. Это только вставляет тег <script src="//localhost:35729/livereload.js"></script> в ваш HTML и ничего больше.

person Kyle Robinson Young    schedule 20.02.2014
comment
Оно работает! Спасибо! Я бы хотел, чтобы в документации watch было немного яснее, что требуется что-то подобное... - person Zach Lysobey; 20.02.2014

arrow_upward
7
arrow_downward

Вот действительно простой способ, как вы можете настроить это. Просто убедитесь, что у вас установлены плагины grunt-contrib-watch и grunt-contrib-connect. Предполагается, что ваш Gruntfile.js находится в корневом каталоге вашего проекта. также не забудьте добавить <script src="//localhost:35729/livereload.js"></script> непосредственно перед закрывающим тегом body </body> и убедитесь, что у вас есть файл index. Когда вы наберете grunt server в терминале, перейдите к http://localhost:9000, и все должно быть настроено.

module.exports = function(grunt) {

  grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

  watch: {
    options: {
      livereload: true,
    },
    css: {
      files: ['css/**/*.css'],
    },
    js: {
      files: ['js/**/*.js'],
    },
    html: {
      files: ['*.html'],
    }
  },
  connect: {
    server: {
      options: {
        port: 9000,
        base: '.',
        hostname: '0.0.0.0',
        protocol: 'http',
        livereload: true,
        open: true,
      }
    }
  },
});


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

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

};
person hot_barbara    schedule 11.09.2015
comment
Я не мог понять, как заставить работать livereload, но просмотр вашей конфигурации и добавление имени хоста и livereload в connect/server/options помогло. - person Juan Stoppa; 14.12.2015
comment
Нет-нет-нет, <script src="//localhost:35729/livereload.js"></script> НЕЛЬЗЯ добавлять вручную. Он будет автоматически добавлен плагином grunt-contrib-connect, если все сделано правильно. Вы не хотите возиться с развернутой версией - person Augie Gardner; 26.04.2016