用 Grunt 重新加载？答案

【问题标题】：LiveReload with Grunt?用 Grunt 重新加载？
【发布时间】：2014-01-06 23:10:36
【问题描述】：

除了watch github page之外，我还咨询了this answer作为起点。

我的监视任务如下所示：

watch: {
  less: {
    files: ['less/**/*.less'],
    tasks: ['less'],
    options: {
      livereload: true
    }
  },
  handlebars: {
    files: ['templates/**/*.hbs'],
    tasks: ['handlebars'],
    options: {
      livereload: true
    }
  }
}

首先我尝试使用浏览器扩展，然后我在我的 index.html 中添加了这个脚本（并验证它已加载）

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

我也尝试将此添加到我的手表 js：

livereload: {
  files: ['dev/**/*'],
  options: {
    livereload: true
  }
}

我还有一个连接任务，我尝试运行 grunt 有或没有它都无济于事。

connect: {
  dev: {
    options: {
      port: 35729
    }
  }
}

仍然没有实时重新加载...

【问题讨论】：

您用于启动的确切命令是什么？

标签： javascript gruntjs livereload grunt-contrib-watch

【解决方案1】：

这是我的 Gruntfile.js，我的连接版本是 0.9.0，这个配置可以用于不同的 livereroad 端口

module.exports = function (grunt) {

require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
    watch: {
        demo: {
            files: ['web/*.*'],
            options: {
                livereload: 5000
            }
        },
        dev:{
            files: ['web1/*.*'],
            options: {
                livereload: 3030
            }
        }
    },
    connect: {
        demo: {
            options: {
                base: "web",
                port: 1111,
                hostname: '*',
                livereload: 5000,
                open: {
                    target: 'http://127.0.0.1:1111'
                }
            }
        },
        dev:{
            options: {
                base: "web1",
                port: 2222,
                hostname: '*',
                livereload: 3030,
                open: {
                    target: 'http://127.0.0.1:2222'
                }
            }
        }
    }
})
grunt.registerTask('demo', ['connect:demo', 'watch:demo']);
grunt.registerTask('dev',['connect:dev','watch:dev']);

}

【讨论】：

谢谢提示，这是我在stackoverflow中的第一个答案，我只在我的chrome中发现了这个问题，它可以在mac10.10 safari中更改端口成功并且websocket可以正常工作

【解决方案2】：

这行得通吗？

watch: {
  options: { livereload: true },
  less: {
    files: ['less/**/*.less'],
    tasks: ['less']
  },
  //...
}

还可以尝试以详细模式 (grunt do-something -v) 运行以检查 livereload 服务器是否启动以及端口是否正确。

【讨论】：

你的js和我的js一模一样，但是-v的提示有点酷
不完全一样，不同的是把选项放在watch对象的根目录下。
我只在 sass 编译而不是更少时遇到完全相同的问题。当我使用 -v 开关时，我可以看到 Live reload 服务器已在端口 35729 上启动。当我对其中一个 sass 文件进行更改时，页面会重新加载，但没有任何反应。有趣的是，输出显示：Live reloading style\v4\sass_core_salvaged.scss... 所以看起来它正在将更改后的 scss 文件发送到实时重新加载服务器而不是生成的 css 文件。我该如何改变这个？

【解决方案3】：

Watch 开箱即用，无需 livereload。您是否尝试过删除 livereload 选项和脚本包含？

然后：咕哝；咕噜咕噜的手表

（默认任务进行构建，然后 watch 密切关注变化）

【讨论】：