CODEWITHSUNDEEP
javascriptnode.jswebpackbrowser-sync
Matthew
Matthew

Reputation: 962

Browser-sync not reloading for file event add/change

Im using browser-sync with webpack, since there are some files in the build that webpack doesnt have rules for. For some reason browser-sync is not triggering reloads when my image files are modified/added/removed?

In the terminal its logging [BS] File event [add] : image.png and [BS] File event [change] : image.png

But unlike when I edit a .html file, its not saying [BS] Reloading Browsers...

This is my browser-sync init:

browserSync.init({ files: ['./**.html', './**.png'] });

Upvotes: 3

Views: 8655

Answers (5)

Danny Hurlburt
Danny Hurlburt

Reputation: 742

After looking at the browser-sync code base, BS will either perform a page refresh (aka browser reload) or the file changes will be injected. BS performs injection for files with the following extensions: "css", "gif", "jpg", "jpeg", "png", "svg", "webp", "map".

If you want to disable code injection for all file types, then set the injectChanges config to false. Or add the --no-inject-changes command line flag. This option will turn off injection for all file types.

If you still want to allow code injection for a subset of the file types listed above, then remove injectChanges config or set it to false. Also, remove the --no-inject-changes if set. Then add entries in the files array for the files requiring browser reload. For example:

files: [
    {
        match: ['./img/**'],
        fn:    function (event, file) {
            this.reload()
        },
    },
],

Upvotes: 2

Altin
Altin

Reputation: 2245

I had the same problem and the solution that worked for me is injectChanges:false

Check docs page: https://www.browsersync.io/docs/options#option-injectChanges

so try this:

browserSync.init({
  injectChanges: false,
  files: ['./**.html', './**.png']
});

of for those who use Laravel Mix (like I do):

mix.browserSync({
  injectChanges: false,
  files: ['./**.html', './**.png']
});

Upvotes: 0

Marc Wiest
Marc Wiest

Reputation: 359

By default BroswerSync only listens for change events. The watchEvents option can be changed to listen to adding of files. Add add, unlink, addDir and unlinkDir to listen to adding and removing of files and directories.

browserSync.init({
    files       : [ './img/**' ]
    watchEvents : [ 'change', 'add', 'unlink', 'addDir', 'unlinkDir' ]
});

Upvotes: 2

Matthew
Matthew

Reputation: 962

Turns out that I needed to pass a custom event handler to browserSync.init files option, that responded to any kind of events with a reload()

example:

browserSync.init({
        files: [
            {
                match: ['./img/**'],
                fn:    function (event, file) {
                    this.reload()
                }
            }
        ]
    })

Upvotes: 4

Vladimir Korshunov
Vladimir Korshunov

Reputation: 3090

if you want watch all HTML files in current directory use ./*.html or *.html

** — it's subdirectory; * — it's files in directory

Examples:

  • ./**/*.html — watch in all subdirectory files with extension html
  • app/js/*.js — watch in directory app/js all files with extension js

More information about Browsersync options

Upvotes: -1

Related Questions