如何使用grunt-contrib-livereload？

Question

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

这里有各种各样的我有疑问，基于the readme：

文档说的livereload任务“必须传递已更改的文件列表” ---但我怎么通过它这个名单文件？这个例子似乎没有说明这一点。贵宾是否通过了名单？

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

自述文件提到中间件“必须是第一个插入的”---但插入到什么中，还有什么其他的东西？它是如何插入的？

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

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

我猜我问，如果有人可以取悦：

• 点我推向一个教程，比当前自述有效得多;
• 解释自述文件中这些无法解释的部分，如果这些答案是我需要了解该插件的;
• 或者提供一个功能性的例子，说明它为什么起作用。

Answer 1

现场重装现在内置0.4.0grunt-contrib-watch版本。 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>添加到您的网页。在文档

查看更多信息：基于Gulp而不是Grunt及以下Gulpfile.jshttps://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

编辑：检查版本信息。 grunt-contrib-watch现在有生活支持烘烤英寸

什么是doozy。我也遇到了这个问题，所以让我做我能解释的事情（或者至少让你启动并运行）。请记住，这是如何设置它，它似乎大多数时间工作。

对于初学者，您需要确保您的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'); 

在你gruntfile的顶部，我们要添加一些utils的为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文件时都运行整个流程。这就是我一起工作（同样，添加到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并观看魔术发生。

full gruntfile here.full package.json here.

Answer 3

Here is a solution获得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>