Watch new file in gulp and browsersync issue

Question

I'm use browsersync to reload browser when file changed. and it's work perfect. But when i create new file such as html - scss - js bowsersync don't work !!! How to fix this problem?

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

Turns out the solution is rather simple. Don't use gulp.watch. Use browserSync.watch instead. I'm also going to reorganize your task, and add a config. It helps in this instance:

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

That should work. I hope it helps.