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

Ответ 1

Живая перезагрузка теперь встроена в версию 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

Ответ 2

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

Что за doozy. Я столкнулся с проблемами с этим, поэтому позвольте мне сделать все возможное, чтобы объяснить (или, по крайней мере, запустить вас). Имейте в виду, что это как I настроить и, похоже, работает большую часть времени.

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

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

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

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

Говорите gruntfiles:

Как вы, наверное, знаете, файл grunt делает магию. Где-то в нижней части вашего файла grunt вам нужно указать

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

В верхней части вашего файла grunt мы захотим добавить некоторые утилиты для загрузки в файл. В разделе /*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) {

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

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

Теперь мы хотим, чтобы файлы просматривались. Мне нравится настраивать несколько разных задач, так как я не хочу, чтобы весь процесс рутинга выполнялся каждый раз, когда я сохраняю файл 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']
  }
},

Вы можете видеть, что мне нужно только стрелять из списка, если были внесены изменения в мой скомпилированный css (*.css) или в мой скомпилированный html. Если я отредактирую файл SCSS, я хочу отключить только компас. Если я редактирую шаблон нефрита, я хочу только запустить jade в компилятор 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 здесь.

Ответ 3

Вот решение на основе 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);
});

Ответ 4

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

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

В индексе add:

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