Почему не работает перезагрузка с помощью gulp -connect?

Я использую gulp-connect следующим образом:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);

  gulp.watch(distPaths, function() {
    return gulp.src(distPaths)
               .pipe(connect.reload());
  });
});

Бит перезагрузки в реальном времени отлично работает.

Мой вопрос в том, почему следующее не работает:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);
  gulp.watch(distPaths, connect.reload);
});

Что означает бит gulp.src(distPaths)?

Кроме того, какое значение return?

ОТВЕТЫ

Ответ 1

  • connect.reload() должен использоваться в потоке. В вашем примере вы пытаетесь назвать это автономной функцией, которая ничего не делает. Вызов connect.reload() возвращает обработчик потока, который принимает ввод и что-то делает с ним. Это эффективно не-op во втором примере.

  • Вам нужны return или задачи, выполняемые синхронно. (Вы также можете вернуть обещание или использовать функцию обратного вызова.)

    В принципе, если вы не предоставляете какой-либо способ для gulp отслеживать ход ваших асинхронных задач, он должен предположить, что они полны, когда вы возвращаетесь из функции. Если вы return канал, он может слушать, чтобы он достиг цели.

Кроме того, может быть лучше использовать gulp-watch для ваших часов, потому что он проходит только через измененные файлы, что вы хотите для живой перезагрузки:

var watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch(paths.scss, ['scss']);
    watch(distPath).pipe(connect.reload());
});

Ответ 2

Мне потребовалось некоторое время, чтобы выяснить, как подключить функцию перезагрузки к моей настройке. Моя задача просмотра включает более одной папки, поскольку я не всегда выполняю задачу полной сборки во время разработки. Некоторые файлы загружаются из папки .tmp на основе генератора Yeoman gulp -webapp. Я не уверен, что это самый быстрый способ, но я решил это следующим образом:

 gulp.watch([
    '.tmp/*.html',
    '.tmp/styles/**/*.css',
    'app/js/**/*.js',
    'app/images/**/*'
]).on('change', function (file) {
    gulp.src( file.path)
        .pipe( $.connect.reload() );
});

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

Ответ 3

Я не совсем понимаю, почему (@overzealous делает хорошие моменты), но я обнаружил, что мои меньше файлов обновлялись последовательно "версия позади", аналогичная этой проблеме, отправленной генератору gulp -webapp: Livereload, по-видимому, сохраняет за собой изменения при загрузке # 77

Поскольку версия 0.3.0 generator- gulp -webapp использует browsersync вместо connect/livereload, и обновление моего gulpfile в соответствии с решением всех моих проблем!

НТН