如何让 livereload 与 grunt 一起工作？答案

【问题标题】：how to get livereload working with grunt?如何让 livereload 与 grunt 一起工作？
【发布时间】：2015-08-08 07:24:10
【问题描述】：

我正在研究 grunt 并尝试通过 grunt 和 connect 运行我的网站。我有一个像这样的 gruntfile：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  // Default task(s).
  grunt.registerTask('default', ['connect:livereload','watch']);

};

问题是当我运行 grunt 时出现错误：

Running "connect:livereload" (connect) task
Warning: undefined is not a function Use --force to continue.

Aborted due to warnings.

我怎样才能让 grunt 跑起来？

【问题讨论】：

run grunt --verbose 你会得到更多错误信息。
是否定义了appConfig.app？

标签： angularjs gruntjs grunt-contrib-connect

【解决方案1】：

我可以看到您调用了appConfig.app（可能是来自 yeoman 生成的项目的 c/p），但您从未创建它。这可能是一个提示，因为您的其余代码似乎是正确的。

【讨论】：

【解决方案2】：

在我目前正在进行的项目中，我决定将插件更改为 BrowserSync。它很容易配置并完成它的工作。

BrowserSync 网站：http://www.browsersync.io/docs/grunt/。配置很简单，并且在他们的网站上给出，所以我不打算在这里复制它。也许如果你对grunt-contrib-connect 有困难，你可以试试这个。

【讨论】：