无法在gulp任务中使用connect-livereload与express server一起工作

Question

我正在使用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>

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

Answer 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脚本注入到我的文档中，并且客户端更改现在可以自动刷新。

希望这有助于某人！