如何使用 grunt-contrib-livereload？

Question

我正在尝试使用grunt-contrib-livereload，但似乎无法弄清楚。 The readme 似乎跳过了我需要解释的所有内容，然后以一个示例结束，该示例在我尝试时不起作用并且似乎与文档没有直接关系。我在博客文章或教程或其他任何内容中搜索了更好的解释，但一直找不到。谁能解释一下如何开始使用这个工具？

以下是我根据the readme提出的问题：

文档说 livereload 任务“必须传递已更改的文件列表” --- 但是我如何传递这个文件列表？这个例子似乎没有说明这一点。是否通过列表？

是否需要 grunt-contrib-connect？它有什么作用，我该如何使用它？在尝试使用 livereload 之前是否需要学习连接？

自述文件提到“必须是第一个插入的”中间件 --- 但插入到什么中，在什么之前？又是如何插入的？

而且我想我不明白我需要如何操作端口。 “所有在 livereload 端口上监听的浏览器都将被重新加载”——但是我怎么知道哪个浏览器正在监听哪个端口？在尝试使用 livereload 之前，我是否需要了解所有关于端口的知识？ （关于如何最好地了解这一点有什么建议吗？）

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

我想我是在问是否有人可以请：

• 向我介绍一个比当前自述文件更有效的教程；
• 解释自述文件中这些无法解释的部分，如果这些答案是我理解插件所需要的；
• 或提供一个功能性示例，说明其功能为何。

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

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

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

Answer 2

编辑：检查版本信息。 grunt-contrib-watch 现在支持 livereload。

真是太棒了。我也遇到了这个问题，所以让我尽我所能解释（或者至少让你开始运行）。请记住，我就是这样设置它的，而且它似乎大部分时间都可以工作。

首先，您需要确保已使用正确的依赖项更新了您的package.json。我不确定 livereload 是否适用于“监视”任务中的烘焙，我最近一直在使用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"
},

Obvi 你想要 grunt (duhhh)、livereload、connect 似乎有助于挂载文件夹，并且像 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 顶部，我们将要添加一些用于 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, '.')]
      }
    }
  }
},

现在我们要监视文件。我喜欢设置一些不同的任务，因为我不希望每次保存 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 文件，我只想启动指南针。如果我编辑一个翡翠模板，我只想将翡翠触发到 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 并观看魔术发生。

full gruntfile here.full package.json here.

Answer 3

Here is a solution 基于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); });

Answer 4

我知道这有点旧，但可以帮助某人。 在 Gruntfile.js 添加“选项”：

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

在索引中添加：

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