blocks|key|3048170|text|默认情况下，您所缺少的只是在文档中包括livereload脚本：<script+src="//localhost:35729/livereload.js"></script>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3048171|如果您希望避免手动执行此操作，则可以使用肝连接中间件。|3048172|Gruntfile.js，这是使用我链接到的中间件进行监视和肝读取的设置。|3048173|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html|1|https://github.com/intesso/connect-livereload|2|https://gist.github.com/adion/7580522^0|W|1J|D|I|0|0|K|3|1|0|0|C|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|J|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]]]

It looks all you're missing is <a href="https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html">including the livereload script in your document</a>: <code>&lt;script src="//localhost:35729/livereload.js"&gt;&lt;/script&gt;</code> by default.

If you want to avoid having to do this manually, you can use the <a href="https://github.com/intesso/connect-livereload">connect-livereload</a> middleware.

<a href="https://gist.github.com/adion/7580522">Here's a sample Gruntfile.js</a> that's setup for watching and livereloading using the middleware I linked to.

blocks|key|1968238|text|如果不将livereload.js添加到pages.You中，可以使用chrome插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1968239|https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei。|offset|length|1968240|使用此插件.when页面加载，单击插件ico，确保点changed.Then页面源将自动添加|1968241|entityMap|0|LINK|mutability|MUTABLE|url|https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei^0|0|0|2D|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

If you won't add livereload.js to pages.You could use chrome plugin :

<a href="https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei" rel="nofollow">https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei</a>.

Using this plugin .when page load ,click the plugin ico ,make sure that dot changed.Then page source will auto add

blocks|key|563189|text|您必须记住两个端口：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|563190|执行Grunt的端口|ordered-list-item|563191|执行肝任务的端口。|563192|当你运行它时：|563193|$+grunt|code-block|syntax|javascript|563194|它运行在：http://0.0.0.0:9000中|offset|length|style|CODE|563195|在Gruntfile.js中为我工作的配置是：|563196|module.exports+=+function+(grunt)+{
grunt.initConfig({
++++connect:+{
++++++++server:+{
++++++++++++options:+{
++++++++++++++++port:+9000,
++++++++++++++++base:+'/Users/pedroce/Documents/dev/node/fipa/fipa/'
++++++++++++}
++++++++}
++++},
++++watch:+{
++++++++project:+{
++++++++++++files:+['public/**/*.js',+'public/**/*.html',+'public/**/*.json',+'public/**/*.css'],
++++++++++++options:+{
++++++++++++++++livereload:+true,
++++++++++++}
++++++++}
++++}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',+['connect',+'watch']);
});|563197|如果可以看到，服务器将在http://localhost:9000中运行，但我们尚未定义livereload将在何处运行，因此默认情况下它将在http://localhost:35729/livereload.js中运行|563198|不要忘记，在HTML中，Firefox插件是：|563199|(livereload,+[link][1]),+inserta

<script+src="http://localhost:9000/livereload.js"></script>|563200|所以你必须保护自己。填写HTML：|563201|<head>
++++<title>some</title>
++++....
++++<script+src="http://localhost:35729/livereload.js"></script>
</head>|563202|最后，在控制台中：|563203|$+grunt|563204|在您的导航器中的地址：|563205|http://localhost:9000|563206|当您编辑任何CSS存档(或JavaScript或HTML)时，它应该会自动重新加载。|563207|entityMap^0|0|0|0|0|0|5|J|0|0|0|C|L|1Z|10|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1K|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|1L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1N|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|1O|8|@$P|1P|Q|1Q|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|W|5|K|7|1S|8|@]|9|@]|A|$L|M]]|$1|X|3|Y|5|6|7|1T|8|@$P|1U|Q|1V|R|S]|$P|1W|Q|1X|R|S]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|11|3|12|5|K|7|1Z|8|@]|9|@]|A|$L|M]]|$1|13|3|14|5|6|7|20|8|@]|9|@]|A|$]]|$1|15|3|16|5|K|7|21|8|@]|9|@]|A|$L|M]]|$1|17|3|18|5|6|7|22|8|@]|9|@]|A|$]]|$1|19|3|1A|5|K|7|23|8|@]|9|@]|A|$L|M]]|$1|1B|3|1C|5|6|7|24|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|K|7|25|8|@]|9|@]|A|$L|M]]|$1|1F|3|1G|5|6|7|26|8|@]|9|@]|A|$]]|$1|1H|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|1I|$]]

You have to remember 2 ports:

<ol>
<li>The port where Grunt is executed</li>
<li>The port where livereload is executed</li>
</ol>

When you run it:

<pre><code>$ grunt
</code></pre>

This runs in : <code>http://0.0.0.0:9000</code>

