在 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，但没有成功，我不确定它是否是正确的插件，因为 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 应该也能正常工作。

你能尝试从以下开始：

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

并将 connect-livereload 选项更改为：

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

Answer 2

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

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

Using connect-livereload in an Express node app

node.js

npm

express

livereload