Initial Commit Rework

frontend/gulp/webpack.js

@@ -0,0 +1,159 @@
+const _ = require('lodash');
+const gulp = require('gulp');
+const simpleVars = require('postcss-simple-vars');
+const nested = require('postcss-nested');
+const autoprefixer = require('autoprefixer');
+const webpackStream = require('webpack-stream');
+const livereload = require('gulp-livereload');
+const path = require('path');
+const webpack = require('webpack');
+const errorHandler = require('./helpers/errorHandler');
+const reload = require('require-nocache')(module);
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const uiFolder = 'UI';
+const root = path.join(__dirname, '..', 'src');
+const isProduction = process.argv.indexOf('--production') > -1;
+
+console.log('ROOT:', root);
+console.log('isProduction:', isProduction);
+
+const cssVariables = [
+  '../src/Styles/Variables/colors',
+  '../src/Styles/Variables/dimensions',
+  '../src/Styles/Variables/fonts',
+  '../src/Styles/Variables/animations'
+].map(require.resolve);
+
+const config = {
+  devtool: '#source-map',
+  stats: {
+    children: false
+  },
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  entry: {
+    preload: 'preload.js',
+    vendor: 'vendor.js',
+    index: 'index.js'
+  },
+  resolve: {
+    root: [
+      root,
+      path.join(root, 'Shims'),
+      path.join(root, 'JsLibraries')
+    ]
+  },
+  output: {
+    filename: path.join('_output', uiFolder, '[name].js'),
+    sourceMapFilename: '[file].map'
+  },
+  plugins: [
+    new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    }),
+    new webpack.DefinePlugin({
+      __DEV__: !isProduction,
+      'process.env': {
+        NODE_ENV: isProduction ? JSON.stringify('production') : JSON.stringify('development')
+      }
+    })
+  ],
+  resolveLoader: {
+    modulesDirectories: [
+      'node_modules',
+      'gulp/webpack/'
+    ]
+  },
+  eslint: {
+    formatter: function(results) {
+      return JSON.stringify(results);
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules|JsLibraries)/,
+        loader: 'babel',
+        query: {
+          plugins: ['transform-class-properties'],
+          presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
+          env: {
+            development: {
+              plugins: ['transform-react-jsx-source']
+            }
+          }
+        }
+      },
+
+      // CSS Modules
+      {
+        test: /\.css$/,
+        exclude: /(node_modules|globals.css)/,
+        loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
+      },
+
+      // Global styles
+      {
+        test: /\.css$/,
+        include: /(node_modules|globals.css)/,
+        loader: 'style!css-loader'
+      },
+
+      // Fonts
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]'
+      },
+      {
+        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]'
+      }
+    ]
+  },
+  postcss: function(wpack) {
+    cssVariables.forEach(wpack.addDependency);
+
+    return [
+      simpleVars({
+        variables: function() {
+          return cssVariables.reduce(function(obj, vars) {
+            return _.extend(obj, reload(vars));
+          }, {});
+        }
+      }),
+      nested(),
+      autoprefixer({
+        browsers: [
+          'Chrome >= 30',
+          'Firefox >= 30',
+          'Safari >= 6',
+          'Edge >= 12',
+          'Explorer >= 10',
+          'iOS >= 7',
+          'Android >= 4.4'
+        ]
+      })
+    ];
+  }
+};
+
+gulp.task('webpack', () => {
+  return gulp.src('index.js')
+    .pipe(webpackStream(config))
+    .pipe(gulp.dest(''));
+});
+
+gulp.task('webpackWatch', () => {
+  config.watch = true;
+  return gulp.src('')
+    .pipe(webpackStream(config))
+    .on('error', errorHandler)
+    .pipe(gulp.dest(''))
+    .on('error', errorHandler)
+    .pipe(livereload())
+    .on('error', errorHandler);
+});