我正努力让Grunt的“实时重新加载”功能(在grunt-contrib-watch
中实现)能够在我的应用中运行。我终于咬紧牙关,试着做一个最小的例子。希望有人能够轻易注意到遗漏的内容。
文件结构:
├── Gruntfile.js
├── package.json
├── index.html
package.json
{
"name": "livereloadTest",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
src: {
files: ['*.html'],
options: { livereload: true }
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};
index.html
<!doctype html>
<html>
<head><title>Test</title></head>
<body>
<p>....</p>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
然后我运行grunt watch
并且没有任何爆炸。但是,没有浏览器窗口自动打开(应该吗?)。
当我在http://localhost:35729/
打开镀铬时,我收到了这个json:
{"tinylr":"Welcome","version":"0.0.4"}
并尝试在该端口上的任何其他路径给我
{"error":"not_found","reason":"no such route"}
答案 0 :(得分:17)
http://localhost:35729/
是实时重新加载服务器的URL。它仅用于管理实时重新加载,而不是为您的实际网站提供服务。
通常,人们会使用grunt-contrib-connect来为grunt提供静态网站。然后转到localhost:8000或您将其配置为驻留的任何位置来查看其站点。但根据您的需要,它也可能是apache,nginx等服务文件。
grunt-contrib-connect上还有一个livereload
选项。这只会将<script src="//localhost:35729/livereload.js"></script>
标记注入您的HTML,而不是其他内容。
答案 1 :(得分:7)
这是一个非常简单的方法来设置它。只需确保安装了grunt-contrib-watch
和grunt-contrib-connect
插件即可。这假设您的Gruntfile.js位于项目的根目录中。另外,请确保在结束正文标记<script src="//localhost:35729/livereload.js"></script>
之前添加</body>
,并且您有一个index
文件。当您在终端中输入grunt server
时,请转到http://localhost:9000
,您应该全部设置完毕。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true,
},
css: {
files: ['css/**/*.css'],
},
js: {
files: ['js/**/*.js'],
},
html: {
files: ['*.html'],
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true,
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('server', ['connect','watch']);
};