Consider to replace gulp-webserver with browsersync.io

[StfBauer]

Replacing the gulp-webserver with browsersync.io allows testing of multiple browser at the same time. By replacing gulp-webserver it is also possible to implement automatic reload of the app frame when files was changed. I think it would be pretty useful and this makes the refresh of the browser window obsolete.
I currently tested it in an instance of the generator and from my point of view it worked pretty well.

var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('serve-static', function () {
    browserSync({
        notify: false,
        port: 8443,
        server: {
            baseDir: ['.tmp', '.'],
            routes: {
                '/bower_components': 'bower_components',
                '/tmp': 'app/.tmp'
            }
        },
        https: true
    });
    gulp.watch([
      './**/*.js',
      './**/*.html',
      './**/*.css'])
      .on('change', reload);
});

If you like I can implement this.

[andrewconnell]

Can it implement HTTPS? The thing is that gulp-webserver includes a self-signed cert that can be registered just one time.

[StfBauer]

Yes it works the same way. Self signed cert is included in too,. Defined by the https switch. Plus you have more advanced stuff like socket.io for updates caused by code changes. Map bower components to /bower_components and so on

[andrewconnell]

Works for me… if you do this, can you also make sure all docs are updated that explain the process of trusting the cert & how to setup the auto reload? Love browser sync so this would be a good enhancement.

[StfBauer]

Sure. I will check for references but in general the procedure should be the same.

[StfBauer]

Added pull request that contains the replacement of gulp-webserve with browsersync.io and minor fixes. See description of pull request.

[jthake]

nicely done sir. @andrewconnell did you want to validate this one ?

[andrewconnell]

The build broke… seems lots of tests are now failing with this PR:
https://travis-ci.org/OfficeDev/generator-office/builds/101673508

[StfBauer]

Seems like it is caused by the greater than version 2.1.1 reference of browser-sync in the _package.json files.
Should I change this to a specific version and re-issue pull request again?

[StfBauer]

Another issue might is the browser-sync compilation during installation.

[andrewconnell]

I’m not able to dig into it at this moment because I’m neck deep in other work. The tests should pass without the fix being removing them ;)

[StfBauer]

Found the issues and fixed them ;)

[StfBauer]

@andrewconnell Currently working on a blog post about the browser sync enhancements in yeoman generator. Mind if I create an additional page for browser-sync features to the documentation too?
I list there things like:

• Network throttling
• Cross browser testing
• Testing across multiple devices on the same network
• Live reload

[andrewconnell]

Sounds good... go for it. I'm not very involved in this project right now so I'd direct questions like this to @jthake instead...

[beth-panx]

@StfBauer I am working on the next version of generator-office now and decided to go with browsersync. Would love to have you code review some of my work if possible. I will let you know once I have it on the magical interweb...

[StfBauer]

@beth-panx Awesome!!! If you need something let me know cause I already implemented that kind of stuff in yo office.

[beth-panx]

@StfBauer Browsersync has been implemented in v 1.0. Feedback wanted and more than welcomed!

[StfBauer]

Just need to find time to check it out. Maybe next week or so.