如何使用grunt-contrib-livereload？

Question

我试图使用grunt-contrib-livereload，但似乎无法理解它。 自述文件好像跳过了所有需要解释的内容，最后还提供了一个示例，但当我尝试时它并不起作用，似乎与文档没有直接关系。我在博客文章或教程中搜索更好的解释，但没有找到。请问有人能够解释如何使用这个工具吗？

以下是我根据自述文件提出的问题：

文档说livereload任务“必须传递已更改的文件列表”——但我该如何将这个文件列表传递过去？示例似乎没有说明。Regarde是否传递文件列表？

是否需要grunt-contrib-connect？它是做什么的，如何使用？在尝试使用livereload之前，我需要学习connect吗？

自述文件提到的中间件“必须是第一个插入的”——插入到哪里，先于其他什么？如何插入呢？

我似乎不理解我需要如何操作端口。 “所有监听livereload端口的浏览器都将重新加载”——但我如何知道哪个浏览器正在监听哪个端口？在尝试使用livereload之前，我需要学习关于端口的一切吗？（任何关于最佳学习方法的建议）

最后，在示例中，有一个folderMount函数与之前的文档似乎没有关系。那是什么，我需要它吗？

我想问是否有人能够：

• 指向比当前自述文件更有效的教程；
• 如果这些未解释的部分是我理解插件所需的答案，请解释它们；
• 或者提供一个功能示例，并解释为什么它是有效的。

- davidtheclark

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

Live reload服务器默认会在端口35729上启动。因此，要在您的页面上启用实时重载，只需添加<script src="http://localhost:35729/livereload.js"></script>即可。

查看更多文档信息：https://github.com/gruntjs/grunt-contrib-watch#live-reloading

- Kyle Robinson Young

---

很好知道。我很高兴看到它已经被大大简化。 - davidtheclark

我也是。我希望在回答时知道那个信息！ - imjared

谢谢，你也可以补充一下这个解决方案与Chrome扩展程序（https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en）完美配合，因此手动添加脚本行就不再需要了。 - owzim

如果您想在移动设备浏览器上重新加载，最好通过jQuery进行延迟加载脚本（从而避免不必要的更改“localhost”为请求所使用的IP或主机名）：https://gist.github.com/cbrunnkvist/9157945 - conny

你不需要任何Chrome扩展程序来进行livereload，也不需要向文件添加任何脚本：https://github.com/dmitriz/gulp-automation - Dmitri Zaitsev

它是如何知道livereload服务器的根目录的？服务器从哪里启动？是什么路径/文件夹？ - Andreas Norman

Answer 2

编辑：检查版本信息。现在grunt-contrib-watch已经支持内置的livereload。

真是个难题。我也遇到了一些问题，所以让我尽力解释一下（或者至少让你可以使用它）。请记住，这是我设置的方式，并且大部分时间似乎都有效。

首先，您需要确保已将package.json更新为正确的依赖项。我不确定livereload是否与内置的“watch”任务兼容，最近我一直在使用grunt-regarde。我的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 似乎有助于挂载文件夹，regarde 就像 grunt-watch，只是它似乎更好用（我忘记了具体原因）。

如果你愿意，你可以通过在自己的 "devDependencies" 对象中指定 livereload 来使你的 package.json 更加完善。现在，运行你的老式好方法 npm install，将这些好东西获取到你的项目中。

让我们来谈谈 gruntfiles:

正如你可能知道的那样，gruntfile 是使魔法发生的地方。在你的 gruntfile 底部的某个地方，你会想要指定

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

在您的gruntfile顶部，我们需要添加一些用于实时重新加载的实用程序。在/*global module:false*/下面，继续添加var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;。

此后，您不需要真正学习connect，只需使用它。检查我的样式：

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

现在我们想要监视文件。我喜欢设置几个不同的任务，因为我不想每次保存CSS文件时都运行整个grunt进程。以下是我使用的内容（再次添加到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 发生更改时，才触发 livereload。如果我编辑 SCSS 文件，则只想启动 compass。如果我编辑 jade 模板，则只想触发 jade 到 HTML 编译器。我想你能理解正在发生的事情。你可以玩弄它，但要聪明一点，因为你可能会陷入无限循环。

最后，你需要启动这些进程。我喜欢将它们全部绑定到我的主 grunt 任务中，因为我的 gruntfile 就是那么棒。

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

现在，在 CLI 中启动 grunt 后，你应该（希望如此，也许会，祈祷吧）得到类似下面的内容：

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

浏览到http://localhost:9999/yourpage.html，看奇迹发生。

这里是完整的gruntfile。 这里是完整的package.json。

- imjared

---

感谢提供的所有细节，非常有帮助。 - davidtheclark

Answer 3

我知道这可能有点老了，但可以帮助到某些人。 在Gruntfile.js中添加"options":

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

在索引中添加：

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

- Panta Alejandro

Answer 4

这里有一个解决方案，基于 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'] }

// 默认任务 - 当您从CLI运行`gulp`时调用 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); });

- Dmitri Zaitsev