在gulp和瀏覽器同步中觀看新文件

Question

我使用瀏覽器同步來在文件更改時重新加載瀏覽器。這是完美的工作。 但是，當我創建新的文件，如html - scss - js bowersync不工作！ 如何解決這個問題？

gulpjs：

// Browser Sync 
 
gulp.task('browser-sync', function() { 
 
    browserSync({ 
 
     injectChanges: true, 
 
     notify: false, 
 
     server: "app" 
 
    }); 
 
}); 
 

 

 
gulp.task('default',['sass','scripts', 'browser-sync'], function(){ 
 
    gulp.watch("app/**/*.html").on('change', reload); 
 
    gulp.watch('app/img/*.*', ['bs-reload','images']); 
 
    gulp.watch('src/scss/**/*.scss', ['sass']); 
 
    gulp.watch('src/js/**/*.js', ['scripts','uglify']); 
 
});

Answer 1

原來的解決方案是相當簡單的。不要使用gulp.watch。改用browserSync.watch。我也將重新組織你的任務，並添加一個配置。它有助於在這種情況下：

gulpfile.js

// ------------------------------------------------------ Config 
var config = { 
    bs: { 
     opts: { 
      injectChanges: true, 
      notify: false, 
      server: "app" 
     }, 
     watch: [ 
      'app/**/*.html', 
      'app/img/*.*', 
      'src/js/**/*.js' 
     ] 
    } 
} 

// ------------------------------------------------ Browser Sync 
gulp.task('browser-sync', function() { 
    browserSync.init(config.bs.opts); 

    browserSync.watch('./src/scss/**/*.{scss,sass}', [ 'sass' ]); 
    browserSync.watch('src/js/**/*.js', [ 'scripts', 'uglify' ]); 
    browserSync.watch('app/img/*.*', [ 'images' ]); 
    browserSync.watch(config.bs.watch).on('change', reload); 
}); 

// ----------------------------------------------------- Default 
gulp.task('default', [ 'sass','scripts', 'browser-sync' ]); 

這應該工作。我希望它有幫助。