Merge pull request #181 from drolsen/dev

Dev release

build/assets.jsx

@@ -7,3 +7,12 @@
 
 import '@src/styles';
 import '@src/scripts';
+
+const requireAll = (context) => context.keys().map(context);
+
+// Import all CSS and Image files
+requireAll(require.context(
+  '@elements/',
+  true,
+  /^(?!.*Root).*\/(?!.*RichText).*\/(?!.*font-face).*\.(css|svg|jpg|png|gif)$/
+));

build/configs/build.config.js

@@ -4,17 +4,16 @@
 */
 
 // devDependencies
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const Package = require('../../package.json');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { WebpackHooks } = require('./webpack/webpack.plugins');
 
 // build configuration files
 const js = require('./js/js.config.js');                // all js file related build configurations
 const css = require('./css/css.config.js');             // all css file related build configurations
 const img = require('./img/img.config.js');             // all img/svg related build configurations
-const html = require('./html/html.config.js');          // all html related build configurations
 const font = require('./font/font.config.js');          // all font related build configurations
 const alias = require('./webpack/alias.config.js');     // all file path alias helper configurations
 const stats = require('./webpack/stats.config.js');     // all terminal stats configurations
@@ -25,36 +24,51 @@ const config = {
     assets: './build/assets.jsx'
   },
   output: {
-    path: path.resolve(__dirname, `../../${Package.directories.dest}`),   // sets default location for all compiled files
-    publicPath: Package.directories.publicPath,                           // sets a default public location (required by react-routes)
-    filename: `.${Package.directories.assetPath}/js/[name].js`,           // sets filename of bundled .js file (relative to output.path config)
+    path: path.resolve(__dirname, `../../dist`), // sets default location for all compiled files
+    publicPath: Package.directories.publicPath,  // sets a default public location (required by react-routes)
+    filename: `${Package.directories.assetPath}/js/[name].js`,            // sets filename of bundled .js file (relative to output.path config)
     pathinfo: false
   },
   module: {
     rules: [
       ...css.config,  // see build/config/css/css.config.js
       ...js.config,   // see build/config/js/js.config.js
       ...img.config,  // see build/config/img/img.config.js
-      ...html.config, // see build/config/html/html.config.js
       ...font.config  // see build/config/font/font.config.js
     ]
   },
   plugins: [
     ...css.plugins,   // see build/config/css/css.config.js
     ...js.plugins,    // see build/config/js/js.config.js
     ...img.plugins,   // see build/config/img/img.config.js
-    ...html.plugins,  // see build/config/html/html.config.js
     ...font.plugins,  // see build/config/font/font.config.js
-    ...alias.plugins, // see build/config/alias.config.js
-    new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server.
-      {
-        from: path.resolve(
-          __dirname,
-          `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}`
-        ), // for IIS servers
-        to: path.resolve(__dirname, `../../${Package.directories.dest}`)
+    ...alias.plugins,  // see build/config/alias.config.js,
+    new WebpackHooks({
+      done: () => {
+        // If output location is not dist, we copy results from dist
+        if (Package.directories.dest !== 'dist') {
+          // Clean configured output location
+          fs.remove(
+            path.resolve(
+              __dirname,
+              `../../${Package.directories.dest}/${Package.directories.assetPath}/img`
+            )
+          );
+
+          // Copy from /dist to configured output location
+          fs.copy(
+            path.resolve(
+              __dirname,
+              `../../dist`
+            ),
+            path.resolve(
+              __dirname,
+              `../../${Package.directories.dest}`
+            )
+          );
+        }
       }
-    ])
+    })
   ],
   ...stats.config,    // see build/configs/webpack/stats.config.js
   resolve: {
@@ -65,6 +79,10 @@ const config = {
   performance: {
     maxAssetSize: 170000,
     assetFilter: (asset) => {
+      if (asset.match('guide.js')) {
+        return false;
+      }
+
       return asset.match('assets.js');
     }
   },
@@ -76,11 +94,5 @@ const config = {
 
 // Prod vs. Dev config customizing
 module.exports = (env, argv) => {
-  if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) {
-    config.plugins.push(
-      new CleanWebpackPlugin()
-    );
-  }
-
   return config;
 };

build/configs/css/css.config.js

@@ -72,7 +72,7 @@ module.exports = {
       ]
     }),
     new MiniCssExtractPlugin({                  // used to compile our css file.
-      filename: `.${Package.directories.assetPath}/css/[name].css`,
+      filename: `${Package.directories.assetPath}/css/[name].css`,
       chunkFilename: './[name].css'
     })
   ]

build/configs/dev.config.js

@@ -4,7 +4,9 @@
 */
 
 // devDependencies
