Bitirdikten önce gulp ferahlatıcı ile Browsersync

Question

Ben aşağıdaki kurulum ile, gulp tarayıcıda yaşıyorum. Sorun, kod değiştiğinde browsersync'in bunu tanıması ve sayfayı yenilemesidir. Ancak, betik dosyasının gulp.dest içinde olmasını beklemez, bu yüzden genellikle otomatik olarak yenilenir ve komut dosyası bulunamaz, ardından tekrar yenilenir, oradadır.

Görevin tamamlanmasını beklemesinin sağlanmasının bir yolu var mı?

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

Belki, basit bir yol deneyebilirsiniz, aksi takdirde zaman aşımı belki gerekir: çalışmıyor ise

.pipe(browserSync.reload); 

:

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

Ve komut boru hattının sonundaki browserSync.reload koymak zaman aşımını deneyin ve zamanla oynayın, ancak gerçekten hızlı geliştirme ve derleme ihtiyacınız varsa bu uygun bir çözüm değildir:

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

Bu durumda, komut dizisi boru hattının sonunda yeniden yüklemenize gerek yoktur.

Answer 2

BrowserSync/dosya değişikliği etkinliğinde

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

aşağıdaki enjekte yeniden tarayıcısına önce beklenecek milisaniye cinsinden gulpfile.js de

Saat ayarlanabilir seçeneği reloadDelay sahiptir