如何使用 Polymer 实时加载代码

Question

我正在使用 Polymer 并手动重新加载文件中的更改。所以我尝试使用 browser-sync 和 browser-sync with gulp 但无法成功。

我尝试了以下两种方式：

1) npm 脚本 package.json

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

运行它使用 npm run dev ，它运行但无法检测到文件中的更改。

2) 使用 gulp 与浏览器同步

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);
});

它也运行但无法检测 src 文件夹中 *.html 文件的变化。

任何人都可以帮助我为什么未检测到文件更改。

Answer 1

我自己想出来的，我在 npm scripts 中犯了一个小错误。我已经修改为：

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

现在一切正常！！

如何使用 Polymer 实时加载代码

How to use Polymer for live-reloading of code

polymer

gulp

browser-sync

polymer-1.0