+const fs = require('fs');
 const path = require('path');
+const execSync = require('child_process').execSync;
 const Package = require('../../package.json');
 
 // build configuration files
@@ -24,9 +26,9 @@ const config = {
     guide: './build/guide.jsx'    // entry point for style guide assets
   },
   output: {
-    path: path.resolve(__dirname, `../../${Package.directories.dest}`),   // sets default location for all compiled files
-    publicPath: Package.directories.publicPath,                           // sets a default public location (required by react-routes)
-    filename: `.${Package.directories.assetPath}/js/[name].js`,           // sets filename of bundled .js file (relative to output.path config)
+    path: path.resolve(__dirname, `../../dist`),  // sets default location for all compiled files
+    publicPath: '/',                              // sets a default public location (required by react-routes)
+    filename: `${Package.directories.assetPath}/js/[name].js`,             // sets filename of bundled .js file (relative to output.path config)
     pathinfo: false
   },
   module: {
@@ -64,5 +66,9 @@ const config = {
 
 // Prod vs. Dev config customizing
 module.exports = (env, argv) => {
+  if (!fs.existsSync(path.resolve(__dirname, '../../dist/index.html'))) {
+    execSync('npm run guide'); // fix for cold guide builds
+  }
+
   return config;
 };

build/configs/font/font.config.js

@@ -18,7 +18,7 @@ module.exports = {
         'loader': 'file-loader',
         'options': {
           'name': '[name].[ext]',
-          'outputPath': `.${Package.directories.assetPath}/fonts/`
+          'outputPath': `${Package.directories.assetPath}/fonts/`
         }
       }
     ]

build/configs/guide.config.js

@@ -9,7 +9,6 @@ const path = require('path');
 const exec = require('child_process').exec;
 const Package = require('../../package.json');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 // build configuration files
 const js = require('./js/js.config.js');        // all js file related build configurations
@@ -27,9 +26,9 @@ const config = {
     guide: './build/guide.jsx'    // entry point for style guide assets
   },
   output: {
-    path: path.resolve(__dirname, `../../${Package.directories.dest}`),   // sets default location for all compiled files
-    publicPath: Package.directories.publicPath,                           // sets a default public location (required by react-routes)
-    filename: `.${Package.directories.assetPath}/js/[name].js`,           // sets filename of bundled .js file (relative to output.path config)
+    path: path.resolve(__dirname, `../../dist`),   // sets default location for all compiled files
+    publicPath: '/',                           // sets a default public location (required by react-routes)
+    filename: `${Package.directories.assetPath}/js/[name].js`,           // sets filename of bundled .js file (relative to output.path config)
     pathinfo: false
   },
   module: {
@@ -50,16 +49,12 @@ const config = {
     ...alias.plugins, // see build/config/alias.config.js
     ...stats.plugins, // see build/configs/stats.config.js
     new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server.
-      {
-        from: path.resolve(__dirname, `../../${Package.directories.dest}`),
-        to: path.resolve(__dirname, `../../dist`)
-      },
       {
         'from': path.resolve(
           __dirname,
           `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}`
         ),
-        'to': path.resolve(__dirname, `../../${Package.directories.dest}`)
+        'to': path.resolve(__dirname, '../../dist')
       }
     ])
   ],
@@ -78,15 +73,5 @@ const config = {
 
 // Prod vs. Dev config customizing
 module.exports = (env, argv) => {
-  if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) {
-    config.plugins.push(
-      new CleanWebpackPlugin({
-        cleanStaleWebpackAssets: false                 // resolve conflict with `CopyWebpackPlugin`
-      })
-    );
-  } else {
-    exec('npm run build');                             // when missing a required "first time build"
-  }
-
   return config;
 };

build/configs/html/html.config.js

