gulp - 将浏览器同步放在 polymer 自定义构建的 gulpfile 中的正确位置在哪里？

Question

我正在使用最新的 https://github.com/PolymerElements/generator-polymer-init-custom-build

并希望将 Browsersync 添加到 Polymer custom-build gulpfile.js

但我不明白它在 Polymer 自定义构建的 gulpfile.js 中的正确位置

能否请您提供一个示例，说明如何将 Browsersync 合并到自定义构建的 gulpfile.js 中？

Answer 1

我最终使用了来自 https://github.com/seaneking/generator-polymer-element 的生成器.

这是我的工作 gulpfile.js:https://jsfiddle.net/svantetobias/qqwcrwcf/1/

我认为这里的关键部分是:

// Core deps
// Using require() because of rollup babel preset
const gulp = require('gulp');
const gulprun = require('run-sequence');
const browserSync = require('browser-sync');
const bs = browserSync.create()
const OPTIONS = {
    browserSync: {
      server: {
        baseDir: './',
        index: 'demo/index.html',
        routes: {
          '/': './bower_components'
        }
      },
      open: false, // Don't open browser on reload
      notify: true // Show notifications in the browser.
    }
  };

gulp.task('build', () => {
  // Build stuff...
});

gulp.task('serve', (callback) => bs.init(OPTIONS.browserSync));
gulp.task('refresh', () => bs.reload());
gulp.task('watch', () => gulp.watch(['src/**/*'], () => gulprun('build', 'refresh')));
gulp.task('default', ['build', 'serve', 'watch']);