Refactor build routine and switch to airbnb style (#1703)

- Relocate webpack stuff to assets/build
- Switch all js to airbnb code style
- Update webpack to v2.0 (beta)
- Update all other dependencies
- Assets manifest uses relative path as key [1]
- Code should be compatible with Node 4.5.0
- All dependencies have been updated

[1]: Previously the assets manifest would use the basename of a file path as
its key when looking up a cachebusted file. This was to be consistent with
Sage 8. This change makes it so that the relative path is used instead.

To clarify, review the following example.

Before:
```
{
  "main.js": "scripts/main_5f4bfc9a9f82291c6dea.js",
  "main.css": "styles/main_5f4bfc9a9f82291c6dea.css",
  "customizer.js": "scripts/customizer_5f4bfc9a9f82291c6dea.js"
}
```

After:
```
{
  "scripts/main.js":"scripts/main_5f4bfc9a9f82291c6dea.js",
  "styles/main.css":"styles/main_5f4bfc9a9f82291c6dea.css",
  "scripts/customizer.js":"scripts/customizer_5f4bfc9a9f82291c6dea.js"
}
```

assets/build/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "root": false,
+  "extends": "airbnb",
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "prefer-rest-params": 0
+  }
+}

assets/build/config.js

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const path = require('path');
+const argv = require('minimist')(process.argv.slice(2));
+const glob = require('glob-all');
+const merge = require('lodash/merge');
+
+const mergeWithConcat = require('./util/mergeWithConcat');
+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 = mergeWithConcat({
+  copy: ['images/**/*'],
+  proxyUrl: 'http://localhost:3000',
+  cacheBusting: '[name]_[hash]',
+  paths: {
+    root: rootPath,
+    assets: path.join(rootPath, 'assets'),
+    dist: path.join(rootPath, 'dist'),
+  },
+  enabled: {
+    sourceMaps: !isProduction,
+    minify: isProduction,
+    cacheBusting: isProduction,
+    watcher: !!argv.watch,
+    uglifyJs: !(argv.p || argv.optimizeMinimize),
+  },
+  watch: [
+    'templates/**/*.php',
+    'src/**/*.php',
+  ],
+}, userConfig);
+
+Object.keys(config.entry).forEach(id =>
+  config.entry[id].unshift(path.join(__dirname, 'public-path.js')));
+
+module.exports = mergeWithConcat(config, {
+  env: merge({ production: isProduction, development: !isProduction }, argv.env),
+  entry: {
+    get files() {
+      return glob.sync(config.copy, {
+        cwd: config.paths.assets,
+        mark: true,
+      }).filter(file => !((file.slice(-1) === '/') || (!file.indexOf('*') === -1)))
+        .map(file => path.join(config.paths.assets, file));
+    },
+  },
+});

assets/build/public-path.js

@@ -0,0 +1,8 @@
+/* eslint-env browser */
+/* globals WEBPACK_PUBLIC_PATH */
+
+// Dynamically set absolute public path from current protocol and host
+if (WEBPACK_PUBLIC_PATH) {
+  // eslint-disable-next-line no-undef, camelcase
+  __webpack_public_path__ = `${location.protocol}//${location.host}${WEBPACK_PUBLIC_PATH}`;
+}

assets/build/util/mergeWithConcat.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const mergeWith = require('lodash/mergeWith');
+
+module.exports = function mergeWithConcat() {
+  const args = [].slice.call(arguments);
+  args.push((a, b) => {
+    if (Array.isArray(a) && Array.isArray(b)) {
+      return a.concat(b);
+    }
+    return undefined;
+  });
+  return mergeWith.apply(this, args);
+};

assets/build/webpack.config.js