The configuration that works for me in Gruntfile.js is:

<pre><code>module.exports = function (grunt) {
grunt.initConfig({
 connect: {
 server: {
 options: {
 port: 9000,
 base: '/Users/pedroce/Documents/dev/node/fipa/fipa/'
 }
 }
 },
 watch: {
 project: {
 files: ['public/**/*.js', 'public/**/*.html', 'public/**/*.json', 'public/**/*.css'],
 options: {
 livereload: true,
 }
 }
 }
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect', 'watch']);
});
</code></pre>

If you can see, the server will run in <code>http://localhost:9000</code>, but we haven't defined where livereload will run, so by default it will run in <code>http://localhost:35729/livereload.js</code> 

Don't forget that in your HTML, the Firefox Add-on is:

<pre><code>(livereload, [link][1]), inserta

&lt;script src="http://localhost:9000/livereload.js"&gt;&lt;/script&gt;
</code></pre>

Therefore you have to protect against this. Filling in your HTML:

<pre><code>&lt;head&gt;
 &lt;title&gt;some&lt;/title&gt;
 ....
 &lt;script src="http://localhost:35729/livereload.js"&gt;&lt;/script&gt;
&lt;/head&gt;
</code></pre>

Finally, in the console:

<pre><code>$ grunt
</code></pre>

Address in your navigator:

<pre><code>http://localhost:9000
</code></pre>

When you edit any CSS archive (Or JavaScript or HTML), it should reload automatically.

blocks|key|3048262|text|我知道这个问题更老了，但是我从另一个网站得到了这个信息，它似乎可以解决这个问题，因为我也遇到了同样的问题，本质上添加了keepAlive:true+to+options对象将在这里工作的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3048263|grunt.initConfig({
pkg:+grunt.file.readJSON('package.json'),
develop:+{
++server:+{
++++file:+'bin/www'
++}
},
watch:+{
++options:+{
++++nospawn:+true,
++++livereload:+reloadPort
++},
++server:+{
++++files:+[
++++++'bin/www',
++++++'app.js',
++++++'routes/*.js'
++++],
++++tasks:+['develop',+'delayed-livereload']
++},
++js:+{
++++files:+['public/js/*.js'],
++++options:+{
++++++livereload:+reloadPort,
++++++keepAlive:true
++++}
++},
++css:+{
++++files:+[
++++++'public/css/*.css'
++++],
++++options:+{
++++++livereload:+reloadPort,
++++++++keepAlive:true
++++}
++},
++views:+{
++++files:+['views/*.ejs'],
++++options:+{
++++++livereload:+reloadPort,
++++++++keepAlive:true
++++}
++}
}|code-block|syntax|javascript|3048264|})；|3048265|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know this question is older but I got this info from another website and it seemed to work regarding the question as I was having the same problem, essentially adding 
keepAlive:true to the options object will work 
here is the code

<pre><code>grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
develop: {
 server: {
 file: 'bin/www'
 }
},
watch: {
 options: {
 nospawn: true,
 livereload: reloadPort
 },
 server: {
 files: [
 'bin/www',
 'app.js',
 'routes/*.js'
 ],
 tasks: ['develop', 'delayed-livereload']
 },
 js: {
 files: ['public/js/*.js'],
 options: {
 livereload: reloadPort,
 keepAlive:true
 }
 },
 css: {
 files: [
 'public/css/*.css'
 ],
 options: {
 livereload: reloadPort,
 keepAlive:true
 }
 },
 views: {
 files: ['views/*.ejs'],
 options: {
 livereload: reloadPort,
 keepAlive:true
 }
 }
}
</code></pre>

});

blocks|key|3048331|text|您可以使用Grunt+实时发布浏览器页面|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3048332|GitHub|3048333|​|3048334|📷|atomic|3048335|3048336|样例|3048337|const+
++LiveReload+=+require("live-reload-bp");
++//+webServer+=+require('./web-server');

var+
++liveReload;

//+webServer();

