Clean up ui build and generated files.

www/master/gulpfile.js

@@ -1,17 +1,13 @@
 var gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'),
-    // jade = require('gulp-jade'),
     less = require('gulp-less'), path = require('path'),
-    livereload = require('gulp-livereload'),  // Livereload plugin needed:
-    // https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
-    // marked = require('marked'), // For :markdown filter in jade
+    livereload = require('gulp-livereload'),
     path = require('path'), changed = require('gulp-changed'), prettify = require('gulp-html-prettify'),
     w3cjs = require('gulp-w3cjs'), rename = require('gulp-rename'),
-    // flip = require('css-flip'),
     through = require('through2'), gutil = require('gulp-util'), htmlify = require('gulp-angular-htmlify'),
     minifyCSS = require('gulp-minify-css'), gulpFilter = require('gulp-filter'), expect = require('gulp-expect-file'),
     gulpsync = require('gulp-sync')(gulp), ngAnnotate = require('gulp-ng-annotate'),
     sourcemaps = require('gulp-sourcemaps'), del = require('del'), jsoncombine = require('gulp-jsoncombine'),
-    ngConstant = require('gulp-ng-constant'), argv = require('yargs').argv, foreach = require('gulp-foreach'),
+    ngConstant = require('gulp-ng-constant'), foreach = require('gulp-foreach'),
     gcallback = require('gulp-callback'), changeCase = require('change-case'),
     tag_version = require('gulp-tag-version'), PluginError = gutil.PluginError;
 
@@ -25,10 +21,10 @@ var W3C_OPTIONS = {
   output: 'json',
   // Remove some messages that angular will always display.
   filter: function(message) {
-    if (/Element head is missing a required instance of child element title/.test(message)) return false;
-    if (/Attribute .+ not allowed on element .+ at this point/.test(message)) return false;
-    if (/Element .+ not allowed as child of element .+ in this context/.test(message)) return false;
-    if (/Comments seen before doctype./.test(message)) return false;
+    if (/Element head is missing a required instance of child element title/.test(message)) { return false; }
+    if (/Attribute .+ not allowed on element .+ at this point/.test(message)) { return false; }
+    if (/Element .+ not allowed as child of element .+ in this context/.test(message)) { return false; }
+    if (/Comments seen before doctype./.test(message)) { return false; }
   }
 };
 
@@ -40,15 +36,23 @@ var useSourceMaps = false;
 var hidden_files = '**/_*.*';
 var ignored_files = '!' + hidden_files;
 
-var component_hidden_files = '**/js/**/*.*';
-var component_ignored_files = '!' + component_hidden_files;
+var output_folder = '../app';
 
 // VENDOR CONFIG
 var vendor = {
   // vendor scripts required to start the app
-  base: {source: require('./vendor.base.json'), dest: '../app/assets/js', name: 'base.js'},
+  base: {
+    source: require('./vendor.base.json'), 
+    dest: '../app/assets/js', 
+    name: 'base.js'
+  },
   // vendor scripts to make to app work. Usually via lazy loading
-  app: {source: require('./vendor.json'), dest: '../app/vendor'}
+  app: {
+    // instead of the bower downloaded versions of some files, we
+    // pull hand edited versions from the shared/vendor directory.
+    source: require('./vendor.json'),
+    dest: '../app/vendor'
+  }
 };
 
 // SOURCES CONFIG
@@ -69,81 +73,75 @@ var source = {
       'shared/js/modules/controllers/*.js',
       'shared/js/modules/directives/*.js',
       'shared/js/modules/services/*.js',
-      'components/*/js/**/*.js'
+      'components/**/js/**/*.js'
     ],
-    watch: ['manifest.json', 'js/**/*.js', 'shared/**/*.js', 'components/*/js/**/*.js']
+    dest: {
+      name: 'app.js', 
+      dir: '../app/assets/js'
+    },
+    watch: [
+      'manifest.json', 
+      'js/**/*.js', 
+      'shared/**/*.js', 
+      'shared/config/*.json',
+      'components/*/js/**/*.js',
+      'components/*/config/*.json'
+      ]
   },
