How to use Polymer for live-reloading of code

Question

I am using Polymer and reloading changes in files manually. So I tried using using browser-sync and also browser-sync with gulp but not able to succeed.

I tried two following ways :

1) npm scripts in package.json

"scripts": {
    "dev": "polymer serve | npm run watch",
    "watch": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
  },

Running it using npm run dev ,it ran but not able to detect the changes in the file.

2) Using gulp with browser-sync

var gulp = require('gulp');
var bs = require('browser-sync').create(); 

gulp.task('browser-sync', function() {
    bs.init({
       port : 5000,
        proxy: {
          target : "localhost:8080"
        }
    });
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("*.html").on('change', bs.reload);
});

It also ran but not able to detect the changes in *.html file which is present in src folder.

Can anybody help me why changes of files not being detected.

Answer 1

I figured it myself, i was doing one small mistake in npm scripts. I have modified as :

"scripts": {
    "dev": "polymer serve --port 8081 | npm run watch",
    "test": "polymer test",
    "watch": "browser-sync start --proxy localhost:8081 --files \"src/**/*.*, index.html, *.js\""
  },

Now it is working fine !!