Grunt-contrib-watch с LiveReload не работает

Я не могу заставить LiveReload работать с Grunt. Я использую grunt-contrib-watch. Пока Grunt просматривает указанные файлы, в браузере ничего не перезагружается. Поэтому я увижу:

Running "watch" task
Completed in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Waiting...
OK
>> File "views/index.html" changed.

Но окно браузера не обновляется. Я использую LiveReload 2.0.9. Любые предложения по его запуску?

Gruntfile.js

module.exports = function(grunt) {

  'use strict';

  grunt.initConfig({
    express: {
      dev: {
        options: {
          script: './app.js'
        }
      }
    },
    watch: {
      tasks:  [ 'express:dev' ],
      options: {
        livereload: true,
        nospawn: true
      },
      files: [
        './views/index.html',
        './preprocessing/css/style.scss'
      ]
    }
  });

  grunt.loadNpmTasks('grunt-express-server');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', [ 'express:dev', 'watch' ]);
};

Ответ 1

Похоже, что вы потеряли включая личную загрузку script в своем документе: <script src="//localhost:35729/livereload.js"></script> по умолчанию.

Если вы хотите, чтобы этого не делалось вручную, вы можете использовать связующее ПО.

Вот пример Gruntfile.js, который настроил просмотр и загрузку с использованием промежуточного программного обеспечения, с которым я связан.

Ответ 2

Если вы не добавите файл livereload.js на страницы. Вы можете использовать chrome plugin:

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei.

Используя этот плагин. При загрузке страницы щелкните плагин ico, убедитесь, что точка изменилась. Затем источник страницы автоматически добавит

Ответ 3

Я знаю, что этот вопрос старше, но я получил эту информацию с другого сайта и, похоже, работал над вопросом, поскольку у меня была такая же проблема, по сути добавляя keepAlive: true для объекта options будет работать вот код

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
develop: {
  server: {
    file: 'bin/www'
  }
},
watch: {
  options: {
    nospawn: true,
    livereload: reloadPort
  },
  server: {
    files: [
      'bin/www',
      'app.js',
      'routes/*.js'
    ],
    tasks: ['develop', 'delayed-livereload']
  },
  js: {
    files: ['public/js/*.js'],
    options: {
      livereload: reloadPort,
      keepAlive:true
    }
  },
  css: {
    files: [
      'public/css/*.css'
    ],
    options: {
      livereload: reloadPort,
        keepAlive:true
    }
  },
  views: {
    files: ['views/*.ejs'],
    options: {
      livereload: reloadPort,
        keepAlive:true
    }
  }
}

});

Ответ 4

Вам нужно запомнить 2 порта:

Порт, в котором выполняется Grunt
Порт, в котором выполняется загрузка в потоке

Когда вы запустите его:

$ grunt

Это выполняется в: http://0.0.0.0:9000

Конфигурация, которая работает для меня в Gruntfile.js, такова:

module.exports = function (grunt) {
grunt.initConfig({
    connect: {
        server: {
            options: {
                port: 9000,
                base: '/Users/pedroce/Documents/dev/node/fipa/fipa/'
            }
        }
    },
    watch: {
        project: {
            files: ['public/**/*.js', 'public/**/*.html', 'public/**/*.json', 'public/**/*.css'],
            options: {
                livereload: true,
            }
        }
    }
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect', 'watch']);
});

Если вы видите, сервер будет работать в http://localhost:9000, но мы не определили, где будет выполняться функция livereload, поэтому по умолчанию он будет работать в http://localhost:35729/livereload.js

Не забывайте, что в вашем HTML дополнение Firefox:

(livereload, [link][1]), inserta

<script src="http://localhost:9000/livereload.js"></script>

Поэтому вам нужно защититься от этого. Заполнение вашего HTML:

<head>
    <title>some</title>
    ....
    <script src="http://localhost:35729/livereload.js"></script>
</head>

Наконец, в консоли:

$ grunt

Адрес в навигаторе:

http://localhost:9000

При редактировании любого CSS-архива (или JavaScript или HTML) он должен перезагружаться автоматически.