Невозможно подключиться к работе с экспресс-сервером в задаче gulp

Question

Я работаю генератором Yeoman gulp-webapp. Я изменил свою задачу gulp serve, чтобы использовать мой сервер Express, а не сервер по умолчанию, с которым он поставляется. Моя проблема связана с функциональностью Livereload. Я пытаюсь просто подключить connect-livereload для работы с моим сервером Express, вместо того, чтобы устанавливать новые зависимости. Это в моем понимании, что большинство соединить промежуточное программное обеспечение должно работать нормально с курьерским, поэтому я предполагаю, что подключить LiveReload совместим с экспресс 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'); 
}); 

С эта простая настройка, когда я запускаю gulp serve в моем cmd, все работает отлично, и я могу принимать запросы по адресу http://localhost:3000.

Теперь, если я пойду и изменить цвет фона тела от #fafafa к #f00 в main.css и нажмите сохранить, мой выход глотком ответит main.css was reloaded, как показано в нижней части этого экрана.

Однако моя веб-страница не обновляется. Цвет фона по-прежнему светло-серый, а не красный.

Возможно, существует конфликт между конфигурацией моего экспресс-сервера и тем, как gulp обрабатывает его файлы? Является ли мой Экспресс-сервер, заставляющий использовать app/styles/main.css вместо использования .tmp/styles/main.css? Должен ли сценарий, связанный с печенью, обрабатывать инъекцию нового временного файла?

Спасибо за любую помощь.

EDIT:

Я был в состоянии двигаться немного вперед, добавив livereload.js к блоку сценария моего индексного файла, например, так:

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

Я теперь в состоянии получить живые изменения подталкивается к клиенту. Почему этот файл не вводился раньше? Как я могу гарантировать, что это привыкает программно, а не вставляет его в мои файлы?

Answer 1

Мне удалось пройти эту проблему, удалив app.use(require('connect-livereload')({port: 35729})) из моего gulpfile вместе с несколькими другими строками и имея этот экземпляр в файле app.js моего сервера Express.

express задача моего gulpfile теперь выглядит следующим образом:

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

Я добавил в connect-livereload чуть выше, где я указываю мой статический каталог Экспресс:

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

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

После того, как я начал использовать эту установку, Я получил скрипт livereload.js, введенный в мой документ, а изменения на стороне клиента теперь автоматически обновлены именно так, как я хотел.

Надеюсь, это поможет кому-то!