javascript 带有 LiveReload 的 grunt-contrib-watch 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20120412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
grunt-contrib-watch with LiveReload not working
提问by Evan Emolo
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:
我无法让 LiveReload 与 Grunt 一起工作。我正在使用 grunt-contrib-watch。当 Grunt 正在查看指定的文件时，浏览器中没有重新加载任何内容。所以我会看到：
Running "watch" task
Completed in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Waiting...
OK
>> File "views/index.html" changed.
But the browser window does not update. I am using LiveReload 2.0.9. Any suggestions on how to get it running?
但是浏览器窗口不会更新。我正在使用 LiveReload 2.0.9。关于如何让它运行的任何建议？
Gruntfile.js
Gruntfile.js
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' ]);
};
回答by André Dion
It looks all you're missing is including the livereload script in your document: <script src="//localhost:35729/livereload.js"></script>by default.
看起来您缺少的只是在您的文档中包含 livereload 脚本：<script src="//localhost:35729/livereload.js"></script>默认情况下。
If you want to avoid having to do this manually, you can use the connect-livereloadmiddleware.
如果您想避免手动执行此操作，可以使用connect-livereload中间件。
Here's a sample Gruntfile.jsthat's setup for watching and livereloading using the middleware I linked to.
这是一个示例Gruntfile.js，它设置为使用我链接到的中间件进行观看和实时重新加载。
回答by lidl
If you won't add livereload.js to pages.You could use chrome plugin :
如果您不将 livereload.js 添加到页面。您可以使用 chrome 插件：
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei.
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei。
Using this plugin .when page load ,click the plugin ico ,make sure that dot changed.Then page source will auto add
使用此插件。当页面加载时，单击插件图标，确保点已更改。然后页面源将自动添加
回答by James Daly
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
我知道这个问题比较老，但我从另一个网站得到了这个信息，它似乎可以解决这个问题，因为我遇到了同样的问题，基本上将 keepAlive:true 添加到 options 对象将在这里工作是代码
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
}
}
}
});
});
回答by ray
You have to remember 2 ports:
你必须记住2个端口：
The port where Grunt is executed
The port where livereload is executed
执行 Grunt 的端口
执行 livereload 的端口
When you run it:
当你运行它时：
$ grunt
This runs in : http://0.0.0.0:9000
这运行在： http://0.0.0.0:9000
The configuration that works for me in Gruntfile.js is:
在 Gruntfile.js 中对我有用的配置是：
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']);
});
If you can see, the server will run in http://localhost:9000, but we haven't defined where livereload will run, so by default it will run in http://localhost:35729/livereload.js
如果你能看到，服务器将运行在http://localhost:9000，但我们还没有定义 livereload 将在哪里运行，所以默认情况下它会运行http://localhost:35729/livereload.js
Don't forget that in your HTML, the Firefox Add-on is:
不要忘记在您的 HTML 中，Firefox 附加组件是：
(livereload, [link][1]), inserta
<script src="http://localhost:9000/livereload.js"></script>
Therefore you have to protect against this. Filling in your HTML:
因此，您必须防范这种情况。填写您的 HTML：
<head>
<title>some</title>
....
<script src="http://localhost:35729/livereload.js"></script>
</head>
Finally, in the console:
最后，在控制台中：
$ grunt
Address in your navigator:
导航器中的地址：
http://localhost:9000
When you edit any CSS archive (Or JavaScript or HTML), it should reload automatically.
当您编辑任何 CSS 存档（或 JavaScript 或 HTML）时，它应该会自动重新加载。
