3

I'm using latest https://github.com/PolymerElements/generator-polymer-init-custom-build

And want to add Browsersync to the Polymer custom-build gulpfile.js

But I can't understand where is the right place for it in the Polymer custom-build's gulpfile.js

Could you, please, provide an example of how to incorporate Browsersync to the custom-build's gulpfile.js?

Ed Ilyin
  • 221
  • 1
  • 6
  • 1
    Any luck on getting this working? I don't want to use the answer below because it's including a lot of extras and it appears that the repo he's linking to is failing. My goal is to keep it simple and only add browser-sync into the custom build – Oneezy Nov 19 '16 at 13:59
  • 1
    I ended up with the following changes to gulp file: https://gist.github.com/edvail/4c0ffb1d76c86808cd3d7b467b0e7ab5 – Ed Ilyin Nov 25 '16 at 09:13
  • thanks! I'll give it a shot – Oneezy Nov 25 '16 at 09:15
  • 1
    Quick and easy workaround: https://github.com/Polymer/polymer-cli/issues/230#issuecomment-233871759 – nicholaswmin Dec 08 '16 at 12:04
  • @NicholasKyriakides, i tried that technique you're referring to about a month ago but i had a few little issues. I'll try it again – Oneezy Dec 10 '16 at 15:17

1 Answers1

1

I ended up using the generator from https://github.com/seaneking/generator-polymer-element.

This is my working gulpfile.js: https://jsfiddle.net/svantetobias/qqwcrwcf/1/

I think the critical part here is:

// 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']);
Svante
  • 1,069
  • 3
  • 12
  • 28