连接任务运行它自己的服务器来提供静态页面。如果watch:livereload 任务中提到的文件有任何更改,livereload 任务会刷新页面。
您不需要默认的静态服务器。所以去从 Gruntfile 中删除连接任务
connect: {
options: {
port: 9000,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'app')
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, 'dist')
];
}
}
}
},
同时从 server 任务中删除 connect:livereload 和 open
grunt.task.run([
'clean:server',
'concurrent:server',
'livereload-start',
'connect:livereload', // Remove This line
'open', // Remove This line
'watch'
]);
然后在您的 html 文件中添加以下脚本。
<!-- livereload script -->
<script type="text/javascript">
document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
来源:Grunt Live reloading with external server
另一个interesting discussion