feat: new Web UI build system

- use generator-gulp-angular by @swiip
- remove old static file

webui/gulp/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "node": true
+  }
+}

webui/gulp/build.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var $ = require('gulp-load-plugins')({
+  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
+});
+
+gulp.task('partials', function () {
+  return gulp.src([
+    path.join(conf.paths.src, '/app/**/*.html'),
+    path.join(conf.paths.tmp, '/serve/app/**/*.html')
+  ])
+    .pipe($.minifyHtml({
+      empty: true,
+      spare: true,
+      quotes: true
+    }))
+    .pipe($.angularTemplatecache('templateCacheHtml.js', {
+      module: 'traefik',
+      root: 'app'
+    }))
+    .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
+});
+
+gulp.task('html', ['inject', 'partials'], function () {
+  var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
+  var partialsInjectOptions = {
+    starttag: '<!-- inject:partials -->',
+    ignorePath: path.join(conf.paths.tmp, '/partials'),
+    addRootSlash: false
+  };
+
+  var htmlFilter = $.filter('*.html', { restore: true });
+  var jsFilter = $.filter('**/*.js', { restore: true });
+  var cssFilter = $.filter('**/*.css', { restore: true });
+  var assets;
+
+  return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
+    .pipe($.inject(partialsInjectFile, partialsInjectOptions))
+    .pipe(assets = $.useref.assets())
+    .pipe($.rev())
+    .pipe(jsFilter)
+    .pipe($.sourcemaps.init())
+    .pipe($.ngAnnotate())
+    .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
+    .pipe($.sourcemaps.write('maps'))
+    .pipe(jsFilter.restore)
+    .pipe(cssFilter)
+    .pipe($.sourcemaps.init())
+    .pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
+    .pipe($.minifyCss({ processImport: false }))
+    .pipe($.sourcemaps.write('maps'))
+    .pipe(cssFilter.restore)
+    .pipe(assets.restore())
+    .pipe($.useref())
+    .pipe($.revReplace())
+    .pipe(htmlFilter)
+    .pipe($.minifyHtml({
+      empty: true,
+      spare: true,
+      quotes: true,
+      conditionals: true
+    }))
+    .pipe(htmlFilter.restore)
+    .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
+    .pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));
+  });
+
+// Only applies for fonts from bower dependencies
+// Custom fonts are handled by the "other" task
+gulp.task('fonts', function () {
+  return gulp.src($.mainBowerFiles())
+    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
+    .pipe($.flatten())
+    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
+});
+
+gulp.task('other', function () {
+  var fileFilter = $.filter(function (file) {
+    return file.stat.isFile();
+  });
+
+  return gulp.src([
+    path.join(conf.paths.src, '/**/*'),
+    path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
+  ])
+    .pipe(fileFilter)
+    .pipe(gulp.dest(path.join(conf.paths.dist, '/')));
+});
+
+gulp.task('clean', function () {
+  return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]);
+});
+
+gulp.task('build', ['html', 'fonts', 'other']);

webui/gulp/conf.js

