gulpfile.js

gulpfile.js

// DO NOT CHANGE //

const gulp = require('gulp');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const gwebpack = require('webpack-stream');
const browserSync = require('browser-sync');
const runSequence = require('run-sequence');
const debug = require('gulp-debug');
const cache = require('gulp-cached');
const cssfont64 = require('gulp-cssfont64');
const replace = require('gulp-replace');
const insert = require('gulp-insert');
const concat = require('gulp-concat');
const del = require('del');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const nodemon = require('gulp-nodemon');
const _ = require( 'lodash' );

var sassLoaders = [
  'css-loader',
  'autoprefixer-loader?browsers=last 2 version',
  'sass-loader?sourceMap&' +
  'includePaths[]=' + path.resolve(__dirname, './node_modules') +
  '&includePaths[]=' + path.resolve(__dirname, './src/sass')
];

var node_modules_dir = path.join(__dirname, 'node_modules');

var webpackBase = {
    output: {
      path: process.cwd(),
      filename: 'kubernetes-ui.js'
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js',
        function (module, count) {
          return module.resource && module.resource.indexOf(node_modules_dir) === 0;
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ],
    resolve: {
      extensions: ['', '.js', '.jsx', '.scss', '.css'],
      modulesDirectories: ['src', 'node_modules'],
    },
    module: {
      // preLoaders: [
      //   {
      //     test: /\.(js|jsx)$/,
      //     loaders: ['eslint-loader'],
      //     // include: APP_PATH,
      //     exclude: /node_modules/
      //   }
      // ],
      loaders: [
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
        { test: /\.json$/,loader: 'json'},
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
      ]
    }
}

var webpackDev = {
  overrides: {
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://0.0.0.0:3004',
      'webpack/hot/only-dev-server',
      './src/js/app'
    ],
    cache: true,
    debug: true,
    watchDelay: 2000,
    useMemoryFs: true,
    progress: true
  },
  loaders:[
    {
      test: /\.js$|\.jsx$/,
      loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'],
      exclude: /node_modules/
    },
    {
      test: /\.scss$|\.sass|\.css$/,
      loaders: ['style-loader', 'css-loader']
    }
  ]
}

var webpackProd = {
  overrides: {
    devtool: 'source-map',
    entry: [
      './src/js/app'
    ]
  },
  loaders:[
    {
      test: /\.js$|\.jsx$/,
      loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'],
      exclude: /node_modules/
    },
    {
      test: /\.scss$|\.sass|\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
    }
  ],
  plugins: [
    new ExtractTextPlugin('kubernetes-ui.css', {allChunks: false}),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.optimize.UglifyJsPlugin()
  ]
}

function webpackConfig(base, target){
    var config = _.merge({}, base, target.overrides)
    config.module.loaders = _.union( config.module.loaders, target.loaders );
    config.plugins = _.union( config.plugins, target.plugins );
    return config
}

var config = {
  dirs: {
    src: 'src',
    dest: 'dist/kubernetes-ui',
    webpack: ['src/js/**/*.jsx', 'src/js/**/*.js']
  },
  watch: {
    interval: 2000,
    usePolling: true
  },
  webpackDevServer: {
    contentBase: 'dist',
    publicPath: '/kubernetes-ui',
    hot: true,
    historyApiFallback: true,
    stats: false,
    port: 3004,
    quiet: false,
    noInfo: false,
    devtool: 'source-map',
    proxy: {
      "/kubernetes-ui/api/*":{
        target: "http://localhost:3005"
      }
    }
  },
  browserSync: {
    port: 3001,
    proxy: "http://localhost:3004",
    open: false,
    startPath: "/kubernetes-ui/index.html",
    ui: {
      port: 3002,
      weinre: {
        port: 3003
      }
    }
  }
};

gulp.task('build:webpack', function() {
  return gulp.src(config.dirs.webpack)
    .pipe(cache('webpack'))
    .pipe(debug())
    .pipe(gwebpack(webpackConfig(webpackBase, webpackProd)))
    .pipe(gulp.dest(config.dirs.dest));
});

gulp.task('build:html', function() {
  return gulp.src(config.dirs.src + '/html/**/*.html')
    .pipe(cache('html'))
    .pipe(gulp.dest(config.dirs.dest)).pipe(debug());
});

gulp.task('build:raw', function() {
  return gulp.src(config.dirs.src + '/raw/**/*')
    .pipe(cache('raw'))
    .pipe(gulp.dest(config.dirs.dest)).pipe(debug());
});

gulp.task('build:imgs', function() {
  return gulp.src(config.dirs.src + '/imgs/*')
    .pipe(cache('imgs'))
    .pipe(gulp.dest(config.dirs.dest)).pipe(debug());
});

gulp.task('build:fonts', function() {
  return gulp.src(config.dirs.src + '/fonts/*.ttf')
    .pipe(debug())
    .pipe(cssfont64())
    .pipe(replace('-Regular;', ';font-weight:normal;font-style:normal;'))
    .pipe(replace('-Bold;', ';font-weight:bold;font-style:normal;'))
    .pipe(replace('-Black;', ';font-weight:800;font-style:normal;'))
    .pipe(replace('-Light;', ';font-weight:300;font-style:normal;'))
    .pipe(replace('-Hairline;', ';font-weight:300;font-style:normal;'))
    .pipe(replace('-Italic;', ';font-weight:normal;font-style:italic;'))
    .pipe(replace('-BoldItalic;', ';font-weight:bold;font-style:italic;'))
    .pipe(replace('-BlackItalic;', ';font-weight:800;font-style:italic;'))
    .pipe(replace('-LightItalic;', ';font-weight:300;font-style:italic;'))
    .pipe(replace('-HairlineItalic;', ';font-weight:200;font-style:italic;'))
    .pipe(replace('font-woff', 'x-font-woff'))
    .pipe(insert.prepend('@charset "UTF-8";\n'))
    .pipe(concat('fonts.css'))
    .pipe(gulp.dest(config.dirs.dest));
});

gulp.task('build', function(cb) {
  runSequence(['build:html', 'build:raw', 'build:imgs', 'build:fonts', 'build:webpack'], cb)
});

gulp.task('clean', function(cb) {
  return del('dist');
});

gulp.task('start:server', function() {
  nodemon({
    script: 'server.js',
    watch: 'server',
  })
});

gulp.task('start', function(cb) {
  runSequence('start:server', cb);
});

gulp.task('dev:webpack-server', function() {
  var server = new WebpackDevServer(
      webpack(webpackConfig(webpackBase, webpackDev)),
      config.webpackDevServer
  );
  server.listen(config.webpackDevServer.port, '0.0.0.0', function(err, result) {
    if (err) {
      console.log(err);
    }
  });
});

gulp.task('dev:browser-sync', function() {
    browserSync.init(config.browserSync);
});

gulp.task('dev:watch', function() {
  gulp.watch(config.dirs.src + '/**/*.html', config.watch, ['build:html']);
});

gulp.task('dev', function(cb) {
  runSequence('clean', 'build', ['dev:webpack-server', 'dev:browser-sync', 'dev:watch', 'start'], cb);
});

//default to help
var taskListing = require('gulp-task-listing');
gulp.task('help', taskListing);
gulp.task('default', ['help']);

 // DO NOT CHANGE //