完了前にgulpをリフレッシュしているBrowsersync

Question

私は以下の設定でgulpでbrowsersyncしています。問題は、コードが変更されると、browsersyncがこれを認識してページを更新するということです。ただし、スクリプトファイルがgulp.destにあるのを待たずに自動的に更新され、スクリプトファイルが見つからない場合は、再度リフレッシュしてください。

タスクが完全に完了するのを待つ方法がありますか？

var browserSync = require('browser-sync').create(); 

gulp.task('cleanScripts', function() { 
    return gulp.src('./assets/js', {read: false}) 
      .pipe(clean()); 
}); 

gulp.task('scripts', ['cleanScripts'], function() { 
    return browserify('./client/js/main.js') 
     .bundle() 
     .on('error', function (e) { 
      gutil.log(e); 
     }) 
     .pipe(source('main-' + packageJson.version + '.js')) 
     .pipe(buffer()) 
     .pipe(uglify()) 
     .pipe(gulp.dest('./assets/js')); 
}); 

//Watch our changes 
gulp.task('watch', function() { 
    browserSync.init({ 
    proxy: "localhost:3000" 
    }); 
    gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload); 
}); 

Answer 1

あなたは多分、簡単な方法を試すことができそうでなければ、タイムアウト多分必要があります動作しない場合は

.pipe(browserSync.reload); 

を：

gulp.task('watch', function() { 
watch(['./client/js/**/*.js'], function() { 
    gulp.start('scripts'); 
}); 
}); 

とスクリプトをパイプラインの末尾にbrowserSync.reloadを置きますタイムアウトを試して時間をかけて試してみてください。しかし、速い開発とコンパイルが本当に必要な場合、これは適切な解決策ではありません：

gulp.task('watch', function() { 
watch(['./client/js/**/*.js'], function() { 
    gulp.start('scripts'); 
    setTimeout(function(){ 
    browserSync.reload; 
    }, 1000); //1 second 
}); 
}); 

この場合、スクリプトパイプラインの最後にリロードする必要はありません。

Answer 2

BrowserSyncはgulpfile.js

時に設定することができますオプションreloadDelayは、ミリ秒単位で、注入/再ロードするようにブラウザに指示する前に待機しなければならないファイル変更イベント

gulp.task('browserSync', function() { 
    browserSync.init({ 
     server: { 
      baseDir: 'app' 
     }, 
     reloadDelay: 100 
    }); 
}); 

次