Merge pull request #23 from dvlopes/master

Added support to browser-sync.

README.md

@@ -3,9 +3,9 @@ Start talking: [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://git
 UnderStrap WordPress Theme Framework
 ===
 
-Website: http://understrap.com
+Website: [http://understrap.com](http://understrap.com)
 
-Child Theme Project: https://github.com/holger1411/understrap-child
+Child Theme Project: [https://github.com/holger1411/understrap-child](https://github.com/holger1411/understrap-child)
 
 Changelog
 =
@@ -85,8 +85,8 @@ Basic Features
 - Combines the _s WordPress Starter Theme PHP/JS files and Bootstrap´s HTML/CSS/JS
 - Comes with Bootstrap (3.3.6) SASS source files and additional scss files. Nicely sorted and ready to add your own variables/customize the Bootstrap variables.
 - Uses a single and minified CSS file for all the basic stuff
-- Font Awesome Icon Font integrated (V 4.5.0): http://fortawesome.github.io/Font-Awesome/
-- Comes with extra slider script - By owl.carousel (V 2.0.0-beta.2.4): http://www.owlcarousel.owlgraphic.com/
+- Font Awesome Icon Font integrated (V 4.5.0): [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
+- Comes with extra slider script - By owl.carousel (V 2.0.0-beta.2.4): [http://www.owlcarousel.owlgraphic.com/](http://www.owlcarousel.owlgraphic.com/)
 - Simple RTL file
 - Jetpack ready
 - WooCommerce support
@@ -123,20 +123,28 @@ Installation
 - Go to Appearance -> Themes
 - Activate the UnderStrap theme
 
-Developing with NPM, Bower, Gulp and SASS
+Developing with NPM, Bower, Gulp and SASS and [Browser Sync][1]
 =
-- Make sure you have installed Node.js and Bower on your computer globally
+### Installing dependencies
+- Make sure you have installed Node.js, Bower and Browser-Sync on your computer globally
 - Then open your terminal and browse to the location of your UnderStrap copy
-- Run:
-                  $ npm install
-than:
-                  $ bower install
-and finally:
-                  $ gulp copy-assets
+- 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
 
+- `$ 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`
 
 How to use the build-in Widget Slider?
 =
@@ -144,3 +152,5 @@ The frontpage slider is widget driven. Simply add more than one widget to widget
 - Click on Appearance -> Widgets 
 - Add two or more widgets of any kind to widget area "Hero"
 - Thats it
+
+[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/theme_test/",
+    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
@@ -43,7 +58,8 @@ gulp.task('cssnano', ['cleancss'], function(){
     .pipe(plumber())
     .pipe(rename({suffix: '.min'}))
     .pipe(cssnano({discardComments: {removeAll: true}}))
-    .pipe(gulp.dest('./css/'));
+    .pipe(gulp.dest('./css/'))
+    .pipe(browserSync.stream());
 }); 
 
 gulp.task('cleancss', function() {
@@ -52,6 +68,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
@@ -63,7 +91,7 @@ gulp.task('scripts', function() {
     ])
     .pipe(concat('theme.min.js'))
     .pipe(uglify())
-    .pipe(gulp.dest('./js/'))
+    .pipe(gulp.dest('./js/'));
 });
 
 // Run: 

package.json

@@ -32,10 +32,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.3"
   }
 }