Node.js 用express server吞咽.js livereload？

我正在尝试将我的

gulpfile.js

设置为在express服务器上使用livereload，但运气不好。我看到了一些例子，但它们似乎与静态文件服务器有关

因此，我有一个

app.js

文件，该文件使用jade文件对标准express服务器进行处理，等等。我想做的是让它从gulp.js引导中与livereload一起工作

app.set('port', process.env.PORT || 3000);
    var server = app.listen(app.get('port'), function() {
    debug('Express server listening on port ' + server.address().port);
});

---

有很多插件，比如

gulp-livereload

，

connect-livereload

，

gulp-connect

，

gulp-watch

，那么我怎么才能把它连接起来呢？

我也遇到了同样的问题，找不到任何相关的东西。我的解决方案以

Gulpfile

中的以下代码结束：

var fork = require('child_process').fork;
var tinyLr = require('tiny-lr');
var async = require('async');
var plugins = require('gulp-load-plugins')({ lazy: false });

var lr = null;
var lrPort = 35729;
var buildDir = 'build';
var serverAppFile = path.join(__dirname, 'build/server/app.js');

// This guy starts and stops nodejs process which runs our Express app
var app = {
    start: function(callback) {
        process.execArgv.push('--debug');
        var instance = app.instance = fork(serverAppFile, {
            silent: true
        });
        app.dataListener = function(data) {
            var message = '' + data;
            // Assume that server is started when it prints the following to stdout
            if (message.indexOf('Express server listening on port') === 0) {
                callback();
            }
        };
        instance.stdout.on('data', app.dataListener);
        instance.stdout.pipe(process.stdout);
        instance.stderr.pipe(process.stderr);
    },

    stop: function(callback) {
        app.instance.stdout.removeListener('data', app.dataListener);
        plugins.util.log('Killing Express server with PID', app.instance.pid);
        app.instance.kill('SIGTERM');
        callback();
    }
};

// build-assets task actually processes my client js, less, images, etc and puts them to build dir
// build-server task copies server files (app.js, controllers, views) to build dir

gulp.task('serve', ['build-assets', 'build-server'], function(callback) {
    async.series([
        app.start,
        function(callback) {
            lr = tinyLr();
            lr.listen(lrPort, callback);
        }
    ], callback);
});

gulp.task('watch', ['serve'], function() {
    // Reload page if built files were updated
    gulp.watch([
        buildDir + '/**/*.handlebars',
        buildDir + '/**/*.html',
        buildDir + '/**/*.js',
        buildDir + '/**/*.css'
    ], function(event) {
        var fileName = path.relative(path.join(__dirname, buildDir), event.path);
        plugins.util.log('Detected updated file ' + fileName + ', reloading server and page in browser');
        async.series([
            // Restart Express server
            app.stop,
            app.start,

            // Send reload notification to browser
            function(callback) {
                lr.changed({
                    body: {
                        files: [fileName]
                    }
                });
                callback();
            }
        ]);
    });

    // Perform build steps on source file modifications
    gulp.watch(['app/**/*.js', '!app/**/*.spec.js'], ['build-app-js']);
    gulp.watch(['app/**/*.html'], ['build-templates']);
    gulp.watch(['app/**/*.less'], ['build-less']);
    gulp.watch(['server/**/*.*'], ['build-server']);
});

您需要安装

tiny lr

、

async

、

gulp util

和

gulp load plugins

软件包才能使此示例正常工作。 我想我将为它创建一个单独的Gulp插件=）

看看当代码更改时，哪个插件将重新启动服务器

例如：

gulp.task('develop', function () {
  nodemon({ script: 'app.js', ext: 'html js' })
    .on('restart', function () {
      console.log('restarted!')
    })
})

我添加了一些代码

检测服务器文件中的更改，并通过

在进程重新加载后等待几秒钟，以便给服务器时间运行其初始化代码

触发livereload服务器中的更改

注意1：您的构建还应包括livereload服务器，并在调用“服务”任务之前将livereload脚本附加到html文件

注意2：这是一个永不结束的异步任务，不要将其用作其他任务的依赖项

---

gulp.task（'service'，函数（cb）{
诺德蒙({
脚本：，
观察：
//…将节点搜索：['--debug=5858']添加到调试
//..或节点搜索：['--debug brk=5858']以在服务器启动时进行调试
}).on（'start'，函数（）{
setTimeout（函数（）{
livereload.changed（）；
}，2000）；//等待服务器完成加载，然后重新启动浏览器
});
});

实时重新加载应该可以与任何nodejs脚本一起使用。这是一个很好的例子。

您可以看到我在使用的设置非常适合您。它使用livereload作为服务器运行您的express脚本

以下是我的解决方案：

//gulpfile.js:
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var server = require('gulp-express');
var lr = require('tiny-lr')();

gulp.task('default', function () {
    nodemon({
      script: 'server.js'
    })
    .on('restart', function () {
        console.log('restarted!')
    });

    lr.listen(35729);

    gulp.watch('server/**/*', function(event) {
      var fileName = require('path').relative('3000', event.path);
      lr.changed({
        body: {
          files: [fileName]
        }
      });
    });
});

您还需要在express服务器中包括connect livereload：

app.use(require('connect-livereload')());

---

在bodyParser之前包含它。我已经了解到，如果您有chrome live reload扩展，则不需要此功能。

到livereload将前端和后端更改加载到浏览器。还有一个选择是不使用大口大口。然后，正确的软件包组合是“livereload”、“connect livereload”和“nodemon”的一点帮助。以下是他们的合作方式：

• livereload

  打开一个高端端口，并通知浏览器已更改的公共文件

• connect livereload

  monkey用一个连接到此高端端口的代码片段修补每个提供的HTML页面

• nodemon

  然后用于在已更改的后端文件上重新启动服务器

在Express中设置livereload

您需要将Express设置为在nodemon诱导的重新启动过程中启动livereload服务器监视公用目录并ping浏览器：

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

使用nodemon启动Express

然后，您可以使用nodemon启动服务器，例如，使用专用的watch脚本

npm run watch

这里的关键点是忽略livereload已经监视的公共目录。您还可以配置具有非默认扩展名的文件，如帕格和胡子，以便监视

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

---

当我将

app.js

更改为

bin/www

时，你可以在

中阅读有关我的express 4应用程序的详细说明。谢谢他不是在要求重新启动服务器。他要求livereload，这意味着在文件更改时重新加载浏览器。您在中途完成了kwcto，然后将nodemon与livereload结合，解决了重新加载服务器和浏览器的问题。如果包括livereload部分，这将非常有帮助。看起来您的解决方案可能是这里最好的解决方案，但它还不完整。请注意，如果您调用

livereload.changed（）

per doc spec，这可能会有所帮助。因此，如果这样做，您需要添加一个字符串或一个具有路径的对象。来自@andrei的答案是调用lr listen after，这可能也会有效地重新加载（livereload部分）。我有一个使用复杂的watch和build示例的代码库，许多相关的gulp任务gulp express hs已移动到gulp live server，而且它本身与require（）上的实际服务器文件存在问题，并且需要重新加载浏览器。将nodemon与livereload或gulp live server和watch混合使用似乎是一个解决方案。但对于浏览器，而不是服务器。我几乎没有运气让它正确触发服务器重新加载，例如requires（）等。这是否回答了你的问题？

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},