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

Question

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，但没有成功，而且我已经使用express启动服务器时，我不确定live-reload启动服务器时使用的插件是否正确。有什么想法吗？

Answer 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 [<path>...] --port=35729 --delay=someDelay
并将connect-livereload选项更改为：

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

Answer 2

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