无法让 connect-livereload 在 gulp 任务中与 express 服务器一起使用答案

【问题标题】：Unable to get connect-livereload to work with express server in gulp task无法让 connect-livereload 在 gulp 任务中与 express 服务器一起使用
【发布时间】：2015-03-20 02:27:15
【问题描述】：

我正在使用 Yeoman 的 gulp-webapp 生成器。我已经修改了我的gulp serve 任务以使用我的 Express 服务器，而不是它附带的默认连接服务器。我的问题是 Livereload 功能。我试图简单地将 connect-livereload 移植到我的 Express 服务器上，而不必安装新的依赖项。据我了解，大多数连接中间件应该可以在 Express 上正常工作，所以我假设 connect livereload 与 Express 4 兼容。

以下是我的 gulpfile 中相关任务的内容：

gulp.task('express', function() {
  var serveStatic = require('serve-static');
  var app = require('./server/app');
  app.use(require('connect-livereload')({port: 35729}))
    .use(serveStatic('.tmp'));

  app.listen(3000);
});

gulp.task('watch', ['express'], function () {
  $.livereload.listen();

  // watch for changes
  gulp.watch([
    'app/*.ejs',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/images/**/*'
  ]).on('change', $.livereload.changed);

  gulp.watch('app/styles/**/*.css', ['styles']);
  gulp.watch('bower.json', ['wiredep']);
});

gulp.task('styles', function () {
  return gulp.src('app/styles/main.css')
    .pipe($.autoprefixer({browsers: ['last 1 version']}))
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('serve', ['express', 'watch'], function () {
  require('opn')('http://localhost:3000');
});

通过这个简单的设置，当我在 cmd 中运行 gulp serve 时，一切正常，我可以接受 http://localhost:3000 的请求。

现在，如果我在 main.css 中将主体的背景颜色从 #fafafa 更改为 #f00 并点击保存，我的 gulp 输出将响应 main.css was reloaded，如此屏幕截图底部所示。

但是，我的网页没有更新。背景颜色仍然是浅灰色而不是红色。

我的快速服务器配置和 gulp 处理其文件的方式之间可能存在冲突吗？我的 Express 服务器是否强制使用 app/styles/main.css 而不是使用 .tmp/styles/main.css？ livereload 脚本不应该处理新临时文件的注入吗？

感谢您的帮助。

编辑：

通过将 livereload.js 添加到我的索引文件的脚本块中，我能够向前推进一点，如下所示：

<script src="http://localhost:35729/livereload.js"></script>

我现在可以将实时更改推送到客户端。为什么这个文件之前没有被注入？如何确保以编程方式使用它而不是将其粘贴到我的文件中？

【问题讨论】：

标签： node.js express yeoman gulp livereload

【解决方案1】：

我可以通过从我的 gulpfile 中删除 app.use(require('connect-livereload')({port: 35729})) 以及其他几行代码来解决这个问题，然后在我的 Express 服务器的 app.js 文件中进行实例化。

我的 gulpfile 的 express 任务现在看起来像这样：

gulp.task('express', function() {
  var app = require('./server/app');
  app.listen(3000);
});

我在上面的 connect-livereload 中添加了我在 Express 中指定静态目录的位置：

if (app.get('env') === 'development') {
  app.use(require('connect-livereload')());
}

app.use(express.static(path.join(__dirname, '../app')));

开始使用此设置后，我将 livereload.js 脚本注入到我的文档中，并且客户端更改现在可以按照我的意愿自动刷新。

希望这对某人有所帮助！

【讨论】：