Using Gulp+BrowserSync to automatically refresh web page and JSDoc Web page - gulp

Question

I have my Gulp setup to automatically load/refresh my web page when application changes happen. However, I would also like to have it load my documentation page, and refresh that source each time as well.
I have it configured to be serving from two directories, but I do not know how to get it to load the second tab with the documentation directory.
[BS] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.11.181:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://192.168.11.181:3001
---------------------------------------
[BS] Serving files from: app/
[BS] Serving files from: docs/API.v1.1.0/
My gulpfile.js server section.
AppSync.init({
server: {
baseDir: [RootDir.home, RootDir.docs + DocumentationPath.javascript],
index: 'index.html',
directory: false, // Set to True for Browsing Files, not launching index
},
//open: false,
//reloadOnRestart: false
});
I have tried adding a second HelpSync using the BrowserSync.create() and set server variables, but this gives an error about re-using addresses, even when I specify a new port..
I am looking to have it start and load my App and API docs and keep refreshing both when I change any code. I can validate the application works, and that my API did document correctly.

Answer 1

I have been working with the BrowserSync and options, and found how to host two different paths, you simply use the Routes server option. This will keep two windows in sync as I wanted. The only issue is that I have to start the second window (for the API Documentation) by cloning the application window and changing the URL.
return AppSync.init({
server: {
baseDir: ['./'],
index: 'index.html',
directory: false, // Set to True for Browsing Files, not launching index
routes: {
'/API': 'APIV1.0.0/,
"/app": 'app/'
}
},
port: 3000,
startPath: '/app'
});
Adding the startPath will get the Application window loaded on a refresh, and start up. However, I do have to clone this window, and change the address to get the API documentation showing. Once this is done though, both windows will update on a file change. It would be nice to get both windows opened, but that is still outstanding.

Answer 2

Basically, I'm using the BrowserSync.reload() method within all the important tasks, e.g.
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(**reload**({stream:true})); // inject into browsers
});
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
As documented here