feat(core): add optional browsersync

Closes #8.
42Zavattas · Apr 12, 2015 · 921f234 · 921f234
1 parent dfe43a0
commit 921f234
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 46 deletions.
diff --git a/app/index.js b/app/index.js
@@ -63,6 +63,17 @@ var BangularGenerator = yeoman.generators.Base.extend({
         value: 'restock',
         name: 'Restock.io, for mocking purpose'
       }]
+    }, {
+      type: 'list',
+      name: 'reload',
+      message: 'Which development tool do you want for browser reloading / synchronising?',
+      choices: [{
+        value: 'livereload',
+        name: 'Livereload'
+      }, {
+        value: 'browsersync',
+        name: 'BrowserSync'
+      }]
     }, {
       type: 'checkbox',
       name: 'tests',
@@ -108,6 +119,7 @@ var BangularGenerator = yeoman.generators.Base.extend({
     }], function (props) {
       self.appname = self._.camelize(self._.slugify(self._.humanize(props.name)));
       self.filters.backend = props.backend;
+      self.filters.reload = props.reload;
 
       if (props.modules.length) {
         props.modules.forEach(function (module) {

diff --git a/app/templates/client/index.html b/app/templates/client/index.html
@@ -40,9 +40,9 @@
     <!-- inject:js -->
     <!-- endinject -->
 
-    <!-- endbuild -->
+    <!-- endbuild --><% if (filters.reload === 'livereload') { %>
 
-    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
+    <script src="http://localhost:35729/livereload.js?snipver=1"></script><% } %>
 
   </body>
 </html>
diff --git a/app/templates/gulpfile.js b/app/templates/gulpfile.js
@@ -4,8 +4,9 @@ var gulp = require('gulp');
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-gulp.task('default',    ['serve']);
-gulp.task('serve',      ['watch'],    require('./tasks/serve'));
+gulp.task('default',    ['serve']);<% if (filters.reload === 'browsersync') { %>
+gulp.task('nodemon',    ['watch'],    require('./tasks/serve').nodemon);<% } %>
+gulp.task('serve',      [<% if (filters.reload === 'livereload') { %>'watch'],  <% } else { %>'nodemon'],<% } %>  require('./tasks/serve')<% if (filters.reload === 'browsersync') { %>.bsync<% } else { %>.nodemon<% } %>);
 gulp.task('watch',      ['inject'],   require('./tasks/watch'));
 gulp.task('inject',     ['sass'],     require('./tasks/inject'));
 gulp.task('sass',                     require('./tasks/sass'));

diff --git a/app/templates/package.json b/app/templates/package.json
@@ -14,16 +14,16 @@
     "gulp-inject": "^1.1.1",<% if (filters.control) { %>
     "gulp-jscs": "^1.4.0",
     "gulp-jscs-stylish": "^1.0.2",
-    "gulp-jshint": "^1.9.1",<% } %>
-    "gulp-livereload": "^3.6.0",
+    "gulp-jshint": "^1.9.1",<% } %><% if (filters.reload === 'livereload') { %>
+    "gulp-livereload": "^3.6.0",<% } %>
     "gulp-minify-css": "^1.0.0",<% if (filters.mocha) { %>
     "gulp-mocha": "^2.0.0",<% } %>
     "gulp-ng-annotate": "^0.5.2",
     "gulp-nodemon": "^2.0.2",
     "gulp-open": "^0.3.2",
     "gulp-plumber": "^1.0.0",<% if (filters.e2e) { %>
-    "gulp-protractor": "^0.0.12",<% } %>
-    "gulp-replace": "^0.5.2",
+    "gulp-protractor": "^0.0.12",<% } %><% if (filters.reload === 'livereload') { %>
+    "gulp-replace": "^0.5.2",<% } %>
     "gulp-rev-all": "^0.8.13",
     "gulp-sass": "^1.3.2",
     "gulp-uglify": "^1.1.0",
@@ -44,7 +44,8 @@
   },
   "dependencies": {
     "async": "^0.9.0",
-    "body-parser": "^1.12.0",
+    "body-parser": "^1.12.0",<% if (filters.reload === 'browsersync') { %>
+    "browser-sync": "^2.5.3",<% } %>
     "chalk": "^1.0.0",<% if (filters.auth) { %>
     "composable-middleware": "^0.3.0",<% } %>
     "compression": "^1.4.0",

diff --git a/app/templates/tasks/build.js b/app/templates/tasks/build.js
@@ -17,8 +17,8 @@ var minifyCss            = require('gulp-minify-css');
 var angularTemplatecache = require('gulp-angular-templatecache');
 var concat               = require('gulp-concat');
 var ngAnnotate           = require('gulp-ng-annotate');
-var uglify               = require('gulp-uglify');
-var replace              = require('gulp-replace');
+var uglify               = require('gulp-uglify');<% if (filters.reload === 'livereload') { %>
+var replace              = require('gulp-replace');<% } %>
 var revAll               = require('gulp-rev-all');
 
 var toDelete = [];
@@ -27,7 +27,7 @@ module.exports = function (done) {
   runSequence(
     ['clean:dist', 'sass'],
     ['usemin', 'copy:dist'],
-    ['replace', 'scripts', 'cssmin'],
+    [<% if (filters.reload === 'livereload') { %>'replace', <% } %>'scripts', 'cssmin'],
     'rev',
     'clean:finish',
     done);
@@ -86,13 +86,13 @@ gulp.task('scripts', function () {
     .pipe(ngAnnotate())
     .pipe(uglify())
     .pipe(gulp.dest('dist/client/'));
-});
+});<% if (filters.reload === 'livereload') { %>
 
 gulp.task('replace', function () {
   return gulp.src('dist/client/index.html')
     .pipe(replace(/\s*<script.*livereload.*><\/script>/, ''))
     .pipe(gulp.dest('dist/client'));
-});
+});<% } %>
 
 gulp.task('rev', function () {
 

diff --git a/app/templates/tasks/serve.js b/app/templates/tasks/serve.js
@@ -7,8 +7,9 @@
 var gulp       = require('gulp');
 var fs         = require('fs');
 var nodemon    = require('gulp-nodemon');
-var open       = require('gulp-open');
-var livereload = require('gulp-livereload');
+var open       = require('gulp-open');<% if (filters.reload === 'livereload') { %>
+var livereload = require('gulp-livereload');<% } else { %>
+var bsync      = require('browser-sync');<% } %>
 
 var config = require('../server/config/environment');
 
@@ -40,25 +41,42 @@ function waitForExpress (cb) {
   }, 100);
 }
 
