如何使用胃-肝-肝？

Question

我正在尝试使用[医]胃-肝-肝，但似乎无法理解。自述似乎跳过了我需要解释的所有内容，然后以一个示例结束，这个示例在我尝试时不起作用，而且似乎与文档没有直接关系。我已经在博客帖子或教程中寻找了一个更好的解释，但是一直找不到。有人能解释一下如何开始使用这个工具吗？

以下是我基于自述提出的各种问题

文档中说，livereload任务“必须传递已更改的文件列表”--但是我如何传递这个文件列表呢？这个例子似乎没有说明这一点。应该把名单给我吗？

需要连接吗？它是做什么的，我该如何使用它？在尝试使用肝脏之前，我需要学习连接吗？

readme提到中间件“必须是第一个插入的”--但是插入到什么中，之前还有什么？它是怎么插入的？

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

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

我想我是在问有人能不能：

• 告诉我一个比现在的自述更有效的教程；
• 解释这些无法解释的部分自述，如果这些答案是我需要了解插件；
• 或者提供一个函数示例，说明为什么它是功能性的。

Answer 1

Live现在内置到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编辑:检查版本控制信息。现在在.中提供了肝脏负荷支持

真是个蠢货。我也遇到了这个问题，所以让我尽我所能解释(或者至少让你起来跑步)。请记住，这就是I设置它的方式，它似乎大部分时间都在工作。

首先，您需要确保您已经使用了正确的依赖项来编辑package.json。我不确定livereload是否适用于烘焙的“观察”任务，最近我一直在使用咕噜声。我的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你想要咕哝(duhhh)，肝负荷，连接似乎有助于安装文件夹，关注就像咕噜表，它似乎更好(我忘了为什么确切)。

如果您愿意的话，您可以通过在自己的“package.json”对象中指定livereload来使您的devDependencies更好。现在，运行您的好老npm install，以获得您的项目的好东西。

让我们谈谈格伦特文件：

就像你可能知道的那样，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) {之前

现在，让我们进入到肉的格伦特文件。同样，我忘记了连接正在做什么，但这正是中间件的魔力发挥作用的地方。在您的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发生更改时启动livereload。如果我编辑一个SCSS文件，我想发射只是指南针。如果我编辑一个玉器模板，我只想把玉石激发到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并观看魔术的发生。

完整的文件在这里。 这里是完整的package.json。

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