Beta 2

.travis.yml

@@ -36,6 +36,6 @@ install:
 script:
   - yarn run test
   - yarn run build
-  - yarn run clean
+  - yarn run rmdist
   - yarn run "build:production"
   - composer test

CHANGELOG.md

@@ -1,3 +1,16 @@
+### 9.0.0-beta.2: January 19th, 2016
+* Fix Browersync ([#1815](https://github.com/roots/sage/pull/1815))
+* Add option to select CSS framework, add Foundation as an option ([#1813](https://github.com/roots/sage/pull/1813))
+* Add option to add Font Awesome ([#1812](https://github.com/roots/sage/pull/1812))
+* Add option to change theme file headers ([#1811](https://github.com/roots/sage/pull/1811))
+* Add option to remove Bootstrap ([#1810](https://github.com/roots/sage/pull/1810))
+* Remove Font Awesome ([#1809](https://github.com/roots/sage/pull/1809))
+* Remove grid defaults ([#1808](https://github.com/roots/sage/pull/1808))
+* Fix for `publicPath` ([#1806](https://github.com/roots/sage/pull/1806))
+* Update clean task name ([#1800](https://github.com/roots/sage/pull/1800))
+* Allow browser versions to be configured in `config.json` ([#1798](https://github.com/roots/sage/pull/1798))
+* Use stock ESLint ([#1796](https://github.com/roots/sage/pull/1796))
+
 ### 9.0.0-beta.1: January 10th, 2016
 * Update to Bootstrap 4 Alpha 6 ([#1792](https://github.com/roots/sage/pull/1792))
 * Add Blade ([#1765](https://github.com/roots/sage/pull/1765) and [#1777](https://github.com/roots/sage/pull/1777))

README.md

@@ -13,8 +13,12 @@ Sage is a WordPress starter theme with a modern development workflow.
 * ES6 for JavaScript
 * [Webpack](https://webpack.github.io/) for compiling assets, optimizing images, and concatenating and minifying files
 * [Browsersync](http://www.browsersync.io/) for synchronized browser testing
-* [Bootstrap 4](http://getbootstrap.com/) for a front-end framework (can be removed or replaced)
 * [Laravel's Blade](https://laravel.com/docs/5.3/blade) as a templating engine
+* CSS framework options:
+  * [Bootstrap 4](http://getbootstrap.com/)
+  * [Foundation](http://foundation.zurb.com/)
+  * None (blank slate)
+
 
 See a working example at [roots-example-project.com](https://roots-example-project.com/).
 
@@ -36,6 +40,12 @@ Install Sage using Composer from your WordPress themes directory (replace `your-
 $ composer create-project roots/sage your-theme-name dev-master
 ```
 
+During theme installation you will have the options to:
+
+* Update theme headers (theme name, description, author, etc.)
+* Select a CSS framework (Bootstrap, Foundation, none)
+* Add Font Awesome
+
 ## Theme structure
 
 ```shell
@@ -95,7 +105,7 @@ You now have all the necessary dependencies to run the build process.
 
 #### Additional commands
 
-* `yarn run clean` — Remove your `dist/` folder
+* `yarn run rmdist` — Remove your `dist/` folder
 * `yarn run lint` — Run eslint against your assets and build scripts
 * `composer test` — Check your PHP for code smells with `phpmd` and PSR-2 compliance with `phpcs`
 

assets/build/config.js

@@ -1,16 +1,16 @@
 const path = require('path');
 const argv = require('minimist')(process.argv.slice(2));
 const uniq = require('lodash/uniq');
+const merge = require('webpack-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({
+const config = merge({
   copy: 'images/**/*',
   proxyUrl: 'http://localhost:3000',
   cacheBusting: '[name]_[hash]',
@@ -26,12 +26,13 @@ const config = mergeWithConcat({
     watcher: !!argv.watch,
   },
   watch: [],
+  browsers: [],
 }, userConfig);
 
 config.watch.push(`${path.basename(config.paths.assets)}/${config.copy}`);
 config.watch = uniq(config.watch);
 
-module.exports = mergeWithConcat(config, {
+module.exports = merge(config, {
   env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
   publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
   manifest: {},

assets/build/util/addHotMiddleware.js

@@ -10,12 +10,12 @@ module.exports = (entry) => {
   const results = {};
   const hotMiddlewareScript = `webpack-hot-middleware/client?${qs.stringify({
     timeout: 20000,
-    reload: false,
+    reload: true,
   })}`;
 
   Object.keys(entry).forEach((name) => {
     results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
-    results[name].push(hotMiddlewareScript);
+    results[name].unshift(hotMiddlewareScript);
   });
   return results;
 };

assets/build/webpack.config.js

@@ -2,30 +2,17 @@
 
 const webpack = require('webpack');
 const qs = require('qs');
+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('./webpack.plugin.copyglobs');
-const mergeWithConcat = require('./util/mergeWithConcat');
 const config = require('./config');
 
 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))/],
-  use: [{
-    loader: 'buble',
-    options: { objectAssign: 'Object.assign' },
-  }],
-};
-
-if (config.enabled.watcher) {
-  jsLoader.use.unshift('monkey-hot?sourceType=module');
-}
-
 let webpackConfig = {
   context: config.paths.assets,
   entry: config.entry,
@@ -37,13 +24,18 @@ let webpackConfig = {
   },
   module: {
     rules: [
-      jsLoader,
       {
         enforce: 'pre',
         test: /\.js?$/,
         include: config.paths.assets,
         loader: 'eslint',
       },
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
+        loader: 'buble',
+        options: { objectAssign: 'Object.assign' },
+      },
       {
         test: /\.css$/,
         include: config.paths.assets,
@@ -155,7 +147,7 @@ let webpackConfig = {
         output: { path: config.paths.dist },
         context: config.paths.assets,
         postcss: [
-          autoprefixer({ browsers: ['last 2 versions', 'android 4', 'opera 12'] }),
+          autoprefixer({ browsers: config.browsers }),
         ],
       },
     }),
@@ -171,11 +163,11 @@ let webpackConfig = {
 /* eslint-disable global-require */ /** Let's only load dependencies as needed */
 
 if (config.enabled.optimize) {
-  webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.optimize'));
+  webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
 }
 
 if (config.env.production) {
-  webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
 }
 
 if (config.enabled.cacheBusting) {
@@ -194,7 +186,7 @@ if (config.enabled.cacheBusting) {
 
 if (config.enabled.watcher) {
   webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
-  webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.watch'));
+  webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
 }
 
 module.exports = webpackConfig;

assets/build/webpack.config.optimize.js

@@ -11,7 +11,10 @@ module.exports = {
   plugins: [
     new OptimizeCssAssetsPlugin({
       cssProcessor: cssnano,
-      cssProcessorOptions: { discardComments: { removeAll: true } },
+      cssProcessorOptions: {
+        discardComments: { removeAll: true },
+        autoprefixer: { browsers: config.browsers },
+      },
       canPrint: true,
     }),
     new ImageminPlugin({

assets/build/webpack.config.watch.js

@@ -13,10 +13,9 @@ module.exports = {
   plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new BrowserSyncPlugin({
       target: config.devUrl,
-      publicPath: '../',
       proxyUrl: config.proxyUrl,
       watch: config.watch,
     }),

assets/build/webpack.plugin.copyglobs.js

@@ -82,7 +82,6 @@ module.exports = class {
     if (!this.started) {
       compiler.plugin('emit', this.emitHandler.bind(this));
       compiler.plugin('after-emit', this.afterEmitHandler.bind(this));
-      compiler.plugin('after-emit', this.afterEmitHandler.bind(this));
       this.started = true;
     }
   }

assets/config.json

@@ -15,5 +15,10 @@
   "publicPath": "/app/themes/sage",
   "devUrl": "http://example.dev",
   "proxyUrl": "http://localhost:3000",
-  "cacheBusting": "[name]_[hash:8]"
+  "cacheBusting": "[name]_[hash:8]",
+  "browsers": [
+    "last 2 versions",
+    "android 4",
+    "opera 12"
+  ]
 }

assets/scripts/main.js

@@ -1,6 +1,6 @@
 /** import external dependencies */
 import 'jquery';
-import 'bootstrap/dist/js/bootstrap';
+import 'bootstrap';
 
 /** import local dependencies */
 import Router from './util/Router';

assets/styles/common/_variables.scss

@@ -1,9 +1,2 @@
 // Colors
 $brand-primary:         #27ae60;
-
-// Grid settings
-$main-sm-columns:       12;
-$sidebar-sm-columns:    4;
-
-// Vendor variables
-$fa-font-path:          '~font-awesome/fonts';

assets/styles/main.scss

@@ -2,13 +2,11 @@
 
 // Import npm dependencies
 @import "~bootstrap/scss/bootstrap";
-@import "~font-awesome/scss/font-awesome";
 
 @import "common/global";
 @import "components/buttons";
 @import "components/comments";
 @import "components/forms";
-@import "components/grid";
 @import "components/wp-classes";
 @import "layouts/header";
 @import "layouts/sidebar";

composer.json

@@ -35,13 +35,16 @@
     "illuminate/config": "~5.3.0"
   },
   "require-dev": {
-    "squizlabs/php_codesniffer": "^2.5.1",
-    "phpmd/phpmd": "^2.4.2"
+    "squizlabs/php_codesniffer": "^2.5.1"
   },
   "scripts": {
     "test": [
-      "vendor/bin/phpcs",
-      "vendor/bin/phpmd src text cleancode,codesize,controversial,design,naming,unusedcode"
+      "vendor/bin/phpcs"
+    ],
+    "post-create-project-cmd": [
+        "Roots\\Sage\\PostCreateProject::updateHeaders",
+        "Roots\\Sage\\PostCreateProject::selectFramework",
+        "Roots\\Sage\\PostCreateProject::addFontAwesome"
     ]
   }
 }