diff --git a/README.md b/README.md index 51f471a..420f642 100644 --- a/README.md +++ b/README.md @@ -717,6 +717,8 @@ Available options: * minifyProductionHTML (default: true) * by default, the production HTML is minified * you can disable it by setting this option to false +* browserSync + * Pass in browserSync options. See http://www.browsersync.io/docs/options/ ## FAQ diff --git a/src/gulp/tasks/serve.js b/src/gulp/tasks/serve.js index 0f883e1..c8128a1 100644 --- a/src/gulp/tasks/serve.js +++ b/src/gulp/tasks/serve.js @@ -42,39 +42,41 @@ class ServeTaskLoader extends AbstractTaskLoader { "scripts-javascript", callback); }); + + let options = { // http://www.browsersync.io/docs/options/ + notify: false, + //port: 8000, - let startBrowserSync = () =>{ - browserSync.init({ // http://www.browsersync.io/docs/options/ - notify: false, - //port: 8000, + // Customize the BrowserSync console logging prefix + logPrefix: "MWD", // Modern Web Dev - // Customize the BrowserSync console logging prefix - logPrefix: "MWD", // Modern Web Dev + // Run w/ https by uncommenting "https: true" + // Note: this uses an unsigned certificate which on first access + // will present a certificate warning in the browser. + // https: true, + ghostMode: { // replicate actions in all clients + clicks: false, + forms: false, + scroll: false + }, + server: { + baseDir: config.webServerFolders.dev, + //routes: alternative way to map content that is above the base dir + // fix for SPAs w/ BrowserSync & others: https://github.com/BrowserSync/browser-sync/issues/204 + // reference: https://github.com/BrowserSync/browser-sync/issues/204 + middleware: [ + historyApiFallback(), // not necessary if the app uses hash based routing + function(req, res, next){ + res.setHeader("Access-Control-Allow-Origin", "*"); // add CORS to the response headers (for resources served by BrowserSync) + next(); + } + ] + }//, + //reloadDebounce: 500 // restrict the frequency in which browser reload events can be emitted to connected clients + }; - // Run w/ https by uncommenting "https: true" - // Note: this uses an unsigned certificate which on first access - // will present a certificate warning in the browser. - // https: true, - ghostMode: { // replicate actions in all clients - clicks: false, - forms: false, - scroll: false - }, - server: { - baseDir: config.webServerFolders.dev, - //routes: alternative way to map content that is above the base dir - // fix for SPAs w/ BrowserSync & others: https://github.com/BrowserSync/browser-sync/issues/204 - // reference: https://github.com/BrowserSync/browser-sync/issues/204 - middleware: [ - historyApiFallback(), // not necessary if the app uses hash based routing - function(req, res, next){ - res.setHeader("Access-Control-Allow-Origin", "*"); // add CORS to the response headers (for resources served by BrowserSync) - next(); - } - ] - }//, - //reloadDebounce: 500 // restrict the frequency in which browser reload events can be emitted to connected clients - }); + let startBrowserSync = () =>{ + browserSync.init(utils.mergeOptions(options, gulp.options.browserSync)); gulp.watch(config.html.src).on("change", browserSync.reload); // force a reload when html changes gulp.watch(config.styles.src, [ "styles" ]); // stylesheet changes will be streamed if possible or will force a reload diff --git a/src/gulp/utils.js b/src/gulp/utils.js index 6ce5a23..bafaa0e 100644 --- a/src/gulp/utils.js +++ b/src/gulp/utils.js @@ -147,11 +147,36 @@ let configureGulpObject = (obj, options) =>{ return configuredGulpObject; }; +/** + * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1 + * @param obj1 + * @param obj2 + * @returns obj3 a new object based on obj1 and obj2 + */ +let mergeOptions = (obj1 = {}, obj2 = {}) =>{ + let obj3 = {}; + + for(let attrname in obj1){ + if(obj1.hasOwnProperty(attrname)) { + obj3[attrname] = obj1[attrname]; + } + } + + for(let attrname in obj2){ + if(obj2.hasOwnProperty(attrname)) { + obj3[attrname] = obj2[attrname]; + } + } + + return obj3; +}; + export default { exclude, reportError, filterEmptyDirectories, validateArgument, validateGulpObjectIsConfigured, - configureGulpObject + configureGulpObject, + mergeOptions };