在 Express 节点应用程序中使用 connect-livereload答案

【问题标题】：Using connect-livereload in an Express node app在 Express 节点应用程序中使用 connect-livereload
【发布时间】：2015-09-10 10:26:25
【问题描述】：

在this 很棒的文章之后，关于如何使用 npm 作为构建工具，我想在构建 nodejs express web 应用程序时实现它。我的节点应用是在 8080 端口上创建的，这是我的 server.js 文件的简化版本：

var env = process.env.NODE_ENV

var path = require('path');
var express = require('express');
var logger = require('morgan');

var routes = require('./routes');

var app = express();

app.set('port', process.env.PORT || 8080);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.engine('jade', require('jade').__express)

var Oneday = 86400000;
app.use(express.static(__dirname + '/www', {
    maxAge: env == 'development' ? 0 : Oneday
}));

app.use(logger('dev'));

app.use(express.static(path.join(__dirname, '/public'), {
    maxAge: env == 'development' ? 0 : Oneday
}))

if (env == 'development') {
    // var liveReloadPort = 9091;
    app.use(require('connect-livereload')({
        port: 8080
        // src: "js/"
            // port: liveReloadPort
    }));
}

routes.blog(app);
routes.frontend(app, passport);

app.use(function(err, req, res, next) {
    console.log(err.stack);
    res.status(500).send({
        message: err.message
    })
});

app.listen(app.get('port'));
console.log('Server starting on port: ' + app.get('port'));

在需要重新加载之前我正在观看的文件位于www/js。我使用 npm 作为构建工具，在使用 npm 启动 server.js 之前，我启动了一个单独的进程来执行 watchify source/js/app.js -v -o wwww/js/bundle.js 我确实检查了 watchify 是否正常工作，并在我保存文件时进行更新。但是一旦文件被更改，就没有 livereload。我在控制台中得到的错误是： Uncaught SyntaxError: Unexpected token < 我可以看到 connect-livereload 在 html 中插入了这个脚本：

<script>
//<![CDATA[
document.write('<script src="//' + (location.hostname || 'localhost') + ':8080/livereload.js?snipver=1"><\/script>')
//]]>
</script>
<script src="//localhost:8080/livereload.js?snipver=1"> </script>

我也尝试使用原始文章中提到的live-reload，但没有成功，我不确定它是否是正确的插件，因为live-reload 启动了一个服务器，而我已经用 express 启动了一个服务器。有什么想法吗？

【问题讨论】：

这能回答你的问题吗？ Node.js - Auto Refresh In Dev

标签： node.js express npm livereload

【解决方案1】：

connect-livereload 只将脚本插入到 html 中（这样就不需要浏览器插件了）。

你仍然需要一个单独的 livereload 服务器，尝试node-livereload、grunt-contrib-connect 或 grunt-contrib-watch ...因为你想使用 npm 作为构建工具，第一个应该是值得推荐的。

那么您必须将 livereload 端口更改为正在运行的 live-reload 服务器端口（默认端口为 35729）：

  app.use(require('connect-livereload')({
    port: 35729
  }));

您尝试的服务器：live-reload 应该也可以工作。

您可以尝试以以下方式开始吗：

live-reload [<path>...] --port=35729 --delay=someDelay

并将 connect-livereload 选项更改为：

  app.use(require('connect-livereload')({
    src: "localhost:35729"
  }));

【讨论】：

谢谢。你引导我找到解决方案。解决它的方法是从live-reload --port 9091 www/js/ 开始，我在此处指示的端口是我在 connect-livereload app.use(require('connect-livereload')({ port: 9091 })); 中使用的端口@
@Bondifrench 很高兴它有帮助。

【解决方案2】：

此答案显示了如何设置 livereload 以将前端和后端文件的更改刷新到浏览器。它可能对你有帮助。 https://stackoverflow.com/a/60542132/5032692

【讨论】：