Javascript 带LiveReload的grunt contrib手表不工作

我不能让利弗雷罗德和格伦特一起工作。我用的是grunt contrib手表。当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.

但浏览器窗口不会更新。我正在使用LiveReload 2.0.9。关于如何让它运行有什么建议吗

grunfile.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' ]);
};

---

看起来您所缺少的是：

默认情况下

如果希望避免手动执行此操作，可以使用中间件

---

这是使用我链接到的中间件进行观看和livereload的设置。

如果您不将livereload.js添加到页面中。您可以使用chrome插件：

---

使用此插件。加载页面时，单击插件图标，确保点已更改。然后页面源将自动添加

您必须记住2个端口：

执行Grunt的端口

执行livereload的端口

运行时：

$ grunt

这运行在：

http://0.0.0.0:9000

GrunFile.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']);
});

如果可以看到，服务器将在

http://localhost:9000

，但我们尚未定义livereload将在何处运行，因此默认情况下它将在

http://localhost:35729/livereload.js

不要忘记，在HTML中，Firefox插件是：

(livereload, [link][1]), inserta

<script src="http://localhost:9000/livereload.js"></script>

导航器中的地址：

http://localhost:9000

---

当你编辑任何CSS存档文件（或JavaScript或HTML）时，它应该会自动重新加载。

我知道这个问题比较老，但我从另一个网站获得了这个信息，它似乎可以解决这个问题，因为我遇到了同样的问题，基本上是添加了 keepAlive：为true时，选项对象将起作用 这是密码

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
    }
  }
}

---

}))

您是否安装了liveReload浏览器插件？它启用了吗？你提到的插件与商业产品有关，不是吗？你知道为什么你的示例不能开箱即用吗？在尝试您发布的Github Gist时，我收到了

无法获取

消息。我发现如果您出于某种原因使用

grunt watch:

服务器不会开始侦听端口35729。如果您改为运行

grunt-watch

，它会工作。我还没有费心去确定原因。为什么投票失败？这是一个全面的答案，在技术上是正确的。手表中没有keepalive选项-

http://localhost:9000

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
    }
  }
}