Merge pull request #2 from dvlopes/browser-sync

Added support to browser-sync.

README.md

@@ -1,7 +1,7 @@
 # understrap-child
 Basic Child Theme for UnderStrap Theme Framework: https://github.com/holger1411/understrap
 
-# How it works
+## How it works
 It shares with the parent theme all PHP files and adds its own functions.php on top of the UnderStrap parent themes functions.php.
 
 IT DIT NOT LOAD THE PARENT THEMES CSS FILE(S)!
@@ -9,14 +9,14 @@ Instead it uses the UnderStrap Parent Theme as dependency via Bower and compiles
 
 Uses the Enqueue method the load and sort the CSS file the right way instead of the old @import methode
 
-# Installation
+## Installation
 1. Install the parent theme UnderStrap first: https://github.com/holger1411/understrap
 2. Just upload the understrap-child folder to your wp-content/themes directory
 3. Go into your WP admin backend 
 4. Go to "Appearance -> Themes"
 5. Activate the UnderStrap Child theme
 
-# Editing
+## Editing
 Add your own CSS styles to /sass/theme/_child_theme.scss
 ot import you own files into /sass/theme/understrap-child.scss
 
@@ -34,4 +34,29 @@ It will be outputted into:
 and
 /css/understrap-child.css
 
-So you have one clean CSS file at the end and just one request.
+So you have one clean CSS file at the end and just one request.
+
+## Developing With NPM, Bower, Gulp, SASS and Browser Sync
+
+### Installing Dependencies
+- Make sure you have installed Node.js, Bower, and Browser-Sync [1] on your computer globally
+- Then open your terminal and browse to the location of your UnderStrap copy
+- Run: `$ npm install` then: `$ bower install` and finally: `$ gulp copy-assets`
+
+### Running
+To work and compile your Sass files on the fly start:
+
+- `$ gulp watch`
+
+Or, to run with Browser-Sync:
+
+- First change the browser-sync options to reflect your environment in the file `/gulpfile.js` in the beginning of the file:
+```javascript
+var browserSyncOptions = {
+    proxy: "localhost/theme_test/", // <----- CHANGE HERE
+    notify: false
+};
+```
+- then run: `$ gulp watch-bs`
+
+[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync

gulpfile.js

@@ -4,6 +4,20 @@ var basePaths = {
     dev: './src/'
 };
 
+// browser-sync watched files
+// automatically reloads the page when files changed
+var browserSyncWatchFiles = [
+    './css/*.min.css',
+    './js/*.min.js',
+    './*.php'
+];
+// browser-sync options
+// see: https://www.browsersync.io/docs/options/
+var browserSyncOptions = {
+    proxy: "localhost/understrap/",
+    notify: false
+};
+
 // Defining requirements
 var gulp = require('gulp');
 var plumber = require('gulp-plumber');
@@ -16,6 +30,7 @@ var uglify = require('gulp-uglify');
 var merge2 = require('merge2');
 var ignore = require('gulp-ignore');
 var rimraf = require('gulp-rimraf');
+var browserSync = require('browser-sync').create();
 
 // Run: 
 // gulp sass
@@ -52,6 +67,18 @@ gulp.task('cleancss', function() {
     .pipe(rimraf());
 });
 
+// Run: 
+// gulp browser-sync
+// Starts browser-sync task for starting the server.
+gulp.task('browser-sync', function() {
+    browserSync.init(browserSyncWatchFiles, browserSyncOptions);
+});
+
+// Run: 
+// gulp watch-bs
+// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
+gulp.task('watch-bs', ['browser-sync', 'watch', 'cssnano'], function () { });
+
 // Run: 
 // gulp scripts. 
 // Uglifies and concat all JS files into one

package.json

@@ -25,10 +25,10 @@
     "gulp-rename": "^1.2.2",
     "gulp-rimraf": "^0.2.0",
     "gulp-sass": "^2.2.0",
-    "gulp-uglify": "^1.5.2",
+    "gulp-uglify": "^1.5.3",
     "gulp-watch": "^4.3.5",
     "gulp-cssnano": "^2.1.1",
     "merge2": "^1.0.1",
-    "gulp-uglify": "^1.5.3"
+    "browser-sync": "^2.12.5"
   }
 }