From b963c8bc2ba1e2f4ce7fc73d738c7ae8bd6a721a Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Mon, 12 Sep 2016 21:51:51 -0700
Subject: [PATCH] Fix production asset transpiling Prevent development tasks
 from running in production

---
 README.md    |  4 ++--
 gulpfile.js  | 38 +++++++++++++++++++++-----------------
 package.json |  4 ++--
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 64992995..2b77dce6 100644
--- a/README.md
+++ b/README.md
@@ -46,9 +46,9 @@ If you have a specific issue or bug, please file a Github issue. If you want to
 #### Local Development
 1. Run `npm install`.
 2. Run `npm start` and `npm run start:watch` in separate terminal instances.
-3. Access the UI through the [browser-sync](https://www.browsersync.io/) proxy at [localhost:4200](http://localhost:4200).
   * `npm start` uses [nodemon](https://github.com/remy/nodemon) to watch for changes to the server-side JavaScript.
-  * `npm run start:watch` watches for changes in the client-side source..
+  * `npm run start:watch` watches for changes in the client-side source.
+3. Access the UI through the [browser-sync](https://www.browsersync.io/) proxy at [localhost:4200](http://localhost:4200).
 
 # Screenshots
 ![](https://s3.amazonaws.com/johnfurrow.com/share/flood-screenshot-a-0606.png)
diff --git a/gulpfile.js b/gulpfile.js
index 05346d69..4a001197 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,7 +1,7 @@
 'use strict';
 
 let autoprefixer = require('gulp-autoprefixer');
-let browserSync = require('browser-sync');
+let browserSync = null;
 let cssnano = require('gulp-cssnano');
 let eslint = require('gulp-eslint');
 let gulp = require('gulp');
@@ -12,6 +12,12 @@ let sourcemaps = require('gulp-sourcemaps');
 let uglify = require('gulp-uglify');
 let webpack = require('webpack');
 
+let development = process.env.NODE_ENV === 'development';
+
+if (development) {
+  browserSync = require('browser-sync');
+}
+
 // Ensure we have a user-defined config.js for use throughout the app.
 try {
   let fs = require('fs');
@@ -25,8 +31,6 @@ try {
 let config = require('./config');
 let packageInfo = require('./package');
 
-let development = process.env.NODE_ENV === 'development';
-
 // Allow custom Flood proxy.
 let floodServerHost = config.floodServerHost || 'localhost';
 let proxyPath = `${floodServerHost}:${config.floodServerPort}`;
@@ -37,9 +41,7 @@ let dirs = {
   js: 'scripts',
   jsDist: '',
   styles: 'sass',
-  stylesDist: '',
-  img: 'images',
-  imgDist: 'images'
+  stylesDist: ''
 };
 
 let files = {
@@ -51,6 +53,7 @@ let files = {
 
 let webpackDevtool = 'source-map';
 let webpackWatch = false;
+
 if (development) {
   webpackDevtool = 'eval-source-map';
   webpackWatch = true;
@@ -108,17 +111,19 @@ gulp.task('eslint', () => {
     .pipe(eslint.format());
 });
 
-gulp.task('images', () => {
-  return gulp.src(dirs.src + '/' + dirs.img + '/**/*.*')
-    .pipe(gulp.dest(dirs.dist + '/' + dirs.imgDist));
-});
-
 gulp.task('sass', () => {
   return gulp.src(dirs.src + '/' + dirs.styles + '/' + files.mainStyles + '.scss')
-    .pipe(gulpif(development, sourcemaps.init()))
+    .pipe(sass())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest(dirs.dist + '/' + dirs.stylesDist));
+});
+
+gulp.task('sass:development', () => {
+  return gulp.src(dirs.src + '/' + dirs.styles + '/' + files.mainStyles + '.scss')
+    .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(autoprefixer())
-    .pipe(gulpif(development, sourcemaps.write('.')))
+    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(dirs.dist + '/' + dirs.stylesDist))
     .pipe(browserSync.stream({match: "**/*.css"}));
 });
@@ -145,8 +150,7 @@ gulp.task('reload', () => {
 });
 
 gulp.task('watch', () => {
-  gulp.watch(dirs.src + '/' + dirs.styles + '/**/*.scss', ['sass']);
-  gulp.watch(dirs.src + '/' + dirs.img + '/**/*', ['images']);
+  gulp.watch(dirs.src + '/' + dirs.styles + '/**/*.scss', ['sass:development']);
   gulp.watch(dirs.src + '/' + dirs.js + '/**/*', ['eslint']);
 });
 
@@ -177,8 +181,8 @@ gulp.task('webpack', (callback) => {
   });
 });
 
-gulp.task('default', ['webpack', 'sass', 'images', 'reload']);
+gulp.task('default', ['webpack', 'sass']);
 
 gulp.task('dist', ['default', 'minify-css', 'minify-js']);
 
-gulp.task('livereload', ['default', 'browsersync', 'watch']);
+gulp.task('livereload', ['webpack', 'sass:development', 'browsersync', 'watch']);
diff --git a/package.json b/package.json
index 273baa7d..38b9a1d2 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "preinstall": "npm prune",
     "prestart": "./node_modules/.bin/gulp dist",
     "start": "./node_modules/.bin/nodemon ./server/bin/www",
-    "start:production": "node ./server/bin/www",
+    "start:production": "npm run prestart; node ./server/bin/www",
     "start:watch": "NODE_ENV='development' ./node_modules/.bin/gulp livereload"
   },
   "dependencies": {
@@ -23,6 +23,7 @@
     "d3": "^3.5.6",
     "debug": "^2.2.0",
     "del": "^2.2.1",
+    "envify": "^3.4.0",
     "es6-promise": "^3.2.1",
     "events": "^1.1.0",
     "express": "^4.14.0",
@@ -75,7 +76,6 @@
   },
   "devDependencies": {
     "browser-sync": "^2.13.0",
-    "envify": "^3.4.0",
     "eslint": "^2.8.0",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.5.0",