assets/ -> resources/assets/

resources/assets/build/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": false,
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "prefer-rest-params": 0,
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "ignore"
+    }]
+  }
+}

resources/assets/build/config.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const { argv } = require('yargs');
+const merge = require('webpack-merge');
+
+const userConfig = require('../config');
+
+const isProduction = !!((argv.env && argv.env.production) || argv.p);
+const rootPath = (userConfig.paths && userConfig.paths.root)
+  ? userConfig.paths.root
+  : process.cwd();
+
+const config = merge({
+  copy: 'images/**/*',
+  proxyUrl: 'http://localhost:3000',
+  cacheBusting: '[name]_[hash]',
+  paths: {
+    root: rootPath,
+    assets: path.join(rootPath, 'resources/assets'),
+    dist: path.join(rootPath, 'dist'),
+  },
+  enabled: {
+    sourceMaps: !isProduction,
+    optimize: isProduction,
+    cacheBusting: isProduction,
+    watcher: !!argv.watch,
+  },
+  watch: [],
+  browsers: [],
+}, userConfig);
+
+module.exports = merge(config, {
+  env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
+  publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
+  manifest: {},
+});
+
+/**
+ * If your publicPath differs between environments, but you know it at compile time,
+ * then set SAGE_DIST_PATH as an environment variable before compiling.
+ * Example:
+ *   SAGE_DIST_PATH=/wp-content/themes/sage/dist yarn build:production
+ */
+if (process.env.SAGE_DIST_PATH) {
+  module.exports.publicPath = process.env.SAGE_DIST_PATH;
+}
+
+/**
+ * If you don't know your publicPath at compile time, then uncomment the lines
+ * below and use WordPress's wp_localize_script() to set SAGE_DIST_PATH global.
+ * Example:
+ *   wp_localize_script('sage/main.js', 'SAGE_DIST_PATH', get_theme_file_uri('dist/'))
+ */
+// Object.keys(module.exports.entry).forEach(id =>
+//   module.exports.entry[id].unshift(path.join(__dirname, 'public-path.js')));

resources/assets/build/public-path.js

@@ -0,0 +1,7 @@
+/* eslint-env browser */
+/* globals SAGE_DIST_PATH */
+
+/** Dynamically set absolute public path from current protocol and host */
+if (SAGE_DIST_PATH) {
+  __webpack_public_path__ = SAGE_DIST_PATH; // eslint-disable-line no-undef, camelcase
+}

resources/assets/build/util/addHotMiddleware.js

@@ -0,0 +1,16 @@
+/**
+ * Loop through webpack entry
+ * and add the hot middleware
+ * @param  {Object} entry webpack entry
+ * @return {Object} entry with hot middleware
+ */
+module.exports = (entry) => {
+  const results = {};
+  const hotMiddlewareScript = 'webpack-hot-middleware/client?timeout=20000&reload=true';
+
+  Object.keys(entry).forEach((name) => {
+    results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
+    results[name].unshift(hotMiddlewareScript);
+  });
+  return results;
+};

resources/assets/build/util/assetManifestsFormatter.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = (key, value) => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  const manifest = value;
+  /**
+   * Hack to prepend scripts/ or styles/ to manifest keys
+   *
+   * This might need to be reworked at some point.
+   *
+   * Before:
+   *   {
+   *     "main.js": "scripts/main_abcdef.js"
+   *     "main.css": "styles/main_abcdef.css"
+   *   }
+   * After:
+   *   {
+   *     "scripts/main.js": "scripts/main_abcdef.js"
+   *     "styles/main.css": "styles/main_abcdef.css"
+   *   }
+   */
+  Object.keys(manifest).forEach((src) => {
+    const sourcePath = path.basename(path.dirname(src));
+    const targetPath = path.basename(path.dirname(manifest[src]));
+    if (sourcePath === targetPath) {
+      return;
+    }
+    manifest[`${targetPath}/${src}`] = manifest[src];
+    delete manifest[src];
+  });
+  return manifest;
+};

resources/assets/build/webpack.config.js

