gulp-express 没有运行 livereload答案

【问题标题】：gulp-express not running livereloadgulp-express 没有运行 livereload
【发布时间】：2016-11-22 01:20:40
【问题描述】：

按照 gulp-express 规范的 usage 部分，我正在尝试使用 livereload 设置快速开发服务器。我有单独的任务来执行 javascript uglification、将 scss 转换为 css 和缩小 html，所以我只需要从我的 dist 文件夹运行服务器。

到目前为止一切正常，除了 livereload（浏览器不会在 css 更改时重新加载）。

我的吞咽任务：

gulp.task('server', function() {
    server.run(['main.js'],[],[1337]);
    gulp.watch(['/dist/**/*.html'], server.notify);
    gulp.watch(['/dist/**/*.css'], server.notify);
    gulp.watch(['/dist/**/*.js'], server.notify);
    gulp.watch(['/dist/assets/images/*.*'], server.notify);
});

main.js:

// packages
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
var path = require('path');

//app configuration
    // body parser
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    //CORS requests
    app.use(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
        next();
    });
    //log all requests to console
    app.use(morgan('dev'));

app.use(express.static(__dirname + '/dist'));
//catchall route
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

//start the server
app.listen(1337);
console.log('Running on port 1337!');

运行 gulp 服务器时，我在控制台中收到以下消息：

livereload[tiny-lr] 正在监听 35729 ... 在 1337 端口上运行！

我可以在浏览器中加载页面，但它不会在代码更改时自动刷新。

我做错了什么？

【问题讨论】：

标签： javascript node.js express gulp

【解决方案1】：

你正在解决你的问题，我知道这篇文章已经有 9 个月了，但如果它对任何人有用，我会发布一个解决方案，它对我有用，我和你有同样的问题，这个是我的解决方案：

gulp.task('webserver', function() {
    var server = gls(['app.js','public', 3000], undefined, {});
    server.start();

  //Watch files
  gulp.watch([paths.images], function (file) {
      gulp.start('custom-images');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.scripts], function (file) {
     gulp.start('custom-js');
     server.notify.apply(server, [file]);
  });
  gulp.watch([paths.custom_styles], function (file) {
    gulp.start('custom-styles');
    server.notify.apply(server, [file]);
  });
  gulp.watch([paths.templates], function (file) {
      gulp.start('custom-templates');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.index], function (file) {
      gulp.start('usemin');
      server.notify.apply(server, [file]);
  });
  gulp.watch([paths.build_index], function (file) {
      gulp.start('convert-index');
      server.notify.apply(server, [file]);
  });
});

如您所见，据我了解，问题在于您需要将回调函数传递给 gulp.watch() 然后调用 server.notify.apply(server ,[file])，请注意您正在传递服务器和您已修改的文件，我想这是因为您需要告诉 liveReload 这是您已更改的文件。希望对你有所帮助，加油。西格弗里德

我刚刚发现了这个，我认为这也是一个很好的解决方案： https://stackoverflow.com/a/27488331/4613549

【讨论】：