node.js - 无法在gulp任务中使connect-livereload与Express Server一起使用

我正在使用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脚本不应该处理新临时文件的注入(inject)吗？

谢谢你的帮助。

编辑:

通过将livereload.js添加到索引文件的脚本块中，我可以前进一点，如下所示:

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

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

最佳答案

通过从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);
});

我在Express中指定我的静态目录的上方添加了connect-livereload:

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

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

一旦开始使用此设置，就将livereload.js脚本注入(inject)到文档中，并且客户端更改现在可以按照我的需要自动刷新。

希望这对某人有帮助!

关于node.js - 无法在gulp任务中使connect-livereload与Express Server一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28069417/