Смотреть новый файл в gulp and browsersync issue

Question

Я использую браузеры для перезагрузки браузера при изменении файла. и это отлично работает. Но когда я создаю новый файл, такой как html - scss - js bowsersync, не работает !!! Как исправить эту проблему?

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' ]); 

Это должно работать. Я надеюсь, что это помогает.