module.exports+=+function(grunt)+{

++grunt.initConfig({
++
++++liveReload:+{
++++++run:+{
++++++++options:+{
++++++++++host:+'127.0.0.1',
++++++++++port:+'8080'
++++++++}
++++++},++++
++++++js:+{
++++++++options:+{}
++++++},
++++},

++++uglify:+{
++++++++build777:+{
++++++++++files:+[{
++++++++++++expand:+true,
++++++++++++cwd:+'src',
++++++++++++src:+'js/**/*.js',
++++++++++++dest:+'dest'
++++++++++}]
++++++++}
++++},

++++watch:+{
++++++options:+{
++++++++spawn:+false+
++++++++//+It+is+recommended+to+disable+`false`+or+not+use+'grunt-contrib-watch'+
++++++++//+or+perhaps+even+Grunt.+Because+it+works+very+very+slowly.
++++++},
++++++js:+{
++++++++++files:+['src/**/*.js'],
++++++++++tasks:+['uglify',+'liveReload:js']
++++++},+++++++
++++},

++});


++grunt.loadNpmTasks('grunt-contrib-watch');
++grunt.loadNpmTasks('grunt-contrib-uglify');


++//+Register+Task
++grunt.registerTask('start',+['liveReload:run',+'watch']);


++grunt.registerMultiTask('liveReload',+'',+function()+{
++++++if+(grunt.fail.errorcount+>+0+%7C%7C+grunt.fail.warncount+>+0)+{
++++++++++return+false;
++++++}

++++++if(this.target+===+'run'){
++++++++++liveReload+=+new+LiveReload(this.data.options);
++++++++++liveReload.run();
++++++}else{
++++++++++liveReload.reloadPage();
++++++}
++});

}|code-block|syntax|javascript|3048338|entityMap|0|LINK|mutability|MUTABLE|url|https://live-reload-browser-page.com/|1|https://github.com/Yuriy-Svetlov/live-reload-bp|2|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/834cf9714bb84838b2749aab6fbffdb3.png|imageAlt^0|B|9|0|0|0|6|1|0|0|0|1|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|F|3|G|5|6|7|1G|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|K|3|G|5|6|7|1L|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1N|8|@]|9|@]|C|$Q|R]]|$1|S|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|13|W|14|C|$15|16|17|-4]]]]

You can use for Grunt <a href="https://live-reload-browser-page.com/" rel="nofollow noreferrer">Live Reload Browser Page</a>
<a href="https://github.com/Yuriy-Svetlov/live-reload-bp" rel="nofollow noreferrer">GitHub</a>
<a href="https://i.stack.imgur.com/pPHnn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPHnn.png" alt="Live Reload Browser Page" /></a>
Sample example
<pre><code>const 
 LiveReload = require(&quot;live-reload-bp&quot;);
 // webServer = require('./web-server');

var 
 liveReload;

// webServer();

module.exports = function(grunt) {

 grunt.initConfig({
 
 liveReload: {
 run: {
 options: {
 host: '127.0.0.1',
 port: '8080'
 }
 }, 
 js: {
 options: {}
 },
 },

 uglify: {
 build777: {
 files: [{
 expand: true,
 cwd: 'src',
 src: 'js/**/*.js',
 dest: 'dest'
 }]
 }
 },

 watch: {
 options: {
 spawn: false 
 // It is recommended to disable `false` or not use 'grunt-contrib-watch' 
 // or perhaps even Grunt. Because it works very very slowly.
 },
 js: {
 files: ['src/**/*.js'],
 tasks: ['uglify', 'liveReload:js']
 }, 
 },

 });


 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-contrib-uglify');


 // Register Task
 grunt.registerTask('start', ['liveReload:run', 'watch']);


 grunt.registerMultiTask('liveReload', '', function() {
 if (grunt.fail.errorcount &gt; 0 || grunt.fail.warncount &gt; 0) {
 return false;
 }

 if(this.target === 'run'){
 liveReload = new LiveReload(this.data.options);
 liveReload.run();
 }else{
 liveReload.reloadPage();
 }
 });

}
</code></pre>

I cannot get LiveReload to work with Grunt. I am using grunt-contrib-watch. While Grunt is watching the stated files, nothing is reloading in the browser. So I will see:

<pre><code>Running "watch" task
Completed in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Waiting...
OK
&gt;&gt; File "views/index.html" changed.
</code></pre>

But the browser window does not update. I am using LiveReload 2.0.9. Any suggestions on how to get it running?

Gruntfile.js

<pre><code>module.exports = function(grunt) {

 'use strict';

 grunt.initConfig({
 express: {
 dev: {
 options: {
 script: './app.js'
 }
 }
 },
 watch: {
 tasks: [ 'express:dev' ],
 options: {
 livereload: true,
 nospawn: true
 },
 files: [
 './views/index.html',
 './preprocessing/css/style.scss'
 ]
 }
 });

 grunt.loadNpmTasks('grunt-express-server');
 grunt.loadNpmTasks('grunt-contrib-watch');

 grunt.registerTask('default', [ 'express:dev', 'watch' ]);
};
</code></pre>

grunt-contrib-watch with LiveReload not working

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我不能让LiveReload和Grunt一起工作。我用的是咕噜-表。当Grunt正在监视指定的文件时，浏览器中没有重新加载任何内容。所以我会看看：Running "watch" taskCompleted in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Wa...

问带LiveReload的表不工作
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带LiveReload的表不工作EN