web-dev-qa-db-ja.com

ライブリロードが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の重要性は何ですか？

gulplivereload
14
Misha Moroshko

  1. connect.reload()はストリームで使用する必要があります。あなたの例では、それをスタンドアロン関数として呼び出そうとしていますが、これは何もしません。 connect.reload()を呼び出すと、入力を受け取り、それを使って何かを行うストリームハンドラーが返されます。 2番目の例では事実上何もしません。

  2. returnまたは タスクは同期的に実行されます が必要です。 （promiseを返すか、コールバック関数を使用することもできます。）

    基本的に、gulpが非同期タスクの進行状況を追跡する方法を提供しない場合は、関数から戻ったときにタスクが完了したと見なす必要があります。パイプをreturnすると、パイプが最後に到達するのをリッスンできます。

また、 gulp-watch 時計の場合、変更されたファイルのみを通過するため、ライブリロードに必要なものです。

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

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

リロード機能をセットアップに接続する方法を理解するのにも少し時間がかかりました。開発中にフルビルドタスクを実行しているとは限らないため、ウォッチタスクには複数のフォルダーが含まれています。一部のファイルは、Yeoman gulp-webapp generator に基づいて.tmpフォルダーからロードされます。これが最速の方法かどうかはわかりませんが、次のように解決しました。

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

それが誰かにも役立つことを願っています。

3
Nicemaker

理由は完全にはわかりませんが（@overzealousが良い点です）、generator-gulp-webappに投稿されたこの問題と同様に、少ないファイルが一貫して「バージョンビハインド」で更新されていることがわかりました： Livereloadのようです変更の読み込みを遅らせるために＃77

バージョン0.3. ジェネレーター-gulp-webappはconnect/livereloadの代わりに browsersync を使用するため、gulpfileを更新してすべての問題を解決しました！

HTH

2
ptim