replaced gulp-connect with browsersync, closes #25

Author: Sebastian Henneberg

README.md

@@ -9,7 +9,7 @@ Boilerplate gulp tasks for quick project setup.
 var gulp = require('gulp');
 var modular = require('gulp-modular');
 
-var tasks = ['bower', 'clean', 'sass', 'configScripts', 'connect', 'fonts', ...];
+var tasks = ['bower', 'clean', 'sass', 'configScripts', 'browserSync', 'fonts', ...];
 var config = {...};
 
 modular(gulp, tasks, config);
@@ -44,7 +44,7 @@ Detailed documentation of our best practice workflow and the config object will
  - `bowerScripts` concats all scripts from the bower dependencies and stores the file to a particular distribution folder.
 
 ## Local Server
- - `connect` provides a small HTTP server for local testing. It serves the requested file if available, the `index.html` otherwise (to support Angular HTML5 mode)
+ - `browserSync` provides a small HTTP server for local testing. It serves the requested file if available, the `index.html` otherwise (to support Angular HTML5 mode)
  - `open` opens up the default web browser after the local HTTP server has started.
  - `reload` is responsible to reload the current page in the web browser whenever distribution files have changed.
  - `watch` checks files for changes and triggers the reload (see above).

index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 
+var browserSync = require('browser-sync').create();
+
 module.exports = function(gulp, tasks, config) {
 
   if (tasks.indexOf('bower') !== -1) {
@@ -19,8 +21,8 @@ module.exports = function(gulp, tasks, config) {
     require('./tasks/configScripts')(gulp, config.env.constants, config.configName, config.dist.js, config.env.rev);
   }
 
-  if (tasks.indexOf('connect') !== -1) {
-    require('./tasks/connect')(gulp, config.bases.dist, config.port);
+  if (tasks.indexOf('browserSync') !== -1) {
+    require('./tasks/browserSync')(gulp, browserSync, config.bases.dist, config.port);
   }
 
   if (tasks.indexOf('fonts') !== -1) {
@@ -64,15 +66,11 @@ module.exports = function(gulp, tasks, config) {
   }
 
   if (tasks.indexOf('protractor') !== -1) {
-    require('./tasks/protractor')(gulp, config.bases.dist);
-  }
-
-  if (tasks.indexOf('reload') !== -1) {
-    require('./tasks/reload')(gulp, config.bases.dist);
+    require('./tasks/protractor')(gulp, browserSync, config.bases.dist);
   }
 
   if (tasks.indexOf('sass') !== -1) {
-    require('./tasks/sass')(gulp, tasks, config.app.scss, config.dist.css, config.env.rev, config.dist.fonts, config.sourceMapsPath);
+    require('./tasks/sass')(gulp, tasks, browserSync, config.app.scss, config.dist.css, config.env.rev, config.dist.fonts, config.sourceMapsPath);
   }
 
   if (tasks.indexOf('scripts') !== -1) {
@@ -96,7 +94,7 @@ module.exports = function(gulp, tasks, config) {
   }
 
   if (tasks.indexOf('watch') !== -1) {
-    require('./tasks/watch')(gulp, tasks, config);
+    require('./tasks/watch')(gulp, tasks, browserSync, config);
   }
 
 };

package.json

@@ -27,6 +27,7 @@
   },
   "homepage": "https://github.com/ONE-LOGIC/gulp-modular",
   "dependencies": {
+    "browser-sync": "^2.9.1",
     "connect-history-api-fallback": "^1.1.0",
     "del": "^1.2.0",
     "extend": "^2.0.1",
@@ -37,7 +38,6 @@
     "gulp-cached": "^1.1.0",
     "gulp-compass": "^2.1.0",
     "gulp-concat": "^2.5.2",
-    "gulp-connect": "^2.2.0",
     "gulp-debug": "^2.0.1",
     "gulp-exit": "0.0.2",
     "gulp-flatten": "0.0.4",
@@ -46,7 +46,6 @@
     "gulp-imagemin": "^2.3.0",
     "gulp-inject": "^1.3.1",
     "gulp-jshint": "^1.11.0",
-    "gulp-livereload": "^3.8.0",
     "gulp-maven-deploy": "^0.2.0",
     "gulp-minify-css": "^1.1.6",
     "gulp-minify-html": "^1.0.3",

tasks/browserSync.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var history = require('connect-history-api-fallback');
+
+module.exports = function(gulp, browserSync, root, port) {
+  gulp.task('browserSync', ['build'], function() {
+    browserSync.init({
+      server: {
+        baseDir: root
+      },
+      port: port,
+      middleware: [history()]
+    });
+  });
+};

tasks/connect.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var connect = require('gulp-connect'),
-  protractor = require('gulp-protractor').protractor,
+var protractor = require('gulp-protractor').protractor,
   exit = require('gulp-exit');
 
 
-module.exports = function(gulp, src) {
+module.exports = function(gulp, browserSync, src) {
   gulp.task('protractor', function(done) {
     gulp.src(['e2e/**/*.js'])
       .pipe(protractor({
@@ -16,9 +15,9 @@ module.exports = function(gulp, src) {
       }).on('end', done);
   });
 
-  gulp.task('e2e:singleRun', ['connect', 'protractor'], function() {
+  gulp.task('e2e:singleRun', ['browserSync', 'protractor'], function() {
     gulp.src(src)
-      .pipe(connect.serverClose());
+      .pipe(browserSync.exit());
     gulp.src(src)
       .pipe(exit());
   });

tasks/protractor.js

@@ -1,3 +1,5 @@
+'use strict';
+
 var sass = require('gulp-sass'),
   sourceMaps = require('gulp-sourcemaps'),
   autoPrefixer = require('gulp-autoprefixer'),
@@ -7,7 +9,7 @@ var sass = require('gulp-sass'),
   _ = require('underscore');
 
 
-module.exports = function(gulp, tasks, src, dest, revFlag, manifestPath, sourceMapsPath) {
+module.exports = function(gulp, tasks, browserSync, src, dest, revFlag, manifestPath, sourceMapsPath) {
   var mergedTasks = _.intersection(tasks, ['fonts']);
   gulp.task('styles', mergedTasks, function (done) {
     var optionsSass = {
@@ -30,7 +32,8 @@ module.exports = function(gulp, tasks, src, dest, revFlag, manifestPath, sourceM
       .pipe(gulpif(revFlag, revReplace(optionsRev)))
       .pipe(gulpif(revFlag, rev()))
       .pipe(sourceMaps.write(sourceMapsPath))
-      .pipe(gulp.dest(dest));
+      .pipe(gulp.dest(dest))
+      .pipe(browserSync.stream({match: '**/*.css'}));
     done();
   });
 };

tasks/reload.js

@@ -2,7 +2,7 @@
 
 var liveReload = require('gulp-livereload');
 
-module.exports = function(gulp, tasks, config) {
+module.exports = function(gulp, tasks, browserSync, config) {
   gulp.task('watch', ['build'], function() {
     liveReload.listen();
     gulp.watch(config.app.index, ['justIndex']);
@@ -23,6 +23,6 @@ module.exports = function(gulp, tasks, config) {
     gulp.watch(config.app.js, ['scripts']);
     gulp.watch(config.bowerjson, ['bowerScripts', 'bowerStyles', 'bowerFonts']);
     // watch any change in dist folder; reload immediately in case of detected change
-    gulp.watch(config.bases.dist + '**', ['reload']);
+    gulp.watch([config.bases.dist + '**', '!**/*.css', '!**/*.css.map'], browserSync.reload);
   });
 };