-  // templates: {
-  //   app: {
-  //       files : ['jade/index.jade'],
-  //       watch: ['jade/index.jade', hidden_files]
-  //   },
-  //   views: {
-  //       files : ['jade/views/*.jade', 'jade/views/**/*.jade', ignored_files],
-  //       watch: ['jade/views/**/*.jade']
-  //   },
-  //   pages: {
-  //       files : ['jade/pages/*.jade'],
-  //       watch: ['jade/pages/*.jade']
-  //   }
-  // },
 
   styles: {
     app: {
-      // , 'components/*/less/*.less'
       source: ['less/app/base.less', 'components/*/less/*.less'],
-      dir: ['less/app', 'components'],
+      paths: ['less/app', 'components'],
+      dest: '../app/assets/css',
       watch: ['less/*.less', 'less/**/*.less', 'components/**/less/*.less', 'components/**/less/**/*.less']
 
     }
   },
 
+  html: {
+    app: {
+      source: ['shared/index.html'],
+      dest: '../app'
+    },
+    views: {
+      source: ['shared/views/**/*.*'],
+      dest: '../app'
+    },
+    watch: ['shared/index.html', 'shared/views/**/*.*']
+  },
+
   components: {
     source: [
       'components/**/*.*',
-      component_ignored_files,
-      '!components/**/config/*.*',
-      '!master/shared/js/modules/config.js',
-      '!components/*/less/*.*',
+      '!components/**/js/**/*.*',
+      '!components/**/config/**/*.*',
+      '!components/**/protractor/**/*.*',
+      '!components/**/test/**/*.*',
       '!components/**/less/**/*.*',
       '!components/**/README.md'
     ],
-    dest: 'components',
+    dest: '../app/components',
     watch: [
       'components/**/*.*',
-      component_ignored_files,
-      '!components/**/config/*.*',
-      '!master/shared/js/modules/config.js',
-      '!components/**/less/*.*'
+      '!components/**/js/**/*.*',
+      '!components/**/config/**/*.*',
+      '!components/**/protractor/**/*.*',
+      '!components/**/test/**/*.*',
+      '!components/**/less/**/*.*',
+      '!components/**/README.md'
     ]
   },
 
   config: {
-    watch: [
-      'shared/config/development.json',
-      'shared/config/production.json',
-      'shared/config/development.json',
-      'shared/config/production.json'
-    ],
     dest: 'shared/config'
   },
 
