Browser Sync cli non-stop file changed when used with postcss-cli watch

[nelsyeung]

I'm not really sure whether this is a browser-sync problem or postcss-cli, but when the two work together there will be non-stop file changed on the css file.

package.json

{
  "name": "test",
  "scripts": {
    "postcss": "postcss --use autoprefixer main.css -o main.css -w",
    "browser-sync": "browser-sync start --server --files 'index.html, main.css'",
    "start": "parallelshell 'npm run postcss' 'npm run browser-sync'"
  },
  "devDependencies": {
    "autoprefixer": "^5.2.0",
    "browser-sync": "^2.8.2",
    "parallelshell": "^2.0.0",
    "postcss-cli": "^1.5.0"
  }
}

Simply run npm start and you will get non-stop file changed on main.css.

Some notes:

• Using other watch packages will not cause this problem. However, using watch with postcss will cause the problem.
• index.html and main.css don't require to have any contents.
• OS: Mac OS 10.10 (Yosemite)

[shakyShane]

You have an error in your setup - you don't want to watch and compile to the same CSS file. You should have a source CSS file & a resulting CSS file (that you link to in your HTML page).

Change to something like

{
  "name": "test",
  "scripts": {
    "postcss": "postcss --use autoprefixer main.css -o main-dist.css -w",
    "browser-sync": "browser-sync start --server --files 'index.html, main-dist.css'",
    "start": "parallelshell 'npm run postcss' 'npm run browser-sync'"
  },
  "devDependencies": {
    "autoprefixer": "^5.2.0",
    "browser-sync": "^2.8.2",
    "parallelshell": "^2.0.0",
    "postcss-cli": "^1.5.0"
  }
}