50

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

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

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

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

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

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

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

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

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

4 回答 4

90

实时重新加载现在内置在grunt-contrib-watchversion0.4.0中。grunt-contrib-livereload并将grunt-regarde很快被弃用。

现在只需在您的配置中设置选项livereload，true它将创建一个实时重新加载服务器，然后在任务运行后重新加载：

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

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

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

于 2013-05-07T23:20:53.993 回答
14

编辑：检查版本信息。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 一样，它似乎工作得更好（我忘记了为什么）。

package.json如果你愿意的话，你可以通过在它自己的“devDependencies”对象中指定 livereload来让你变得更好。现在，运行你的老派来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']);

现在，当你grunt在 CLI 中启动时，你应该（希望，也许，交叉手指）得到这样的东西：

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

浏览http://localhost:9999/yourpage.html并观看魔术发生。

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

于 2013-05-07T18:59:19.983 回答
0

这是一个基于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);
});
于 2015-04-19T12:21:00.960 回答
0

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

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

在索引中添加：

<script src="http://localhost:35729/livereload.js"></script>
于 2015-10-14T15:55:33.677 回答