@@ -24,10 +24,10 @@ module.exports = {
   }],
   plugins: [
     new HtmlWebPackPlugin({ // used to compile our html files/
-      'title': 'Unslated Component Guide',
-      'template': './src/index.html',
-      'filename': './index.html',
-      'favicon': './src/elements/atoms/Icon/assets/favicon.ico',
+      'title': `${Package.name} ${Package.version}`,
+      'template': 'src/index.html',
+      'filename': 'index.html',
+      'favicon': 'src/elements/atoms/Icon/assets/favicon.ico',
     }),
     new WebpackCDNInject({
       head: [

build/configs/img/img.config.js

@@ -5,6 +5,7 @@
 const path = require('path');
 const Package = require('../../../package.json');
 const WebpackSvgSpritely = require('webpack-svg-spritely');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 // all image types get ran through these process
 module.exports = {
@@ -20,7 +21,7 @@ module.exports = {
         'loader': 'file-loader', // (see: https://www.npmjs.com/package/file-loader)
         'options': {
           'name': '[name].[ext]',
-          'outputPath': `.${Package.directories.assetPath}/img` // see package.json
+          'outputPath': `${Package.directories.assetPath}/img` // see package.json
         }
       },
       {
@@ -35,7 +36,7 @@ module.exports = {
           },
           'svgo': {
             'options': {
-              'output': `${Package.directories.dest}${Package.directories.assetPath}/img` // see package.json
+              'output': `${Package.directories.assetPath}/img` // see package.json
             },
             'plugins': [
               { 'cleanupAttrs': true },
@@ -75,8 +76,13 @@ module.exports = {
   plugins: [
     // Builds our icon svg sprite file (see: https://www.npmjs.com/package/webpack-svg-spritely)
     new WebpackSvgSpritely({
-      output: `${Package.directories.assetPath}/img`,
+      output: `/${Package.directories.assetPath}/img`,
       entry: 'assets'
+    }),
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [
+        'assets/img/**'
+      ]
     })
   ]
 };

build/configs/js/js.config.js

@@ -38,7 +38,7 @@ module.exports = {
       {
         context: path.resolve(__dirname, '../../../src/data/'),
         from: path.resolve(__dirname, '../../../src/data/*.*'), // for IIS servers
-        to: `./${Package.directories.assetPath}/data/`          // relative to Package.directories.dest
+        to: `${Package.directories.assetPath}/data/`          // relative to Package.directories.dest
       }
     ])
   ]

build/configs/webpack/alias.config.js

@@ -22,6 +22,7 @@ module.exports = {
     '@modifiers': path.resolve(__dirname, '../../../src/elements/modifiers/'),
     '@templates': path.resolve(__dirname, '../../../src/elements/templates/'),
     '@tools': path.resolve(__dirname, '../../guide/src/tools/'),
+    '@guideElements': path.resolve(__dirname, '../../guide/src/elements/'),
     '@guideAtoms': path.resolve(__dirname, '../../guide/src/elements/atoms/'),
     '@guideAssets': path.resolve(__dirname, '../../guide/assets/'),
     '@guideMolecules': path.resolve(__dirname, '../../guide/src/elements/molecules/'),

build/configs/webpack/server.config.js

@@ -35,15 +35,13 @@ module.exports = {
   config: {
     devServer: {
       port: (Package.local.port.length) ? Package.local.port : '',                 // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-port)
-      host: Package.local.host,                 // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-host)
-      publicPath: Package.directories.publicPath,
-      contentBase: Package.directories.dest,
-      allowedHosts: Package.local.allowedHosts, // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-allowedhosts)
+      host: Package.local.host,                                                    // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-host)
+      allowedHosts: Package.local.allowedHosts,                                    // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-allowedhosts)
       historyApiFallback: true,
       watchOptions: {
         ignored: /node_modules/
       },
-      before: (app, server) => {                 // Webpack-dev-server routes (see: https://webpack.js.org/configuration/dev-server/#devserver-before)
+      before: (app, server) => {                                                   // Webpack-dev-server routes (see: https://webpack.js.org/configuration/dev-server/#devserver-before)
         // All unslated GUI /api calls funneled here
         app.get('/api', (req, res) => {
           const query = res.req.query;

build/configs/webpack/webpack.plugins.js

@@ -176,7 +176,26 @@ class MetricsBundle {
   }
 }
 
+/*
+  Helper plugin to copy production builds to configured output location
+*/
+
+class WebpackHooks {
+  constructor(hooks) {
+    this.hooks = hooks;
+  }
+
+  apply(compiler) {
+    Object.keys(this.hooks).map((i) => {
+      compiler.hooks[i].tap('WebpackHooks', (data) => {
+        this.hooks[i]();
+      });
+    });
+  }
+}
+
 module.exports = {
   StaticBundle,
-  MetricsBundle
+  MetricsBundle,
+  WebpackHooks,
 };

build/guide.jsx

@@ -9,13 +9,10 @@ import '@guide/styles'; // see ./build/guide/styles.css
 import '@guide/scripts'; // see ./guide/guide/scripts.jsx
 
 const requireAll = (context) => context.keys().map(context);
-
-requireAll(
-  require.context(
-    '@guide/src/elements/',
-    true,
-    /^(?!.*Root).*\/(?!.*RichText).*\/(?!.*font-face).*\.css$/
-  )
-);
+requireAll(require.context(
+  '@guideElements/',
+  true,
+  /\.(css|svg|jpg|png|gif)$/
+));
 
 require('es6-object-assign').polyfill();