10

我正在努力让 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，什么都没炸。但是，不会自动打开浏览器窗口（应该吗？）。

当我打开 chrome 时，http://localhost:35729/我收到了这个 json：

{"tinylr":"Welcome","version":"0.0.4"}

并尝试该端口上的任何其他路径给我

{"error":"not_found","reason":"no such route"}
4

2 回答 2

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 中，而不是其他任何东西。

于 2014-02-20T18:05:00.763 回答
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']);

};
于 2015-09-11T20:56:02.017 回答