Merge pull request #98 from aaronroberson/browserSyncOptions

feat(browserSync): add customizable browserSync options

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
 

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

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
 };