Browsersync mit Schluck erfrischend vor dem Abschluss

Question

Ich bin Browsersync in Schluck, mit den folgenden Setup. Das Problem ist, dass browsersync dies erkennt und die Seite aktualisiert, wenn sich der Code ändert. Es wartet jedoch nicht auf die Skriptdatei in der gulp.dest, so dass es in der Regel automatisch aktualisiert und die Skriptdatei nicht gefunden wird, und dann erneut aktualisieren, es ist da.

Gibt es eine Möglichkeit sicherzustellen, dass die Task vollständig ausgeführt wird?

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

Sie vielleicht auf einfache Weise versuchen können, sonst werden Sie vielleicht Timeout benötigen:

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

Und browserSync.reload Skripte am Ende der Pipeline setzen:

.pipe(browserSync.reload); 

Wenn nicht funktioniert Versuchen Sie Timeout und spielen Sie mit Zeiten, aber das ist keine richtige Lösung, wenn Sie wirklich schnelle Entwicklung und Kompilierung benötigen:

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

In diesem Fall müssen Sie am Ende der Skriptpipeline nicht neu laden.

Answer 2

BrowserSync hat die Option reloadDelay, die auf gulpfile.js eingestellt werden kann

Zeit in Millisekunden zu warten, bevor Sie den Browser anweist, nach einer Datei Änderungsereignis neu zu laden/EINSPRITZ

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