Question

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

以下是the readme基于{{3}}的问题：

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

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

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

我想我不明白我是如何操纵端口的。 “将重新加载监听livereload端口的所有浏览器”---但我如何知道哪个浏览器正在侦听哪个端口？在尝试使用livereload之前，是否需要了解所有端口？（关于如何最好地了解这一点的任何建议？）

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

我想我问的是否有人可以取悦：

指向一个比当前自述文件更有效的教程;
解释自述文件的这些无法解释的部分，如果这些答案是我需要理解的插件;
或提供一个功能性示例，说明其功能的原因。

Answer 1

实时重新加载现已内置于grunt-contrib-watch版本0.4.0。 <{1}}和grunt-contrib-livereload很快就会被弃用。

现在只需在配置中将选项grunt-regarde设置为livereload，它就会创建一个实时重装服务器，然后在任务运行后重新加载：

true

默认情况下，实时重新加载服务器将在端口grunt.initConfig({ watch: { all: { options: { livereload: true }, files: ['lib/*.js'], tasks: ['jshint'], }, }, });上启动。因此，要在您的网页上启用实时重新加载，只需将35729添加到您的网页。

查看有关文档的更多信息：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似乎有助于安装文件夹，而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的顶部，我们要为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。再一次，我忘记了连接正在做什么，但这是中间件魔术发挥作用的地方。在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文件，我想要启动指南针。如果我编辑一个jade模板，我只想将jade激活到HTML编译器。我想你可以看到发生了什么。你可以玩这个，只要聪明一点，因为你可能陷入无限循环。

最后，您需要启动这些进程。我喜欢将它们全部绑定到我的主要任务上，因为我的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>

如何使用grunt-contrib-livereload？

4 个答案: