【问题标题】:How to use Polymer for live-reloading of code如何使用 Polymer 实时重新加载代码
【发布时间】:2017-01-24 10:23:08
【问题描述】:

我正在使用 Polymer 并手动重新加载文件中的更改。所以我尝试使用 browser-syncbrowser-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 文件的更改。

谁能帮助我为什么没有检测到文件更改。

【问题讨论】:

    标签: gulp polymer polymer-1.0 browser-sync


    【解决方案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 2.x 元素项目的用户,请使用 "watch": "browser-sync start --proxy localhost:8081 --startPath \"components/MY_ELEMENT\" --files \"**/*.html\""
    • 使用polymer 3 和cli,似乎这应该只是在默认生成中,谁不需要这个-
    猜你喜欢
    • 1970-01-01
    • 2021-05-21
    • 2017-01-25
    • 2016-02-15
    • 1970-01-01
    • 1970-01-01
    • 2016-09-03
    • 1970-01-01
    • 2019-05-09
    相关资源
    最近更新 更多