CODEWITHSUNDEEP
npmbrowser-syncbuild-toolsnpm-scripts
RobC
RobC

Reputation: 25002

A browsersync task with npm scripts is not refreshing browser after file changes

I'm encountering an issue with using an npm scripts task to launch a browsersync server which refreshes after file updates...

A task named serve is defined in the scripts property of the package.json as follows:

{
    ...
    "scripts": {
        "serve": "browser-sync start --server \"dev\" --files \"./dev/css/*.css, ./dev/js/*.js, ./dev/*.html\" --browser \"Google Chrome\""
    },
    "devDependencies": {
        "browser-sync": "^2.17.0"
    }
}

My directory is structured as follows:

project
│
├── package.json
│
├─── dev
│   │
│   ├───index.html
│   │
│   ├─── css
│   │   │
│   │   └───style.css
│   │
│   └─── js
│       │
│       └───main.js
│
└─── node_modules
    │
    ├───browser-sync
    │
    ├───browser-sync-client
    │
    ├───browser-sync-ui
    │
    └─── ...

When I cd to the project directory and type npm run serve the browsersync server correctly starts, opens index.html via http://localhost:3000/ in the Chrome browser.

If I then edit either index.html, style.css, or main.js and save the changes browsersync DOES NOT auto refresh to reflect those changes in the browser.

Interestingly, after I run the same command (i.e. the same as specified in the package.json without escaping the double quotes) directly via the CLI as follows:

$ browser-sync start --server "dev" --files "./dev/css/*.css, ./dev/js/*.js, ./dev/*.html" --browser "Google Chrome"

...the browser correctly opens index.html and after editing saving changes to either index.html, style.css, or main.js browsersync DOES currectly refresh the browser.

The version of browsersync I have installed both globally and locally (i.e. within the project folder) are the same version (2.17.0).

Is there something I'm doing incorrectly in scripts section of the package.json?

Upvotes: 1

Views: 2234

Answers (1)

chalo
chalo

Reputation: 1059

I just had the same problem today, I wanted to set up a simple file to do tests.

The way it worked for me was to remove the escape characters and add the routes directly:

Example:

 .....
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files ./**/*",
  }
 .....

I am serving all files in the current folder

Here I am aware of how npm uses the paths inside the commands

Upvotes: 1

Related Questions