v3 draft

assets/js/bootstrap.js

@@ -0,0 +1 @@
+window.$ = window.jQuery = require('jquery');

assets/js/script.js

@@ -1,7 +1,3 @@
-// var $ = require('jquery');
+require('./bootstrap');
 
-(function() {
-
-  
-
-})($);
+console.log( 'Barebones rocks! You are running jQuery version: ' + $.fn.jquery );

functions.php

@@ -3,21 +3,21 @@
 /**
  * Custom functions / External files
  */
-
-require_once 'functions/example.php';
+require_once 'includes/functions.php';
 
 
 
 /**
  * Add support for useful stuff
  */
-
 if (function_exists('add_theme_support')) {
     // Add support for document title tag
     add_theme_support('title-tag');
 
     // Add Thumbnail Theme Support
     add_theme_support('post-thumbnails');
+
+    // Add image sizes
     // add_image_size( 'custom-size', 700, 200, true );
 
     // Add Support for post formats
@@ -53,7 +53,6 @@ function barebones_remove_comments_rss($for_comments)
 {
     return;
 }
-
 add_filter('post_comments_feed_link', 'barebones_remove_comments_rss');
 
 
@@ -64,17 +63,10 @@ add_filter('post_comments_feed_link', 'barebones_remove_comments_rss');
 
 function barebones_scripts()
 {
-    /*
-     * For IE8 to play nice, you'll need to include your CSS here, for example:
-     */
     // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
     // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' );
-    wp_deregister_script('jquery');
-    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3', true);
-    wp_enqueue_script('jquery');
-    wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . time(), ['jquery'], null, true);
+    wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . time(), [], null, true);
 }
-
 add_action('wp_enqueue_scripts', 'barebones_scripts');
 
 
@@ -99,7 +91,6 @@ function barebones_nav_menu_args($args = '')
 
     return $args;
 }
-
 add_filter('wp_nav_menu_args', 'barebones_nav_menu_args');
 
 
@@ -112,7 +103,6 @@ function barebones_mail_from($email)
 {
     return get_option('admin_email');
 }
-
 add_filter('wp_mail_from', 'barebones_mail_from');
 
 
@@ -120,7 +110,6 @@ function barebones_mail_from_name($name)
 {
     return get_bloginfo('name');
 }
-
 add_filter('wp_mail_from_name', 'barebones_mail_from_name');
 
 
@@ -135,7 +124,6 @@ function button_shortcode($atts, $content = null)
 
     return '<a class="' . $atts['class'] . '" href="' . $atts['link'] . '">' . $content . '</a>';
 }
-
 add_shortcode('button', 'button_shortcode');
 
 
@@ -151,10 +139,8 @@ function barebones_mce_buttons_2($buttons)
 
     return $buttons;
 }
-
 add_filter('mce_buttons_2', 'barebones_mce_buttons_2');
 
-
 function barebones_tiny_mce_before_init($settings)
 {
     $style_formats = [
@@ -170,11 +156,8 @@ function barebones_tiny_mce_before_init($settings)
 
     return $settings;
 }
-
 add_filter('tiny_mce_before_init', 'barebones_tiny_mce_before_init');
 
-
-
 /**
  * Get post thumbnail url
  *

functions/example.php

@@ -1,3 +0,0 @@
-<?php
-
-    //

gulpfile.js

@@ -1,29 +0,0 @@
-// Notifications (comment out to disable notifications)
-// process.env.DISABLE_NOTIFIER = true;
-
-var gulp = require('gulp');
-var gulpImagemin = require('gulp-imagemin');
-var elixir = require('laravel-elixir');
-
-// Assets path
-elixir.config.assetsPath = 'assets';
-
-// Make autoprefixer support older browsers
-elixir.config.css.autoprefix.options.browsers =  ['last 15 versions'];
-
-// Imagemin
-var Task = elixir.Task;
-elixir.extend('imagemin', function(src, dest) {
-  new Task('imagemin', function() {
-    return gulp.src(elixir.config.assetsPath + src)
-        .pipe(gulpImagemin())
-        .pipe(gulp.dest(dest));
-  }).watch(elixir.config.assetsPath + src);
-});
-
-// Run elixir tasks
-elixir(function(mix) {
-    mix.sass('barebones.scss', 'style.css')
-       .scripts(['script.js'], 'js/script.min.js')
-       .imagemin('/images/**/*', './img');
-});

includes/functions.php

@@ -0,0 +1,4 @@
+<?php
+/**
+ * Project specific functions
+ */

manifest.json

