在Express Node应用中使用connect-livereload

Question

在Express Node应用中使用connect-livereload

3

参考这篇有关如何使用npm作为构建工具的优秀文章，我希望在构建nodejs express web应用程序时实现它。我的node应用程序创建于端口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>

我也尝试使用原文中提到的自动刷新，但没有成功。我不确定是否使用正确的插件，因为当我已经用express启动了一个服务器时，live-reload还会再次启动一个服务器。你有什么想法吗？

- Bondifrench

这个回答解决了你的问题吗？Node.js - 在开发中自动刷新 - pspi

2个回答

1

这个答案展示了如何设置livereload以刷新前端和后端文件中的更改到浏览器。它可能对你有所帮助。 https://dev59.com/7WAf5IYBdhLWcg3wVxjh#60542132

- pspi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andineck · Accepted Answer

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"
  }));