@@ -0,0 +1,200 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const webpack = require('webpack');
+const path = require('path');
+const qs = require('qs');
+const autoprefixer = require('autoprefixer');
+const CleanPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+const mergeWithConcat = require('./util/mergeWithConcat');
+const webpackConfigProduction = require('./webpack.config.production');
+const webpackConfigWatch = require('./webpack.config.watch');
+const config = require('./config');
+
+const publicPath = `${config.publicPath}/${path.basename(config.paths.dist)}/`;
+const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
+const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap';
+
+const jsLoader = {
+  test: /\.js$/,
+  exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
+  loaders: [`babel?presets[]=${path.resolve('./node_modules/babel-preset-es2015')}&cacheDirectory`],
+};
+
+if (config.enabled.watcher) {
+  jsLoader.loaders.unshift('monkey-hot');
+}
+
+const webpackConfig = {
+  context: config.paths.assets,
+  entry: config.entry,
+  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
+  output: {
+    path: config.paths.dist,
+    publicPath,
+    filename: `scripts/${assetsFilenames}.js`,
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.js?$/,
+        include: config.paths.assets,
+        loader: 'eslint',
+      },
+    ],
+    loaders: [
+      jsLoader,
+      {
+        test: /\.css$/,
+        include: config.paths.assets,
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style',
+          loader: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+          ],
+        }),
+      },
+      {
+        test: /\.scss$/,
+        include: config.paths.assets,
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style',
+          loader: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+            `resolve-url?${sourceMapQueryStr}`,
+            `sass?${sourceMapQueryStr}`,
+          ],
+        }),
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        include: config.paths.assets,
+        loaders: [
+          `file?${qs.stringify({
+            name: '[path][name].[ext]',
+          })}`,
+        ],
+      },
+      {
+        test: /\.(ttf|eot)$/,
+        include: config.paths.assets,
+        loader: `file?${qs.stringify({
+          name: `[path]${assetsFilenames}.[ext]`,
+        })}`,
+      },
+      {
+        test: /\.woff2?$/,
+        include: config.paths.assets,
+        loader: `url?${qs.stringify({
+          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',
+        query: {
+          name: `vendor/${config.cacheBusting}.[ext]`,
+        },
+      },
+    ],
+  },
+  modules: [
+    config.paths.assets,
+    'node_modules',
+    'bower_components',
+  ],
+  enforceExtensions: false,
+  externals: {
+    jquery: 'jQuery',
+  },
+  plugins: [
+    new CleanPlugin([config.paths.dist], config.paths.root),
+    new ImageminPlugin({
+      optipng: {
+        optimizationLevel: 7,
+      },
+      gifsicle: {
+        optimizationLevel: 3,
+      },
+      pngquant: {
+        quality: '65-90',
+        speed: 4,
+      },
+      svgo: {
+        removeUnknownsAndDefaults: false,
+        cleanupIDs: false,
+      },
+      jpegtran: null,
+      plugins: [imageminMozjpeg({
+        quality: 75,
+      })],
+      disable: (config.enabled.watcher),
+    }),
+    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.DefinePlugin({
+      WEBPACK_PUBLIC_PATH: (config.enabled.watcher)
+        ? JSON.stringify(publicPath)
+        : false,
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: config.enabled.minify,
+      debug: config.enabled.watcher,
+      stats: { colors: true },
+      postcss: [
+        autoprefixer({
+          browsers: [
+            'last 2 versions',
+            'android 4',
+            'opera 12',
+          ],
+        }),
+      ],
+      eslint: {
+        failOnWarning: false,
+        failOnError: true,
+      },
+    }),
+  ],
+};
+
+module.exports = webpackConfig;
+
+if (config.env.production) {
+  module.exports = mergeWithConcat(webpackConfig, webpackConfigProduction);
+}
+
+if (config.enabled.watcher) {
+  module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch);
+}
+
+if (config.enabled.uglifyJs) {
+  module.exports.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compress: config.enabled.minify ? {
+        drop_debugger: true,
+        dead_code: true,
+        warnings: false,
+      } : false,
+      sourceMap: config.enabled.sourceMaps,
+      output: { comments: false },
+    })
+  );
+}

assets/build/webpack.config.production.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const AssetsPlugin = require('assets-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const cssnano = require('cssnano');
+const path = require('path');
+
+const config = require('./config');
+
+/**
+ * Process AssetsPlugin output and format it
+ * for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
+ * @param  {Object} assets passed by processOutput
+ * @return {String}        JSON
+ */
+const assetsPluginProcessOutput = (assets) => {
+  const results = {};
+  Object.keys(assets).forEach(name => {
+    Object.keys(assets[name]).forEach(ext => {
+      const filename = `${path.dirname(assets[name][ext])}/${path.basename(`${name}.${ext}`)}`;
+      results[filename] = assets[name][ext];
+    });
+  });
+  return JSON.stringify(results);
+};
+
+module.exports = {
+  plugins: [
+    new AssetsPlugin({
+      path: config.paths.dist,
+      filename: 'assets.json',
+      fullPath: false,
+      processOutput: assetsPluginProcessOutput,
+    }),
+    new OptimizeCssAssetsPlugin({
+      cssProcessor: cssnano,
+      cssProcessorOptions: { discardComments: { removeAll: true } },
+      canPrint: true,
+    }),
+  ],
+};

assets/build/webpack.config.watch.js

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const url = require('url');
+
+const config = require('./config');
+
+module.exports = {
+  output: { pathinfo: true },
+  debug: true,
+  devTool: 'cheap-module-source-map',
+  plugins: [
+    new BrowserSyncPlugin({
+      host: url.parse(config.proxyUrl).hostname,
+      port: url.parse(config.proxyUrl).port,
+      proxy: config.devUrl,
+      files: [
+        'templates/**/*.php',
+        'src/**/*.php',
+      ],
+    }),
+  ],
+};

assets/config.json

@@ -1,7 +1,6 @@
 {
   "entry": {
     "main": [
-      "./scripts/util/public-path.js",
       "./scripts/main.js",
       "./styles/main.scss"
     ],
@@ -10,5 +9,7 @@
     ]
   },
   "publicPath": "/app/themes/sage",
-  "devUrl": "http://example.dev"
+  "devUrl": "https://example.dev",
+  "proxyUrl": "https://localhost:3000",
+  "cacheBusting": "[name]_[hash:8]"
 }

assets/scripts/customizer.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
 
 wp.customize('blogname', (value) => {
-  value.bind((to) => $('.brand').text(to))
+  value.bind((to) => $('.brand').text(to));
 });

assets/scripts/main.js

@@ -1,12 +1,12 @@
 // import external dependencies
-import 'jquery'
-import 'bootstrap/dist/js/bootstrap'
+import 'jquery';
+import 'bootstrap/dist/js/bootstrap';
 
 // import local dependencies
 import Router from './util/router';
 import common from './routes/Common';
 import home from './routes/Home';
-import about_us from './routes/About';
+import aboutUs from './routes/About';
 
 // Use this variable to set up the common and page specific functions. If you
 // rename this variable, you will also need to rename the namespace below.
@@ -15,8 +15,8 @@ const routes = {
   common,
   // Home page
   home,
-  // About us page, note the change from about-us to about_us.
-  about_us
+  // About us page, note the change from about-us to aboutUs.
+  aboutUs,
 };
 
 // Load Events

assets/scripts/routes/About.js

@@ -1,5 +1,5 @@
 export default {
   init() {
     // JavaScript to be fired on the about us page
-  }
+  },
 };

assets/scripts/routes/Common.js

@@ -4,5 +4,5 @@ export default {
   },
   finalize() {
     // JavaScript to be fired on all pages, after page specific JS is fired
-  }
+  },
 };

assets/scripts/routes/Home.js

@@ -4,5 +4,5 @@ export default {
   },
   finalize() {
     // JavaScript to be fired on the home page, after the init JS
-  }
+  },
 };

assets/scripts/util/camelCase.js

@@ -0,0 +1,5 @@
+// the most terrible camelizer on the internet, guaranteed!
+export default (str) => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|')
+  .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+  .join('')
+  .slice(1)}`;

assets/scripts/util/public-path.js

@@ -1,8 +0,0 @@
-/* globals WEBPACK_PUBLIC_PATH */
-
-// Dynamically set absolute public path from current protocol and host
-if (WEBPACK_PUBLIC_PATH !== false) {
-  /* eslint-disable no-undef */
-  __webpack_public_path__ = location.protocol + '//' + location.host + WEBPACK_PUBLIC_PATH;
-  /*eslint-enable no-undef*/
-}

assets/scripts/util/router.js

@@ -6,6 +6,8 @@
  * replace the dash with an underscore when adding it to the object below.
  * ======================================================================== */
 
+import camelCase from './camelCase';
+
 // The routing fires all common scripts, followed by the page specific scripts.
 // Add additional events for more control over timing e.g. a finalize event
 export default class Router {
@@ -25,10 +27,15 @@ export default class Router {
     this.fire('common');
 
     // Fire page-specific init JS, and then finalize JS
-    document.body.className.replace(/-/g, '_').split(/\s+/).forEach((className) => {
-      this.fire(className);
-      this.fire(className, 'finalize');
-    });
+    document.body.className
+      .toLowerCase()
+      .replace(/-/g, '_')
+      .split(/\s+/)
+      .map(camelCase)
+      .forEach((className) => {
+        this.fire(className);
+        this.fire(className, 'finalize');
+      });
 
     // Fire common finalize JS
     this.fire('common', 'finalize');