@@ -0,0 +1,4 @@
+{
+  "script.min.css": "style.css",
+  "script.min.js": "js/script.min.js"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "barebones",
-  "version": "2.0.2",
+  "version": "3.0.0beta",
   "author": "Benchmark Studios",
   "description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond",
   "license": "MIT",
@@ -13,17 +13,18 @@
     "url": "https://github.com/benchmarkstudios/barebones/issues"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules",
+    "dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
+    "hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
+    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "private": true,
   "devDependencies": {
-    "gulp": "^3.8.8",
-    "gulp-imagemin": "^3.0.1",
-    "imagemin-gifsicle": "^5.1.0",
-    "imagemin-jpegtran": "^5.0.2",
-    "imagemin-optipng": "^5.2.1",
-    "imagemin-svgo": "^5.2.0",
-    "laravel-elixir": "^4.2.1"
+    "cross-env": "^3.1.4",
+    "laravel-mix": "^0.4.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "jquery": "^3.1.1"
+  }
 }

templates/template-demo.php

@@ -1,31 +0,0 @@
-<?php 
-
-    /**
-     * Template Name: Demo page template
-     */
-
-    get_header();
-
-?>
-
-<main class="main" role="main">
-    <div class="container">
-
-        <?php while (have_posts()) : the_post(); ?>
-
-            <article <?php post_class(); ?>>
-
-                <header role="heading">
-                    <h3 class="post__title"><?php the_title(); ?></h3>
-                </header>
-
-                <?php the_content(); ?>
-
-            </article>
-
-        <?php endwhile; ?>
-
-    </div>
-</main>
-
-<?php get_footer(); ?>

webpack.config.js