@@ -0,0 +1,41 @@
+/**
+ *  This file contains the variables used in other gulp files
+ *  which defines tasks
+ *  By design, we only put there very generic config values
+ *  which are used in several places to keep good readability
+ *  of the tasks
+ */
+
+var gutil = require('gulp-util');
+
+/**
+ *  The main paths of your project handle these with care
+ */
+exports.paths = {
+  src: 'src',
+  dist: '../static',
+  tmp: '.tmp',
+  e2e: 'e2e'
+};
+
+/**
+ *  Wiredep is the lib which inject bower dependencies in your project
+ *  Mainly used to inject script tags in the index.html but also used
+ *  to inject css preprocessor deps and js files in karma
+ */
+exports.wiredep = {
+  exclude: [/\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
+  directory: 'bower_components'
+};
+
+/**
+ *  Common implementation for an error handler of a Gulp plugin
+ */
+exports.errorHandler = function(title) {
+  'use strict';
+
+  return function(err) {
+    gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
+    this.emit('end');
+  };
+};

webui/gulp/e2e-tests.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var browserSync = require('browser-sync');
+
+var $ = require('gulp-load-plugins')();
+
+// Downloads the selenium webdriver
+gulp.task('webdriver-update', $.protractor.webdriver_update);
+
+gulp.task('webdriver-standalone', $.protractor.webdriver_standalone);
+
+function runProtractor (done) {
+  var params = process.argv;
+  var args = params.length > 3 ? [params[3], params[4]] : [];
+
+  gulp.src(path.join(conf.paths.e2e, '/**/*.js'))
+    .pipe($.protractor.protractor({
+      configFile: 'protractor.conf.js',
+      args: args
+    }))
+    .on('error', function (err) {
+      // Make sure failed tests cause gulp to exit non-zero
+      throw err;
+    })
+    .on('end', function () {
+      // Close browser sync server
+      browserSync.exit();
+      done();
+    });
+}
+
+gulp.task('protractor', ['protractor:src']);
+gulp.task('protractor:src', ['serve:e2e', 'webdriver-update'], runProtractor);
+gulp.task('protractor:dist', ['serve:e2e-dist', 'webdriver-update'], runProtractor);

webui/gulp/inject.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var $ = require('gulp-load-plugins')();
+
+var wiredep = require('wiredep').stream;
+var _ = require('lodash');
+
+var browserSync = require('browser-sync');
+
+gulp.task('inject-reload', ['inject'], function() {
+  browserSync.reload();
+});
+
+gulp.task('inject', ['scripts', 'styles'], function () {
+  var injectStyles = gulp.src([
+    path.join(conf.paths.tmp, '/serve/app/**/*.css'),
+    path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
+  ], { read: false });
+
+  var injectScripts = gulp.src([
+    path.join(conf.paths.src, '/app/**/*.module.js'),
+    path.join(conf.paths.src, '/app/**/*.js'),
+    path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
+    path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
+  ])
+  .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
+
+  var injectOptions = {
+    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
+    addRootSlash: false
+  };
+
+  return gulp.src(path.join(conf.paths.src, '/*.html'))
+    .pipe($.inject(injectStyles, injectOptions))
+    .pipe($.inject(injectScripts, injectOptions))
+    .pipe(wiredep(_.extend({}, conf.wiredep)))
+    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
+});

webui/gulp/scripts.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var browserSync = require('browser-sync');
+
+var $ = require('gulp-load-plugins')();
+
+
+gulp.task('scripts-reload', function() {
+  return buildScripts()
+    .pipe(browserSync.stream());
+});
+
+gulp.task('scripts', function() {
+  return buildScripts();
+});
+
+function buildScripts() {
+  return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
+    .pipe($.eslint())
+    .pipe($.eslint.format())
+    .pipe($.size())
+};

webui/gulp/server.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var browserSync = require('browser-sync');
+var browserSyncSpa = require('browser-sync-spa');
+
+var util = require('util');
+
+var proxyMiddleware = require('http-proxy-middleware');
+
+function browserSyncInit(baseDir, browser) {
+  browser = browser === undefined ? 'default' : browser;
+
+  var routes = null;
+  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
+    routes = {
+      '/bower_components': 'bower_components'
+    };
+  }
+
+  var server = {
+    baseDir: baseDir,
+    routes: routes
+  };
+
+  /*
+   * You can add a proxy to your backend by uncommenting the line below.
+   * You just have to configure a context which will we redirected and the target url.
+   * Example: $http.get('/users') requests will be automatically proxified.
+   *
+   * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md
+   */
+  // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true});
+
+  browserSync.instance = browserSync.init({
+    startPath: '/',
+    server: server,
+    browser: browser
+  });
+}
+
+browserSync.use(browserSyncSpa({
+  selector: '[ng-app]'// Only needed for angular apps
+}));
+
+gulp.task('serve', ['watch'], function () {
+  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
+});
+
+gulp.task('serve:dist', ['build'], function () {
+  browserSyncInit(conf.paths.dist);
+});
+
+gulp.task('serve:e2e', ['inject'], function () {
+  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
+});
+
+gulp.task('serve:e2e-dist', ['build'], function () {
+  browserSyncInit(conf.paths.dist, []);
+});