-  assets: {source: ['shared/assets/**/*.*'], dest: 'shared/assets', watch: ['shared/assets/**/*.*']}
-
-  //,
-  // bootstrap: {
-  //   main: 'less/bootstrap/bootstrap.less',
-  //   dir:  'less/bootstrap',
-  //   watch: ['less/bootstrap/*.less']
-  // }
-};
-
-// BUILD TARGET CONFIG
-var build = {
-  scripts: {app: {main: 'app.js', dir: '../app/assets/js'}},
-  assets: '../app/shared/assets',
-  styles: '../app/assets/css',
-  components: {dir: '../app/components'}
+  assets: {
+    source: ['shared/assets/**/*.*'], 
+    dest: '../app/assets', 
+    watch: ['shared/assets/**/*.*']
+  }
 };
 
 function stringSrc(filename, string) {
@@ -155,6 +153,13 @@ function stringSrc(filename, string) {
   return src;
 }
 
+// Error handler
+function handleError(err) {
+  console.log(err.toString());
+  this.emit('end');
+  process.exit(1);
+}
+
 //---------------
 // TASKS
 //---------------
@@ -217,34 +222,37 @@ gulp.task('bundle-manifest-routes', function() {
 });
 
 // JS APP
-gulp.task('scripts:app', ['bundle-manifest', 'bundle-manifest-routes', 'config', 'scripts:app:base']);
+gulp.task('scripts:app', gulpsync.sync(['bundle-manifest', 'bundle-manifest-routes', 'config', 'scripts:app:base']));
 
 // JS APP BUILD
 gulp.task('scripts:app:base', function() {
   // Minify and copy all JavaScript (except vendor scripts)
   return gulp.src(source.scripts.app)
       .pipe(useSourceMaps ? sourcemaps.init() : gutil.noop())
-      .pipe(concat(build.scripts.app.main))
+      .pipe(concat(source.scripts.dest.name))
       .pipe(ngAnnotate())
-      .on("error", handleError)
-      .pipe(isProduction ? uglify({preserveComments: 'some'}) : gutil.noop())
-      .on("error", handleError)
+      // Now that we run a production build, uglification is breaking angular injection, 
+      // so disable it for now.
+      // TODO: Find out which dependencies are not string based and upgrade them accordingly.
+      // .pipe(isProduction ? uglify({preserveComments: 'some'}) : gutil.noop())
       .pipe(useSourceMaps ? sourcemaps.write() : gutil.noop())
-      .pipe(gulp.dest(build.scripts.app.dir));
+      .pipe(gulp.dest(source.scripts.dest.dir))
+      .on("error", handleError);
 });
 
 // VENDOR BUILD
-gulp.task('scripts:vendor', ['scripts:vendor:base', 'scripts:vendor:app']);
+gulp.task('scripts:vendor', gulpsync.sync(['scripts:vendor:base', 'scripts:vendor:app']));
 
 //  This will be included vendor files statically
 gulp.task('scripts:vendor:base', function() {
 
   // Minify and copy all JavaScript (except vendor scripts)
   return gulp.src(vendor.base.source)
-      .pipe(expect(vendor.base.source))
-      .pipe(uglify())
+      .pipe(expect({ errorOnFailure: true }, vendor.base.source))
+      .pipe(isProduction ? uglify() : gutil.noop())
       .pipe(concat(vendor.base.name))
-      .pipe(gulp.dest(vendor.base.dest));
+      .pipe(gulp.dest(vendor.base.dest))
+      .on("error", handleError);
 });
 
 // copy file from bower folder into the app vendor folder
@@ -253,15 +261,16 @@ gulp.task('scripts:vendor:app', function() {
   var jsFilter = gulpFilter('**/*.js');
   var cssFilter = gulpFilter('**/*.css');
 
-  return gulp.src(vendor.app.source, {base: 'bower_components'})
-      .pipe(expect(vendor.app.source))
+  return gulp.src(vendor.app.source)
+      .pipe(expect({ errorOnFailure: true }, vendor.app.source))
       .pipe(jsFilter)
-      .pipe(uglify())
+      .pipe(isProduction ? uglify() : gutil.noop())
       .pipe(jsFilter.restore())
       .pipe(cssFilter)
-      .pipe(minifyCSS())
+      .pipe(isProduction ? minifyCSS() : gutil.noop())
       .pipe(cssFilter.restore())
-      .pipe(gulp.dest(vendor.app.dest));
+      .pipe(gulp.dest(vendor.app.dest))
+      .on("error", handleError);
 
 });
 
@@ -271,35 +280,14 @@ gulp.task('styles:app', function() {
       .pipe(foreach (function(stream, file) { return stringSrc('import.less', '@import "' + file.relative + '";\n'); }))
       .pipe(concat('app.less'))
       .pipe(useSourceMaps ? sourcemaps.init() : gutil.noop())
-      .pipe(less({paths: source.styles.app.dir}))
-      .on("error", handleError)
+      .pipe(less({paths: source.styles.app.paths}))
       .pipe(isProduction ? minifyCSS() : gutil.noop())
       .pipe(useSourceMaps ? sourcemaps.write() : gutil.noop())
-      .pipe(gulp.dest(build.styles));
+      .pipe(gulp.dest(source.styles.app.dest))
+      .on("error", handleError);
 });
 
-// // APP RTL
-// gulp.task('styles:app:rtl', function() {
-//     return gulp.src(source.styles.app.main)
-//         .pipe( useSourceMaps ? sourcemaps.init() : gutil.noop())
-//         .pipe(less({
-//             paths: [source.styles.app.dir]
-//         }))
-//         .on("error", handleError)
-//         .pipe(flipcss())
-//         .pipe( isProduction ? minifyCSS() : gutil.noop() )
-//         .pipe( useSourceMaps ? sourcemaps.write() : gutil.noop())
-//         .pipe(rename(function(path) {
-//             path.basename += "-rtl";
-//             return path;
-//         }))
-//         .pipe(gulp.dest(build.styles));
-// });
-
-// Environment based configuration
-// https://github.com/kubernetes-ui/kubernetes-ui/issues/21
-
-gulp.task('config', ['config:base', 'config:copy']);
+gulp.task('config', gulpsync.sync(['config:base', 'config:copy']));
 
 gulp.task('config:base', function() {
   return stringSrc('generated-config.js', 'angular.module("kubernetesApp.config", [])' +
@@ -308,23 +296,23 @@ gulp.task('config:base', function() {
 });
 
 gulp.task('config:copy', function() {
-  var environment = argv.env || 'development';  // change this to whatever default environment you need.
-
+  var environment = isProduction ? 'production' : 'development';
   return gulp.src(['shared/config/' + environment + '.json', 'components/**/config/' + environment + '.json'])
-      .pipe(jsoncombine('generated-config.js',
-                        function(data) {
-                          var env = Object.keys(data).reduce(function(result, key) {
-                            // Map the key "environment" to "/" and the keys "component/config/environment" to
-                            // "component".
-                            var newKey = key.replace(environment, '/').replace(/\/config\/\/$/, '');
-                            result[newKey] = data[key];
-                            return result;
-                          }, {});
+    .pipe(expect({ errorOnFailure: true }, 'shared/config/' + environment + '.json'))
+    .on("error", handleError)
+    .pipe(jsoncombine('generated-config.js',
+      function(data) {
+        var env = Object.keys(data).reduce(function(result, key) {
+          // Map the key "environment" to "/" and the keys "component/config/environment" to "component".
+          var newKey = key.replace(environment, '/').replace(/\/config\/\/$/, '');
+          result[newKey] = data[key];
+          return result;
+        }, {});
 
-                          return new Buffer(JSON.stringify({'ENV': env}));
-                        }))
-      .pipe(ngConstant({name: 'kubernetesApp.config', deps: [], constants: {ngConstant: true}}))
-      .pipe(gulp.dest(source.config.dest));
+        return new Buffer(JSON.stringify({'ENV': env}));
+      }))
+    .pipe(ngConstant({name: 'kubernetesApp.config', deps: [], constants: {ngConstant: true}}))
+    .pipe(gulp.dest(source.config.dest));
 });
 
 gulp.task('copy:components', function() {
@@ -332,96 +320,51 @@ gulp.task('copy:components', function() {
   var jsFilter = gulpFilter('**/*.js');
   var cssFilter = gulpFilter('**/*.css');
 
-  del.sync([build.components.dir], {force: true});
-
   return gulp.src(source.components.source, {base: 'components'})
-      .pipe(expect(source.components.source))
+      .pipe(expect({ errorOnFailure: true }, source.components.source))
       .pipe(jsFilter)
-      .pipe(uglify())
+      .pipe(isProduction ? uglify() : gutil.noop())
       .pipe(jsFilter.restore())
       .pipe(cssFilter)
-      .pipe(minifyCSS())
+      .pipe(isProduction ? minifyCSS() : gutil.noop())
       .pipe(cssFilter.restore())
-      .pipe(gulp.dest(build.components.dir));
+      .pipe(gulp.dest(source.components.dest))
+      .on("error", handleError);
 });
 
 gulp.task('copy:shared-assets', function() {
-  del.sync([build.assets], {force: true});
-
   return gulp.src(source.assets.source, {base: 'shared/assets'})
-      .pipe(gulp.dest(build.assets));
+      .pipe(gulp.dest(source.assets.dest));
 });
 
 // Assuming there's "version: 1.2.3" in package.json,
 // tag the last commit as "v1.2.3"//
 gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_version()); });
 
-// // BOOSTRAP
-// gulp.task('bootstrap', function() {
-//     return gulp.src(source.bootstrap.main)
-//         .pipe(less({
-//             paths: [source.bootstrap.dir]
-//         }))
-//         .on("error", handleError)
-//         .pipe(gulp.dest(build.styles));
-// });
+// VIEWS
+gulp.task('content:html', gulpsync.sync(['content:html:app', 'content:html:views']));
 
-// JADE
-// gulp.task('templates:app', function() {
-//     return gulp.src(source.templates.app.files)
-//         .pipe(changed(build.templates.app, { extension: '.html' }))
-//         .pipe(jade())
-//         .on("error", handleError)
-//         .pipe(prettify({
-//             indent_char: ' ',
-//             indent_size: 3,
-//             unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
-//         }))
-//         // .pipe(htmlify({
-//         //     customPrefixes: ['ui-']
-//         // }))
-//         // .pipe(w3cjs( W3C_OPTIONS ))
-//         .pipe(gulp.dest(build.templates.app))
-//         ;
-// });
+gulp.task('content:html:app', function() {
+  return gulp.src(source.html.app.source, {base: 'shared'})
+    .pipe(prettify({
+        indent_char: ' ',
+        indent_size: 4,
+        unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
+    }))
+    .pipe(gulp.dest(source.html.app.dest))
+    .on("error", handleError);
+});
 
-// // JADE
-// gulp.task('templates:pages', function() {
-//     return gulp.src(source.templates.pages.files)
-//         .pipe(changed(build.templates.pages, { extension: '.html' }))
-//         .pipe(jade())
-//         .on("error", handleError)
-//         .pipe(prettify({
-//             indent_char: ' ',
-//             indent_size: 3,
-//             unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
-//         }))
-//         // .pipe(htmlify({
-//         //     customPrefixes: ['ui-']
-//         // }))
-//         // .pipe(w3cjs( W3C_OPTIONS ))
-//         .pipe(gulp.dest(build.templates.pages))
-//         ;
-// });
-
-// // JADE
-// gulp.task('templates:views', function() {
-//     return gulp.src(source.templates.views.files)
-//         .pipe(changed(build.templates.views, { extension: '.html' }))
-//         .pipe(jade())
-//         .on("error", handleError)
-//         .pipe(prettify({
-//             indent_char: ' ',
-//             indent_size: 3,
-//             unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
-//         }))
-//         // .pipe(htmlify({
-//         //     customPrefixes: ['ui-']
-//         // }))
-//         // .pipe(w3cjs( W3C_OPTIONS ))
-//         .pipe(gulp.dest(build.templates.views))
-//         ;
-// });
+gulp.task('content:html:views', function() {
+  return gulp.src(source.html.views.source, {base: 'shared'})
+    .pipe(prettify({
+        indent_char: ' ',
+        indent_size: 4,
+        unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
+    }))
+    .pipe(gulp.dest(source.html.views.dest))
+    .on("error", handleError);
+});
 
 //---------------
 // WATCH
@@ -431,87 +374,47 @@ gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_versi
 gulp.task('watch', function() {
   livereload.listen();
 
+  gulp.watch(source.html.watch, ['content:html']);
   gulp.watch(source.scripts.watch, ['scripts:app']);
   gulp.watch(source.styles.app.watch, ['styles:app']);
   gulp.watch(source.components.watch, ['copy:components']);
   gulp.watch(source.assets.watch, ['copy:shared-assets']);
-  // gulp.watch(source.templates.pages.watch,   ['templates:pages']);
-  // gulp.watch(source.templates.views.watch,   ['templates:views']);
-  // gulp.watch(source.templates.app.watch,     ['templates:app']);
 
-  gulp.watch([
-
-                 '../app/**'
-
-  ])
+  gulp.watch(['../app/**'])
       .on('change', function(event) {
-
         livereload.changed(event.path);
-
       });
-
 });
 
 //---------------
-// DEFAULT TASK
+// ENTRY POINTS
 //---------------
 
 // build for production (minify)
-gulp.task('build', ['prod', 'default']);
+gulp.task('build', gulpsync.sync(['prod', 'clean', 'compile']));
 gulp.task('prod', function() { isProduction = true; });
 
 // build with sourcemaps (no minify)
-gulp.task('sourcemaps', ['usesources', 'default']);
+gulp.task('sourcemaps', gulpsync.sync(['usesources', 'compile']));
 gulp.task('usesources', function() { useSourceMaps = true; });
 
-// default (no minify)
-gulp.task('default', gulpsync.sync(['scripts:vendor', 'copy:components', 'scripts:app', 'start']), function() {
-
+// build for development (no minify)
+gulp.task('default', gulpsync.sync(['clean', 'compile', 'watch']), function() {
   gutil.log(gutil.colors.cyan('************'));
-  gutil.log(gutil.colors.cyan('* All Done *'),
-            'You can start editing your code, LiveReload will update your browser after any change..');
+  gutil.log('You can start editing your code. LiveReload will update your browser after any change.');
   gutil.log(gutil.colors.cyan('************'));
-
 });
 
-gulp.task('start', [
-  'styles:app',
-  'copy:components',
+gulp.task('clean', function() {
+  del.sync(['shared/config/generated-config.js'], {force: true});
+  del.sync([output_folder], {force: true});
+});
+
+gulp.task('compile', gulpsync.sync([
   'copy:shared-assets',
-  // 'templates:app',
-  // 'templates:pages',
-  // 'templates:views',
-  'watch'
-]);
-
-gulp.task('done', function() {
-  console.log('All Done!! You can start editing your code, LiveReload will update your browser after any change..');
-});
-
-// Error handler
-function handleError(err) {
-  console.log(err.toString());
-  this.emit('end');
-}
-
-// // Mini gulp plugin to flip css (rtl)
-// function flipcss(opt) {
-
-//   if (!opt) opt = {};
-
-//   // creating a stream through which each file will pass
-//   var stream = through.obj(function(file, enc, cb) {
-//     if(file.isNull()) return cb(null, file);
-
-//     if(file.isStream()) {
-//         console.log("todo: isStream!");
-//     }
-
-//     var flippedCss = flip(String(file.contents), opt);
-//     file.contents = new Buffer(flippedCss);
-//     cb(null, file);
-//   });
-
-//   // returning the file stream
-//   return stream;
-// }
+  'copy:components',
+  'content:html',
+  'scripts:vendor', 
+  'scripts:app', 
+  'styles:app'
+]));