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

这应该工作。我希望它有帮助。