Merge pull request #260 from pattern-lab/better-browsersync

Better browsersync configruation

Author: Brian Muenzenmeyer

Gruntfile.js

@@ -101,14 +101,36 @@ module.exports = function(grunt) {
 						ignoreInitial: true,
 						ignored: '*.html'
 					},
+                    snippetOptions: {
+                        // Ignore all HTML files within the templates folder
+                        blacklist: ['/index.html', '/']
+                    },
 					plugins: [
 						{
 							module: 'bs-html-injector',
 							options: {
 								files: [path.resolve(paths().public.root + '/index.html'), path.resolve(paths().public.styleguide + '/styleguide.html')]
 							}
 						}
-					]
+					],
+                    notify: {
+                        styles: [
+                            'display: none',
+                            'padding: 15px',
+                            'font-family: sans-serif',
+                            'position: fixed',
+                            'font-size: 1em',
+                            'z-index: 9999',
+                            'bottom: 0px',
+                            'right: 0px',
+                            'border-top-left-radius: 5px',
+                            'background-color: #1B2032',
+                            'opacity: 0.4',
+                            'margin: 0',
+                            'color: white',
+                            'text-align: center'
+                        ]
+                    }
 				}
 			}
 		},

gulpfile.js

@@ -96,17 +96,39 @@ gulp.task('cp:css', function(){
 // Styleguide Copy
 gulp.task('cp:styleguide', function(){
   return gulp.src(
-      [ '**/*'],
-      {cwd: path.resolve(paths().source.styleguide)} )
+      ['**/*'],
+      {cwd: path.resolve(paths().source.styleguide)})
       .pipe(gulp.dest(path.resolve(paths().public.styleguide)))
-      .pipe(browserSync.stream());;
+      .pipe(browserSync.stream());
 });
 
-//server and watch tasks
-gulp.task('connect', ['lab'], function(){
+// server and watch tasks
+gulp.task('connect', ['lab'], function () {
   browserSync.init({
     server: {
       baseDir: path.resolve(paths().public.root)
+    },
+    snippetOptions: {
+      // Ignore all HTML files within the templates folder
+      blacklist: ['/index.html', '/']
+    },
+    notify: {
+      styles: [
+        'display: none',
+        'padding: 15px',
+        'font-family: sans-serif',
+        'position: fixed',
+        'font-size: 1em',
+        'z-index: 9999',
+        'bottom: 0px',
+        'right: 0px',
+        'border-top-left-radius: 5px',
+        'background-color: #1B2032',
+        'opacity: 0.4',
+        'margin: 0',
+        'color: white',
+        'text-align: center'
+      ]
     }
   });
   gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']);
@@ -120,7 +142,7 @@ gulp.task('connect', ['lab'], function(){
       path.resolve(paths().source.data, '*.json'),
       path.resolve(paths().source.fonts + '/*'),
       path.resolve(paths().source.images + '/*'),
-      path.resolve(paths().source.data + '*.json'),
+      path.resolve(paths().source.data + '*.json')
     ],
     ['lab-pipe'],
     function () { browserSync.reload(); }