@@ -0,0 +1,340 @@
+var path = require('path');
+var webpack = require('webpack');
+var Mix = require('laravel-mix').config;
+var plugins = require('laravel-mix').plugins;
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Initialization
+ |--------------------------------------------------------------------------
+ |
+ | As our first step, we'll require the project's Laravel Mix file
+ | and record the user's requested compilation and build steps.
+ | Once those steps have been recorded, we may get to work.
+ |
+ */
+
+Mix.initialize();
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Webpack Context
+ |--------------------------------------------------------------------------
+ |
+ | This prop will determine the appropriate context, when running Webpack.
+ | Since you have the option of publishing this webpack.config.js file
+ | to your project root, we will dynamically set the path for you.
+ |
+ */
+
+module.exports.context = Mix.paths.root();
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Webpack Entry
+ |--------------------------------------------------------------------------
+ |
+ | We'll first specify the entry point for Webpack. By default, we'll
+ | assume a single bundled file, but you may call Mix.extract()
+ | to make a separate bundle specifically for vendor libraries.
+ |
+ */
+
+module.exports.entry = Mix.entry();
+
+if (Mix.js.vendor) {
+    module.exports.entry.vendor = Mix.js.vendor;
+}
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Webpack Output
+ |--------------------------------------------------------------------------
+ |
+ | Webpack naturally requires us to specify our desired output path and
+ | file name. We'll simply echo what you passed to with Mix.js().
+ | Note that, for Mix.version(), we'll properly hash the file.
+ |
+ */
+
+module.exports.output = Mix.output();
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Rules
+ |--------------------------------------------------------------------------
+ |
+ | Webpack rules allow us to register any number of loaders and options.
+ | Out of the box, we'll provide a handful to get you up and running
+ | as quickly as possible, though feel free to add to this list.
+ |
+ */
+
+module.exports.module = {
+    rules: [
+        {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+            options: {
+                loaders: {
+                    js: 'babel-loader' + Mix.babelConfig(),
+                    scss: 'vue-style-loader!css-loader!sass-loader',
+                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+                },
+
+                postcss: [
+                    require('autoprefixer')
+                ]
+            }
+        },
+
+        {
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            loader: 'babel-loader' + Mix.babelConfig()
+        },
+
+        {
+            test: /\.(png|jpg|gif)$/,
+            loader: 'file-loader',
+            options: {
+                name: '[name].[ext]?[hash]'
+            }
+        },
+
+        {
+            test: /\.(woff2?|ttf|eot|svg)$/,
+            loader: 'file-loader',
+            options: {
+                name: '/fonts/[name].[ext]?[hash]'
+            }
+        }
+    ]
+};
+
+
+if (Mix.cssPreprocessor) {
+    Mix[Mix.cssPreprocessor].forEach(toCompile => {
+        let extractPlugin = new plugins.ExtractTextPlugin(
+            Mix.cssOutput(toCompile)
+        );
+
+        module.exports.module.rules.push({
+            test: new RegExp(toCompile.src.file),
+            loader: extractPlugin.extract({
+                fallbackLoader: 'style-loader',
+                loader: [
+                    'css-loader',
+                    'postcss-loader',
+                    'resolve-url-loader',
+                    (Mix.cssPreprocessor == 'sass') ? 'sass-loader?sourceMap' : 'less-loader'
+                ]
+            })
+        });
+
+        module.exports.plugins = (module.exports.plugins || []).concat(extractPlugin);
+    });
+}
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Resolve
+ |--------------------------------------------------------------------------
+ |
+ | Here, we may set any options/aliases that affect Webpack's resolving
+ | of modules. To begin, we will provide the necessary Vue alias to
+ | load the Vue common library. You may delete this, if needed.
+ |
+ */
+
+module.exports.resolve = {
+    extensions: ['*', '.js', '.jsx', '.vue'],
+
+    alias: {
+        'vue$': 'vue/dist/vue.common.js'
+    }
+};
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Stats
+ |--------------------------------------------------------------------------
+ |
+ | By default, Webpack spits a lot of information out to the terminal,
+ | each you time you compile. Let's keep things a bit more minimal
+ | and hide a few of those bits and pieces. Adjust as you wish.
+ |
+ */
+
+module.exports.stats = {
+    hash: false,
+    version: false,
+    timings: false,
+    children: false,
+    errors: false
+};
+
+module.exports.performance = { hints: false };
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Devtool
+ |--------------------------------------------------------------------------
+ |
+ | Sourcemaps allow us to access our original source code within the
+ | browser, even if we're serving a bundled script or stylesheet.
+ | You may activate sourcemaps, by adding Mix.sourceMaps().
+ |
+ */
+
+module.exports.devtool = Mix.sourcemaps;
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Webpack Dev Server Configuration
+ |--------------------------------------------------------------------------
+ |
+ | If you want to use that flashy hot module replacement feature, then
+ | we've got you covered. Here, we'll set some basic initial config
+ | for the Node server. You very likely won't want to edit this.
+ |
+ */
+module.exports.devServer = {
+    historyApiFallback: true,
+    noInfo: true,
+    compress: true
+};
+
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Plugins
+ |--------------------------------------------------------------------------
+ |
+ | Lastly, we'll register a number of plugins to extend and configure
+ | Webpack. To get you started, we've included a handful of useful
+ | extensions, for versioning, OS notifications, and much more.
+ |
+ */
+
+module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.ProvidePlugin({
+        jQuery: 'jquery',
+        $: 'jquery',
+        jquery: 'jquery'
+    }),
+
+    new plugins.FriendlyErrorsWebpackPlugin(),
+
+    new plugins.ManifestPlugin(),
+
+    new plugins.WebpackMd5HashPlugin(),
+
+    new webpack.LoaderOptionsPlugin({
+        minimize: Mix.inProduction,
+        options: {
+            postcss: [
+                require('autoprefixer')
+            ],
+            context: __dirname,
+            output: { path: './' }
+        }
+    })
+]);
+
+
+
+if (Mix.notifications) {
+    module.exports.plugins.push(
+        new plugins.WebpackNotifierPlugin({
+            title: 'Laravel Mix',
+            alwaysNotify: true,
+            contentImage: 'node_modules/laravel-mix/icons/laravel.png'
+        })
+    );
+}
+
+
+if (Mix.versioning) {
+    Mix.versioning.record();
+
+    module.exports.plugins.push(
+        new plugins.WebpackOnBuildPlugin(() => {
+            Mix.versioning.prune(Mix.publicPath);
+        })
+    );
+}
+
+
+if (Mix.combine || Mix.minify) {
+    module.exports.plugins.push(
+        new plugins.WebpackOnBuildPlugin(() => {
+            Mix.concatenateAll().minifyAll();
+        })
+    );
+}
+
+
+if (Mix.copy) {
+    Mix.copy.forEach(copy => {
+        module.exports.plugins.push(
+            new plugins.CopyWebpackPlugin([copy])
+        );
+    });
+}
+
+
+if (Mix.js.vendor) {
+    module.exports.plugins.push(
+        new webpack.optimize.CommonsChunkPlugin({
+            names: ['vendor', 'manifest']
+        })
+    );
+}
+
+
+if (Mix.inProduction) {
+    module.exports.plugins = module.exports.plugins.concat([
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+
+        new webpack.optimize.UglifyJsPlugin({
+            sourceMap: true,
+            compress: {
+                warnings: false
+            }
+        })
+    ]);
+}
+
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Finalizing
+ |--------------------------------------------------------------------------
+ |
+ | Now that we've declared the entirety of our Webpack configuration, the
+ | final step is to scan for any custom configuration in the Mix file.
+ | If mix.webpackConfig() is called, we'll merge it in, and build!
+ |
+ */
+Mix.finalize(module.exports);

webpack.mix.js

@@ -0,0 +1,29 @@
+let mix = require('laravel-mix').mix;
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for your application, as well as bundling up your JS files.
+ |
+ */
+
+mix.js('assets/js/script.js', 'js/script.min.js')
+   .sass('assets/sass/barebones.scss', 'style.css');
+
+// Full API
+// mix.js(src, output);
+// mix.extract(vendorLibs);
+// mix.sass(src, output);
+// mix.less(src, output);
+// mix.combine(files, destination);
+// mix.copy(from, to);
+// mix.minify(file);
+// mix.sourceMaps(); // Enable sourcemaps
+// mix.version(); // Enable versioning.
+// mix.disableNotifications();
+// mix.setPublicPath('path/to/public'); <-- Useful for Node apps.
+// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.