如何使用grunt-contrib-livereload？
我试图使用grunt-contrib-livereload ，但似乎无法弄清楚。 自述文件似乎跳过了我需要解释的所有内容，然后以一个不适用的示例结束，当我尝试它时，似乎与文档没有直接关系。 我已经在博客文章或教程中find了更好的解释，但是一直没能find。 有人可以解释如何开始使用这个工具吗？
以下是基于自述文件的各种问题：
该文件说，livereload任务“必须通过已更改的文件列表”—但如何将它传递给这个文件列表？ 这个例子似乎没有说明这一点。 贵宾是否通过了名单？
需要grunt-contrib-connect吗？ 它做什么，我该如何使用它？ 在尝试使用livereload之前，我需要学习连接吗？
自述文件提到中间件“必须是第一个插入的”—但插入什么之前，还有什么？ 而且它是如何插入的？
我想我不明白我需要如何操作端口。 “所有在livereload端口上侦听的浏览器都将被重新加载”—但我怎么知道哪个浏览器正在侦听哪个端口？ 在尝试使用livereload之前，是否需要了解有关端口的所有信息？ （有关如何最好地了解这一点的任何build议？）
最后，在这个例子中，有一个与之前的任何文档都没有关系的folderMount函数。 那是什么，我需要吗？
我想我问是否有人可以请：
- 指向一个比当前自述更有效的教程;
- 解释自述文件中这些无法解释的部分，如果这些答案是我需要了解的插件;
- 或者提供一个function性的例子，说明它为什么起作用。
现在重新加载现在内置到grunt-contrib-watch版本0.4.0 。 grunt-contrib-livereload和grunt-regarde将很快被弃用。
现在只需在configurationlivereload选项livereload为true ，它将创build一个实时重载服务器，然后在任务运行后重新加载：
grunt.initConfig({ watch: { all: { options: { livereload: true }, files: ['lib/*.js'], tasks: ['jshint'], }, }, });
默认情况下，实时重载服务器将在端口35729上35729 。 因此，要在您的页面上启用实时重新加载，只需在页面中添加<script src="http://localhost:35729/livereload.js"></script>即可。
查看关于文档的更多信息： https ： //github.com/gruntjs/grunt-contrib-watch#live-reloading
编辑：检查版本信息。 grunt-contrib-watch现在已经有了livereload支持。
多么愚蠢。 我也遇到了这个问题，所以让我做我可以解释的事情（或者至less让你启动和运行）。 请记住，这是我如何build立，似乎大部分时间工作。
对于初学者来说，你需要确保你的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" },
Obvi你想咕噜（duhhh），livereload，连接似乎有助于挂载文件夹，而regarde就像咕噜表，它似乎工作更好（我忘了为什么）。
如果你愿意，你可以通过在自己的“devDependencies”对象中指定livereload来使你的package.json更好。 现在，运行你的老习惯npm install以获得项目中的好东西。
我们来聊聊gruntfiles：
正如你可能知道的那样，gruntfile是魔术发生的原因。 在你的gruntfile底部的某处，你需要指定
grunt.loadNpmTasks('grunt-regarde'); grunt.loadNpmTasks('grunt-contrib-livereload'); grunt.loadNpmTasks('grunt-contrib-connect');
在grunt文件的顶部，我们要为livereload添加一些utils。 在/*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文件时都运行整个stream程。 这是我的工作（再次，添加到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'] } },
你可以看到，我只想要livereload，当我的编译后的css（ *.css ）发生变化时，或者我编译的html。 如果我编辑一个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并观看魔术发生。
在这里完整的gruntfile。 完整的package.json在这里。
这里是一个基于Gulp而不是Grunt和以下Gulpfile.js获得livereload工作的解决scheme ：
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); });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); });
我知道这有点老，但可以帮助别人。 在Gruntfile.js中添加“选项”：
sass: { files: 'scss/**/*.scss', tasks: ['sass'], options: { livereload: true, } }
在索引中添加：
<script src="http://localhost:35729/livereload.js"></script>