@@ -0,0 +1,186 @@
+'use strict'; // eslint-disable-line
+
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const autoprefixer = require('autoprefixer');
+const CleanPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
+const config = require('./config');
+
+const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
+const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap';
+
+let webpackConfig = {
+  context: config.paths.assets,
+  entry: config.entry,
+  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
+  output: {
+    path: config.paths.dist,
+    publicPath: config.publicPath,
+    filename: `scripts/${assetsFilenames}.js`,
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js?$/,
+        include: config.paths.assets,
+        use: 'eslint',
+      },
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
+        loader: 'buble',
+        options: { objectAssign: 'Object.assign' },
+      },
+      {
+        test: /\.css$/,
+        include: config.paths.assets,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style',
+          publicPath: '../',
+          use: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+          ],
+        }),
+      },
+      {
+        test: /\.scss$/,
+        include: config.paths.assets,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style',
+          publicPath: '../',
+          use: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+            `resolve-url?${sourceMapQueryStr}`,
+            `sass?${sourceMapQueryStr}`,
+          ],
+        }),
+      },
+      {
+        test: /\.(ttf|eot|png|jpe?g|gif|svg|ico)$/,
+        include: config.paths.assets,
+        loader: 'file',
+        options: {
+          name: `[path]${assetsFilenames}.[ext]`,
+        },
+      },
+      {
+        test: /\.woff2?$/,
+        include: config.paths.assets,
+        loader: 'url',
+        options: {
+          limit: 10000,
+          mimetype: 'application/font-woff',
+          name: `[path]${assetsFilenames}.[ext]`,
+        },
+      },
+      {
+        test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg)$/,
+        include: /node_modules|bower_components/,
+        loader: 'file',
+        options: {
+          name: `vendor/${config.cacheBusting}.[ext]`,
+        },
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      config.paths.assets,
+      'node_modules',
+      'bower_components',
+    ],
+    enforceExtension: false,
+  },
+  resolveLoader: {
+    moduleExtensions: ['-loader'],
+  },
+  externals: {
+    jquery: 'jQuery',
+  },
+  plugins: [
+    new CleanPlugin([config.paths.dist], {
+      root: config.paths.root,
+      verbose: false,
+    }),
+    /**
+     * It would be nice to switch to copy-webpack-plugin, but
+     * unfortunately it doesn't provide a reliable way of
+     * tracking the before/after file names
+     */
+    new CopyGlobsPlugin({
+      pattern: config.copy,
+      output: `[path]${assetsFilenames}.[ext]`,
+      manifest: config.manifest,
+    }),
+    new ExtractTextPlugin({
+      filename: `styles/${assetsFilenames}.css`,
+      allChunks: true,
+      disable: (config.enabled.watcher),
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      Tether: 'tether',
+      'window.Tether': 'tether',
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: config.enabled.optimize,
+      debug: config.enabled.watcher,
+      stats: { colors: true },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.s?css$/,
+      options: {
+        output: { path: config.paths.dist },
+        context: config.paths.assets,
+        postcss: [
+          autoprefixer({ browsers: config.browsers }),
+        ],
+      },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.js$/,
+      options: {
+        eslint: { failOnWarning: false, failOnError: true },
+      },
+    }),
+  ],
+};
+
+/* eslint-disable global-require */ /** Let's only load dependencies as needed */
+
+if (config.enabled.optimize) {
+  webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
+}
+
+if (config.env.production) {
+  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
+}
+
+if (config.enabled.cacheBusting) {
+  const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+  webpackConfig.plugins.push(
+    new WebpackAssetsManifest({
+      output: 'assets.json',
+      space: 2,
+      writeToDisk: false,
+      assets: config.manifest,
+      replacer: require('./util/assetManifestsFormatter'),
+    })
+  );
+}
+
+if (config.enabled.watcher) {
+  webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
+  webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
+}
+
+module.exports = webpackConfig;

resources/assets/build/webpack.config.optimize.js

@@ -0,0 +1,29 @@
+'use strict'; // eslint-disable-line
+
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const { default: ImageminPlugin } = require('imagemin-webpack-plugin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+const cssnano = require('cssnano');
+
+const config = require('./config');
+
+module.exports = {
+  plugins: [
+    new OptimizeCssAssetsPlugin({
+      cssProcessor: cssnano,
+      cssProcessorOptions: {
+        discardComments: { removeAll: true },
+        autoprefixer: { browsers: config.browsers },
+      },
+      canPrint: true,
+    }),
+    new ImageminPlugin({
+      optipng: { optimizationLevel: 7 },
+      gifsicle: { optimizationLevel: 3 },
+      pngquant: { quality: '65-90', speed: 4 },
+      svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false },
+      plugins: [imageminMozjpeg({ quality: 75 })],
+      disable: (config.enabled.watcher),
+    }),
+  ],
+};

resources/assets/build/webpack.config.watch.js

@@ -0,0 +1,34 @@
+const url = require('url');
+const webpack = require('webpack');
+const BrowserSyncPlugin = require('browsersync-webpack-plugin');
+
+const config = require('./config');
+
+const target = process.env.DEVURL || config.devUrl;
+
+/**
+ * We do this to enable injection over SSL.
+ */
+if (url.parse(target).protocol === 'https:') {
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
+}
+
+module.exports = {
+  output: {
+    pathinfo: true,
+    publicPath: config.proxyUrl + config.publicPath,
+  },
+  devtool: '#cheap-module-source-map',
+  stats: false,
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new BrowserSyncPlugin({
+      target,
+      proxyUrl: config.proxyUrl,
+      watch: config.watch,
+      delay: 500,
+    }),
+  ],
+};