var gulp = require('gulp');
var browserSync = require('browser-sync');
var dist = browserSync.create('dist');
var dev = browserSync.create('dev');

dist.init({
  server: {
    baseDir: 'dist/app', // START SERVER IN OUR DEVELOPMENT ENVIROMENT
    routes: {
      '/bower_components': 'bower_components' // WATCH ALSO BOWER DIR OTHERWISE EXTERNAL TO SERVER
    }
  },
  port: 3000,
  ui: {
    port: 3010
  }
});

dev.init({
  server: {
    baseDir: 'dev/app', // START SERVER IN DIST ENVIROMENT TO TEST THAT AS WELL
    routes: {
      '/bower_components': 'bower_components' // WATCH ALSO BOWER DIR OTHERWISE EXTERNAL TO SERVER
    }
  },
  port: 3001,
  ui: {
    port: 3011
  }
});

// Static Server + watching scss/html files
gulp.task('server', ['sass', 'script'], function () { // WATCH SASS, JS & HTML FILES FOR CHANGES
  gulp.watch('dev/app/assets/sass/**/*.scss', ['sass', 'build']).on('change', dev.reload, dist.reload);
  gulp.watch('dev/app/**/*.js', ['script', 'build']).on('change', dev.reload, dist.reload);
  gulp.watch('dev/app/*.html').on('change', dev.reload, dist.reload);
});

var gulp = require('gulp');
var browserSync = require('browser-sync');
var dist = browserSync.create('dist');
var dev = browserSync.create('dev');

/**
 * Serve development version of app
 */
gulp.task('serve-dev', ['inject', 'lint'], function () {
  return (function () { /* Temporary fix to stop this task from running when not called */
    /* Serve development files with browserSync */
    dev.init({
      server: {
        baseDir: './dev/app',
        routes: { /* Ensures files from external folders can also be served */
          '/bower_components': 'bower_components',
          '/.tmp': '.tmp'
        }
      },
      port: 3001,
      ui: {
        port: 3011
      }
    });
    /* Watch files for changes and reload */
    gulp.watch('./dev/app/**/*.scss', ['sass']).on('change', dev.reload);
    gulp.watch('./dev/app/**/*.js', ['lint']).on('change', dev.reload);
    gulp.watch('./dev/app/**/*.html').on('change', dev.reload);
  })();
});

/**
 * Serve Production Version of App
 */
gulp.task('serve-build', ['build'], function () {
  return (function () {
    dist.init({
      server: {
        baseDir: './dist/app',
      },
      port: 3000,
      ui: {
        port: 3010
      }
    });
    gulp.watch(['./tmp/**/*.css', './dev/app/**/*.{js,html}'], ['build']).on('change', dist.reload);
  })();
});

refactor serve tasks