Added BrowserSync to the grunt task

benbrehaut · Feb 14, 2017 · 33b116b · 33b116b
1 parent 0486b6f
commit 33b116b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 14 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -4,6 +4,31 @@ module.exports = function(grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
 
+        browserSync: {
+            bsFiles: {
+    			src: [
+    				'*.php',
+    				'**/*.php',
+    				'Gruntfile.js',
+    				'assets/js/*.js',
+    				'*.css',
+    				'assets/css/*.css'
+    			]
+    		},
+    		options: {
+    			watchTask: true,
+    			debugInfo: true,
+    			logConnections: true,
+    			notify: true,
+    			proxy: 'test-theme.uk',
+    			ghostMode: {
+    				scroll: true,
+    				links: true,
+    				forms: true
+    			}
+    		}
+        },
+
         // Concat Task
         concat: {
             dist: {
@@ -72,13 +97,7 @@ module.exports = function(grunt) {
                 dateFormat: function(time) {
                     grunt.log.writeln('Finished in ' + time + 'ms at ' + (new Date()).toString());
                     grunt.log.writeln('Waiting for more changes...');
-                },
-                // Live Reload
-                livereload: {
-                    options: {
-                        livereload: true
-                    }
-                },
+                }
             },
             scripts: {
                 files: 'assets/js/main.js', // The main JS file for the theme.
@@ -88,6 +107,20 @@ module.exports = function(grunt) {
               files: 'assets/scss/**/*.scss',
               tasks: ['sass','postcss'],
             },
+            browserSync: {
+                files: [
+                    '*.php',
+                    '**/*.php',
+                    '*.css',
+                    'Gruntfile.js',
+                    '*.css',
+                    'assets/js/*.js',
+                    'assets/css/*.css'
+                ],
+                options: {
+                    watchTask: true
+                }
+            }
         },
         // End Watch
 
@@ -105,8 +138,9 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-postcss');
     grunt.loadNpmTasks('grunt-contrib-imagemin');
     grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-browser-sync');
 
     // Default task(s).
-    grunt.registerTask('default', ['concat', 'uglify', 'sass', 'imagemin', 'watch']);
+    grunt.registerTask('default', ['browserSync', 'watch']);
 
 };
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
@@ -8,8 +8,9 @@
     box-sizing: border-box;
 }
 
-html {
-    height: auto;
+html,
+body {
+    height: 100%;
     overflow: auto;
 }
 
@@ -18,9 +19,13 @@ body {
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     display: flex;
-    min-height: 100vh;
     flex-direction: column;
-    line-height: rem-calc(25);
+    line-height: 2;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.site-content {
+    flex: 1;
 }
 
 img {

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   "devDependencies": {
     "autoprefixer": "^6.5.3",
     "grunt": "^1.0.1",
+    "grunt-browser-sync": "^2.2.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-imagemin": "^1.0.1",
     "grunt-contrib-uglify": "^2.0.0",