gulp - 在聚合物定制构建的 gulpfile 中放置浏览器同步的正确位置在哪里？

Question

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

并希望将 Browsersync 添加到Polymer 自定义构建 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']);