-module.exports = function () {
-  return nodemon({
-      script: 'server/server.js',
-      ext: 'js',
-      ignore: ['client', 'dist', 'node_modules', 'gulpfile.js']
-    })
-    .on('start', function () {
-      fs.writeFileSync('.bangular-refresh', 'waiting');
+module.exports = {
 
-      if (!openOpts.already) {
-        openOpts.already = true;
-        waitForExpress(function () {
-          gulp.src('client/index.html')
-            .pipe(open('', openOpts));
-        });
-      } else {
-        waitForExpress(function () {
-          livereload.changed('/');
-        });
+  nodemon: function (<% if (filters.reload === 'browsersync') { %>cb<% } %>) {
+    return nodemon({
+        script: 'server/server.js',
+        ext: 'js',
+        ignore: ['client', 'dist', 'node_modules', 'gulpfile.js']
+      })
+      .on('start', function () {
+        fs.writeFileSync('.bangular-refresh', 'waiting');
+
+        if (!openOpts.already) {
+          openOpts.already = true;
+          waitForExpress(<% if (filters.reload === 'livereload') { %>function () {
+            gulp.src('client/index.html')
+              .pipe(open('', openOpts));
+          }<% } else { %>cb<% } %>);
+        } else {
+          waitForExpress(function () {<% if (filters.reload === 'livereload') { %>
+            livereload.changed('/');<% } else { %>
+            bsync.reload({ stream: false });<% } %>
+          });
+        }
+      });
+  }<% if (filters.reload === 'browsersync') { %>,
+
+  bsync: function () {
+    bsync.init({
+      proxy: 'localhost:9000',
+      browser: 'google chrome',
+      online: false,
+      notify: false,
+      watchOptions: {
+        interval: 500
       }
     });
+  }<% } %>
+
 };
diff --git a/app/templates/tasks/watch.js b/app/templates/tasks/watch.js
@@ -6,8 +6,9 @@
  * Reinject files
  */
 
-var gulp       = require('gulp');
-var livereload = require('gulp-livereload');
+var gulp       = require('gulp');<% if (filters.reload === 'livereload') { %>
+var livereload = require('gulp-livereload');<% } else { %>
+var bsync      = require('browser-sync');<% } %>
 var watch      = require('gulp-watch');
 var inject     = require('gulp-inject');
 var plumber    = require('gulp-plumber');
@@ -17,9 +18,9 @@ var bowerFiles = require('main-bower-files');
 var toInject   = require('./config/filesToInject');
 var toExclude  = require('./config/bowerFilesToExclude');
 
-module.exports = function () {
+module.exports = function () {<% if (filters.reload === 'livereload') { %>
 
-  livereload.listen();
+  livereload.listen();<% } %>
 
   gulp.watch('bower.json', function () {
     gulp.src('client/index.html')
@@ -28,12 +29,10 @@ module.exports = function () {
         relative: 'true',
         ignorePath: toExclude
       }))
-      .pipe(gulp.dest('client'));
+      .pipe(gulp.dest('client'))<% if (filters.reload === 'browsersync') { %>
+      .pipe(bsync.reload({ stream: true }))<% } %>;
   });
 
-  gulp.watch(['client/index.html', 'client/app.js'])
-    .on('change', livereload.changed);
-
   watch([
     'client/styles/**/*.scss',
     'client/views/**/*.scss',
@@ -42,8 +41,9 @@ module.exports = function () {
     gulp.src('client/styles/app.scss')
       .pipe(plumber())
       .pipe(sass())
-      .pipe(gulp.dest('client/styles/css'))
-      .pipe(livereload());
+      .pipe(gulp.dest('client/styles/css'))<% if (filters.reload === 'livereload') { %>
+      .pipe(livereload())<% } else { %>
+      .pipe(bsync.reload({ stream: true }))<% } %>;
   });
 
   var coreFiles = [
@@ -77,7 +77,7 @@ module.exports = function () {
       .pipe(gulp.dest('client'));
   });
 
-  gulp.watch(coreFiles)
-    .on('change', livereload.changed);
+  watch(coreFiles, <% if (filters.reload === 'livereload') { %>livereload.changed<% } else { %>bsync.reload<% } %>);
+  watch(['client/index.html', 'client/app.js'], <% if (filters.reload === 'livereload') { %>livereload.changed<% } else { %>bsync.reload<% } %>);
 
 };
diff --git a/test/anim.js b/test/anim.js
@@ -16,6 +16,7 @@ describe('Launching anim tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'restock',
+        reload: 'livereload',
         modules: [],
         sockets: false,
         auth: false

diff --git a/test/api.js b/test/api.js
@@ -16,6 +16,7 @@ describe('Launching api tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'mongo',
+        reload: 'livereload',
         modules: [],
         tests: ['mocha']
       }, done, { skipInstall: true, skipLog: true });
@@ -73,6 +74,7 @@ describe('Launching api tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'mongo',
+        reload: 'livereload',
         modules: []
       }, done, { skipInstall: true, skipLog: true });
 
@@ -101,6 +103,7 @@ describe('Launching api tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'json',
+        reload: 'livereload',
         modules: []
       }, done, { skipInstall: true, skipLog: true });
 
@@ -135,6 +138,7 @@ describe('Launching api tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'mongo',
+        reload: 'livereload',
         modules: ['ngResource'],
         sockets: true
       }, done, { skipInstall: true, skipLog: true });
@@ -172,6 +176,7 @@ describe('Launching api tests', function () {
       utils.scaffold({
         name: 'Test',
         backend: 'restock',
+        reload: 'livereload',
         modules: []
       }, done, { skipInstall: true, skipLog: true });