Use Browsersync over http-server

Author: jakezatecky

examples/dist/index.js

@@ -175,10 +175,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 				return _react2.default.createElement(_Tree2.default, {
-					name: 'airports',
-					nodes: nodes,
 					checked: checked,
 					expanded: expanded,
+					name: 'airports',
+					nodes: nodes,
 					onCheck: this.onCheck,
 					onExpand: this.onExpand
 				});
@@ -21818,14 +21818,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	Tree.propTypes = {
 		checked: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired,
 		expanded: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired,
+		nodes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.shape(_nodeShape2.default), _react2.default.PropTypes.shape(_extends({}, _nodeShape2.default, {
+			children: _react2.default.PropTypes.arrayOf(_nodeShape2.default)
+		}))])).isRequired,
 		onCheck: _react2.default.PropTypes.func.isRequired,
 		onExpand: _react2.default.PropTypes.func.isRequired,
 
 		name: _react2.default.PropTypes.string,
 		nameAsArray: _react2.default.PropTypes.bool,
-		nodes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.shape(_nodeShape2.default), _react2.default.PropTypes.shape(_extends({}, _nodeShape2.default, {
-			children: _react2.default.PropTypes.arrayOf(_nodeShape2.default)
-		}))])),
 		optimisticToggle: _react2.default.PropTypes.bool
 	};
 	Tree.defaultProps = {

gulpfile.js

@@ -7,7 +7,7 @@ const scsslint = require('gulp-scss-lint');
 const sass = require('gulp-sass');
 const autoprefixer = require('gulp-autoprefixer');
 const pkg = require('./package.json');
-
+const browserSync = require('browser-sync').create();
 const webpackConfig = require('./webpack.config');
 const testWebpackConfig = require('./webpack.test.config');
 
@@ -65,22 +65,27 @@ gulp.task('build-examples-style', () =>
 			browsers: ['last 2 versions'],
 		}))
 		.pipe(gulp.dest('./examples/dist'))
+		.pipe(browserSync.stream())
 );
 
 gulp.task('build-examples-script', () =>
 	gulp.src(['./examples/src/index.js'])
 		.pipe(webpack(testWebpackConfig))
 		.pipe(gulp.dest('./examples/dist/'))
+		.pipe(browserSync.stream())
 );
 
-gulp.task('build-examples', ['build-examples-style', 'build-examples-script'], () =>
+gulp.task('build-examples-html', () =>
 	gulp.src('./examples/src/index.html')
 		.pipe(gulp.dest('./examples/dist/'))
+		.pipe(browserSync.stream())
 );
 
-gulp.task('watch', () => {
-	gulp.watch(['./src/js/**/*.js'], ['build-script']);
-	gulp.watch(['./src/sass/**/*.scss'], ['build-style']);
-});
+gulp.task('examples', ['build-examples-style', 'build-examples-script', 'build-examples-html'], () => {
+	browserSync.init({ server: './examples/dist' });
 
+	gulp.watch(['./src/js/**/*.js', './examples/src/**/*.js'], ['build-examples-script']);
+	gulp.watch(['./src/sass/**/*.scss', './examples/src/**/*.scss'], ['build-examples-style']);
+	gulp.watch(['./examples/src/**/*.html'], ['build-examples-html']).on('change', browserSync.reload);
+});
 gulp.task('default', ['build-script', 'build-style']);

package.json

@@ -16,7 +16,7 @@
   "bugs": "https://github.com/jakezatecky/react-checkbox-tree/issues",
   "main": "lib/index.js",
   "scripts": {
-    "examples": "gulp build-examples && http-server"
+    "examples": "gulp examples"
   },
   "peerDependencies": {
     "react": "^15.3.0"
@@ -28,6 +28,7 @@
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
+    "browser-sync": "^2.18.6",
     "chai": "^3.5.0",
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "^14.0.0",
@@ -41,7 +42,6 @@
     "gulp-mocha-phantomjs": "^0.12.0",
     "gulp-sass": "^3.0.0",
     "gulp-scss-lint": "^0.4.0",
-    "http-server": "^0.9.0",
     "mocha": "^3.0.2",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",