webui/gulp/styles.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var browserSync = require('browser-sync');
+
+var $ = require('gulp-load-plugins')();
+
+var wiredep = require('wiredep').stream;
+var _ = require('lodash');
+
+gulp.task('styles-reload', ['styles'], function() {
+  return buildStyles()
+    .pipe(browserSync.stream());
+});
+
+gulp.task('styles', function() {
+  return buildStyles();
+});
+
+var buildStyles = function() {
+  var sassOptions = {
+    style: 'expanded'
+  };
+
+  var injectFiles = gulp.src([
+    path.join(conf.paths.src, '/app/**/*.scss'),
+    path.join('!' + conf.paths.src, '/app/index.scss')
+  ], { read: false });
+
+  var injectOptions = {
+    transform: function(filePath) {
+      filePath = filePath.replace(conf.paths.src + '/app/', '');
+      return '@import "' + filePath + '";';
+    },
+    starttag: '// injector',
+    endtag: '// endinjector',
+    addRootSlash: false
+  };
+
+
+  return gulp.src([
+    path.join(conf.paths.src, '/app/index.scss')
+  ])
+    .pipe($.inject(injectFiles, injectOptions))
+    .pipe(wiredep(_.extend({}, conf.wiredep)))
+    .pipe($.sourcemaps.init())
+    .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
+    .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
+    .pipe($.sourcemaps.write())
+    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
+};

webui/gulp/unit-tests.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var karma = require('karma');
+
+var pathSrcHtml = [
+  path.join(conf.paths.src, '/**/*.html')
+];
+
+var pathSrcJs = [
+  path.join(conf.paths.src, '/**/!(*.spec).js')
+];
+
+function runTests (singleRun, done) {
+  var reporters = ['progress'];
+  var preprocessors = {};
+
+  pathSrcHtml.forEach(function(path) {
+    preprocessors[path] = ['ng-html2js'];
+  });
+
+  if (singleRun) {
+    pathSrcJs.forEach(function(path) {
+      preprocessors[path] = ['coverage'];
+    });
+    reporters.push('coverage')
+  }
+
+  var localConfig = {
+    configFile: path.join(__dirname, '/../karma.conf.js'),
+    singleRun: singleRun,
+    autoWatch: !singleRun,
+    reporters: reporters,
+    preprocessors: preprocessors
+  };
+
+  var server = new karma.Server(localConfig, function(failCount) {
+    done(failCount ? new Error("Failed " + failCount + " tests.") : null);
+  })
+  server.start();
+}
+
+gulp.task('test', ['scripts'], function(done) {
+  runTests(true, done);
+});
+
+gulp.task('test:auto', ['watch'], function(done) {
+  runTests(false, done);
+});

webui/gulp/watch.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var browserSync = require('browser-sync');
+
+function isOnlyChange(event) {
+  return event.type === 'changed';
+}
+
+gulp.task('watch', ['inject'], function () {
+
+  gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
+
+  gulp.watch([
+    path.join(conf.paths.src, '/app/**/*.css'),
+    path.join(conf.paths.src, '/app/**/*.scss')
+  ], function(event) {
+    if(isOnlyChange(event)) {
+      gulp.start('styles-reload');
+    } else {
+      gulp.start('inject-reload');
+    }
+  });
+
+  gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
+    if(isOnlyChange(event)) {
+      gulp.start('scripts-reload');
+    } else {
+      gulp.start('inject-reload');
+    }
+  });
+
+  gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {
+    browserSync.reload(event.path);
+  });
+});