Can Browser-Sync be configured to watch for incoming files?

[tevko]

Let's say I have browser-sync watching my css directory, which only contains foo.css. If I add bar.css, it seems as if browser-sync doesn't see the file until it is restarted. If it were able to watch for incoming files, it would be a lot easier to use with build tools like grunt and gulp, being that when a default task is run that contains a clean function and a browser-sync function, certain files are removed and added back before browser-sync has the chance to notice that they exist in the directory it is being configured to watch. Currently I have removed gulp-clean from my gulpfile because of this issue, being that when the clean task and the browser-sync task run at the same time, gulp-clean will remove my css file in my build directory before browser-sync notices it, at which the css file is added back when a change is made to the file in my dev directory. This means that browser-sync will not see any css files in dev/css/ because it cannot tell that they were added to the folder

[shakyShane]

Yep - the file watcher is not so smart at the moment... It's getting an overhaul as we speak though & it will fix this issue along with a couple of others.

[shakyShane]

Just read this again.

If your issue is just about BrowserSync noticing new files in a DIR - then it can already do that. (albeit with a few bugs).

Check this screencast showing how it can recognise new files without being restarted http://quick.as/6k7ipp4

[shakyShane]

Closing this as this functionality can be implemented via the new api if needed.

[gansbrest]

Can you provide a sample of how to tell browserify to watch new files via new API?

[shakyShane]

Do you mean reload the browser after a browserify build?

[gansbrest]

Here is my gulp config which uses browserSync:

var browserSync = require('browser-sync');
var gulp        = require('gulp');
var themesPath  = "themes/bootstrap/";

gulp.task('browserSync', ['build'], function() {
    browserSync({
    files: [
      themesPath + '/partials/*',
      themesPath + '/templates/*',
      themesPath + '/build/**/*'
    ],
    proxy: "localhost:8888",
    debounce: 1500,
    open: false
    });
});

If I touch themes/bootstrap/partials/test.html browserSync doesn't see that file and doesn't refresh. Same issue @tevko originally mentioned with files with dynamic names ( if gulp is configured to produce those ).

You mentioned "Closing this as this functionality can be implemented via the new api if needed.", would be great if you provide some pseudo code or couple words of how to make sure newly added files trigger browser refresh?

[Avcajaraville]

Yeah, this issue is old, but Im running into the same issues... browsersync does not recognize new/remove/rename files ...

Would appreciate much a quick snippet or similar where we can see how to do it.

Thanks a lot !

[Luis-Palacios]

I am on the same train here, an example ins this discussion would be great!

[evanre]

+1

[mcqj]

+1