Как использовать grunt-contrib-livereload?

Живая перезагрузка теперь встроена в grunt-contrib-watch версию 0.4.0. Поддержка grunt-contrib-livereload и grunt-regarde скоро будет прекращена.

Теперь просто установите параметр livereload на true в вашей конфигурации, и он создаст сервер перезагрузки в реальном времени, а затем перезагрузится после выполнения задач:

grunt.initConfig({
  watch: {
    all: {
      options: { livereload: true },
      files: ['lib/*.js'],
      tasks: ['jshint'],
    },
  },
});

По умолчанию сервер перезагрузки в реальном времени будет запущен на порту 35729. Поэтому, чтобы включить перезагрузку в реальном времени на своей странице, просто добавьте <script src="http://localhost:35729/livereload.js"></script> на свою страницу.

Дополнительную информацию можно найти в документации: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Изменить: проверить информацию о версии. grunt-contrib-watch теперь имеет встроенную поддержку livereload.

Какая дурь. У меня тоже возникли проблемы с этим, поэтому позвольте мне сделать все, что я могу, чтобы объяснить (или, по крайней мере, заставить вас работать). Имейте в виду, что у меня это настроено именно так, и в большинстве случаев это работает.

Для начала вам нужно убедиться, что вы обновили свой package.json с правильными зависимостями. Я не уверен, что livereload работает с запеченной задачей «смотреть», и я использовал grunt. -отношение в последнее время. Мой package.json обычно выглядит так:

"dependencies": {
  "grunt": "~0.4.x",
  "grunt-contrib-livereload": "0.1.2",
  "grunt-contrib-connect": "0.2.0",
  "grunt-regarde": "0.1.1"
},

Очевидно, вы хотите grunt (duhhh), livereload, connect, кажется, помогает с монтированием папок, а в отношении это похоже на grunt-watch, просто кажется, что он работает лучше (я забыл, почему именно).

Вы можете сделать свой package.json еще лучше, указав livereload в его собственном объекте "devDependencies", если вы так склонны. Теперь запустите свой старый добрый npm install, чтобы получить вкусности в своем проекте.

Поговорим о gruntfiles:

Как вы, наверное, знаете, волшебство происходит благодаря файлу gruntfile. Где-то в нижней части вашего gruntfile вы захотите указать

grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');

В начало вашего gruntfile мы добавим несколько утилит для livereload. Под /*global module:false*/ добавьте var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.

После этого вам не нужно учиться подключаться, вы просто должны использовать его. Проверьте мой стиль:

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

Это происходит до module.exports = function(grunt) {

Теперь давайте перейдем к сути gruntfile. Опять же, я забыл, что делает connect, но именно здесь в игру вступает магия промежуточного программного обеспечения. В файле modules.exports добавьте:

connect: {
  livereload: {
    options: {
      port: 9999,
      middleware: function(connect, options) {
        return [lrSnippet, folderMount(connect, '.')]
      }
    }
  }
},

Теперь мы хотим, чтобы файлы просматривались. Мне нравится настраивать несколько разных задач, так как я не хочу, чтобы весь мой процесс grunt запускался каждый раз, когда я сохраняю файл CSS. Вот с чем я работаю (опять же, добавьте к module.exports):

regarde: {
  txt: {
    files: ['styles/*.css', 'index.html'],
    tasks: ['livereload']
  },
  styles: {
    files: ['sass/*.scss', 'sass/*/*.scss'],
    tasks: ['compass']
  },
  templates: {
    files: ['templates/*.jade'],
    tasks: ['jade']
  }
},

Вы можете видеть, что я только хочу, чтобы livereload срабатывала при внесении изменений в мой скомпилированный css (*.css) или в мой скомпилированный html. Если я редактирую файл SCSS, я хочу запустить только компас. Если я редактирую нефритовый шаблон, я хочу запускать компилятор только из нефрита в HTML. Думаю, вы видите, что происходит. Вы можете играть с этим, просто будьте умны, потому что вы можете попасть в бесконечный цикл.

Наконец, вам нужно запустить эти процессы. Мне нравится привязывать их всех к моей основной задаче, потому что мой gruntfile просто это мило.

// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);

Теперь, когда вы запускаете grunt в CLI, вы должны (надеюсь, возможно, скрестить пальцы) получить что-то вроде этого:

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.

Перейдите к http://localhost:9999/yourpage.html и наблюдайте, как происходит волшебство.

полный файл grunt здесь полный package.json здесь.

Вот решение на основе Gulp вместо Grunt и следующие Gulpfile.js, чтобы livereload заработало:

var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});

Я знаю, что это немного устарело, но может помочь кому-то. В Gruntfile.js добавьте «опции»:

sass: {
    files: 'scss/**/*.scss',
    tasks: ['sass'],
    options: {
      livereload: true,
    }
  }

В указатель добавить:

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